Jquery 學習筆記（二）
更新時間：2009年10月14日 13:36:14 作者：
從最開始看到Jquery這樣的選擇器就讓我想起了CSS的選擇器，簡直是同出一轍啊，CSS的選擇器語法個人覺得相當?shù)慕?jīng)典，那么Jquery借鑒CSS也就沒有多少疑問了。
選擇器
從最開始看到Jquery這樣的選擇器就讓我想起了CSS的選擇器，簡直是同出一轍啊，CSS的選擇器語法個人覺得相當?shù)慕?jīng)典，那么Jquery借鑒CSS也就沒有多少疑問了。
還是復習一下Jquery的選擇器吧
其中h1為選擇器，color:red與background:#d00與聲明，兩者結合也即{}內(nèi)稱為聲明塊；color與background稱為屬性；red與#d00稱為值。
其中選擇器類別可分為以下類別：
標簽選擇器：p{CSS rules}
id選擇器：#ID{CSS rules}
類選擇器：.Class{CSS rules}
群組選擇器：h1,h2,h3,h4,h5,h6{CSS rules}
后代選擇器：div p{CSS rules}
通配選擇器：*{CSS rules}
偽類選擇器：a:link,a:visited{CSS rules}
另還有不常使用的多類選擇器、屬性選擇器、部分屬性選擇器、相鄰兄弟選擇器、子選擇器等，詳細可參與《CSS權威手冊》這本書或者http://www.w3.org/TR/CSS2/selector.html。
相對應，理解Jquery中$("#ID")就不是難事了。
Jquery中基本選擇器包括*,class,element,id及這種群組方式selector1,selector2,…
還是看下綜合實例
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
2、層次選擇器
不用說，層次選擇器的思想來自CSS；實際上稍微拓展了
$("div span")//選擇<div>里所有<span>元素
$("div>span")//選擇<div>元素下元素名為<span>的元素
$('prev+next')//選擇緊接在prev元素后的next元素
$('prev~siblings‘)//選擇prev元素之后的所有sibling元素
例：
$(function(){
$("ul li").css("color","#f00");
$("div>span").css("color","#008000");
$("div+span").css("color","#d00");
$("div~span").css("background","#ffc");
});
</script>
</head>
<body>
<div>
<span>文字一</span>
</div>
<span>文字二</span>
<span>文字三</span>
<ul>
<li>選項一</li>
<li>選項二</li>
<li>選擇三</li>
</ul>
從最開始看到Jquery這樣的選擇器就讓我想起了CSS的選擇器，簡直是同出一轍啊，CSS的選擇器語法個人覺得相當?shù)慕?jīng)典，那么Jquery借鑒CSS也就沒有多少疑問了。
還是復習一下Jquery的選擇器吧
其中h1為選擇器，color:red與background:#d00與聲明，兩者結合也即{}內(nèi)稱為聲明塊；color與background稱為屬性；red與#d00稱為值。
其中選擇器類別可分為以下類別：
標簽選擇器：p{CSS rules}
id選擇器：#ID{CSS rules}
類選擇器：.Class{CSS rules}
群組選擇器：h1,h2,h3,h4,h5,h6{CSS rules}
后代選擇器：div p{CSS rules}
通配選擇器：*{CSS rules}
偽類選擇器：a:link,a:visited{CSS rules}
另還有不常使用的多類選擇器、屬性選擇器、部分屬性選擇器、相鄰兄弟選擇器、子選擇器等，詳細可參與《CSS權威手冊》這本書或者http://www.w3.org/TR/CSS2/selector.html。
相對應，理解Jquery中$("#ID")就不是難事了。
Jquery中基本選擇器包括*,class,element,id及這種群組方式selector1,selector2,…
還是看下綜合實例
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
2、層次選擇器
不用說，層次選擇器的思想來自CSS；實際上稍微拓展了
$("div span")//選擇<div>里所有<span>元素
$("div>span")//選擇<div>元素下元素名為<span>的元素
$('prev+next')//選擇緊接在prev元素后的next元素
$('prev~siblings‘)//選擇prev元素之后的所有sibling元素
例：
復制代碼 代碼如下:
$(function(){
$("ul li").css("color","#f00");
$("div>span").css("color","#008000");
$("div+span").css("color","#d00");
$("div~span").css("background","#ffc");
});
</script>
</head>
<body>
<div>
<span>文字一</span>
</div>
<span>文字二</span>
<span>文字三</span>
<ul>
<li>選項一</li>
<li>選項二</li>
<li>選擇三</li>
</ul>
相關文章
這篇文章主要介紹了jquery等待效果示例,需要的朋友可以參考下2014-05-05
ajax是局部刷新。用jQuery來實現(xiàn)，會簡化很多。下面進行詳細的說明，結合一個ajax刪除的案例來進行2014-02-02
jQuery Migrate是應用遷移輔助插件，是用于高級版本兼容低級版本輔助插件。這篇文章主要介紹了jQuery Migrate 插件用法 ,需要的朋友可以參考下2019-05-05
jQuery插件Easyui設置datagrid的pageNumber導致兩次請求問題的解決方法
這篇文章主要介紹了jQuery插件Easyui設置datagrid的pageNumber導致兩次請求問題的解決方法,較為詳細的描述了出現(xiàn)的問題、問題的原因及相應的解決方法,需要的朋友可以參考下2016-08-08
下面小編就為大家?guī)硪黄胘query快速解決IE輸入框不能輸入的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
Jquery全屏相冊插件zoomvisualizer具有調(diào)節(jié)放大與縮小功能
本文給大家分享一款經(jīng)常使用的jquery全屏相冊插件zoomvisualizer具有調(diào)節(jié)放大與縮小的功能，對jquery全屏相冊插件zoomvisualizer感興趣的朋友可以通過本文學習一下2015-11-11
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)HTML元素隱藏和顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
詳談 Jquery Ajax異步處理Json數(shù)據(jù).
啥叫異步,啥叫Ajax.咱不談啥XMLHTTPRequest.通俗講異步就是前臺頁面javascript能調(diào)用后臺方法.這樣就達到了無刷新.2011-09-09
這篇文章主要為大家詳細介紹了JQuery的Pager分頁器實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。2014-07-07