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