（第1講）jQuery選擇器

本篇文章鏈接：

http://blog.csdn.net/xkcode/article/details/20047521

30中css選擇器：

http://www.360doc.com/content/14/0104/22/15643_342679505.shtml

css官方文件：

https://www.w3.org/Style/CSS/specs

1.什麼是jQuery選擇器？

選擇器就是jQuery的根基，在jQuery中，對事件處理、遍歷DOM和Ajax操作有依賴於選擇器。

2.jQuery選擇器的優勢

(1).  簡潔的寫法

document.getElementById("id") //使用JavaScript通過ID獲取元素
$("#id") //使用jQuery通過ID獲取元素
document.getElementsByTagName("div");  //使用JavaScript通過標籤名獲取元素
$("div")  //使用jQuery通過標籤名獲取元素

(2). 支持CSS1.0到CSS3.0選擇器

(3). 完善的處理機制

3.jQuery基本選擇器

jQuey基本選擇器和css基本選擇器相同，他繼承了css選擇器的語法和功能，主要由元素標籤名、class、id和多個選擇器組成通過基本選擇器可以實現大多數頁面元素的查找。

(1). 標籤選擇器  $("h2") 選取所有h2元素

(2). 類選擇器 $(".title") 選取所有class爲title的元素

(3). ID選擇器 $("#title") 選取所有id爲title的元素

(4). 並集選擇器 $("div,#title,.title") 選取所有div、id爲title和class爲title的元素

(5). 交集選擇器 $("h1.title") 選取所有class爲title的h1元素

(6). 全局選擇器 $("*") 選取所有元素

4.jQuery層次選擇器

jQueyr層次選擇器和css層次選擇器相同，它們都是根據獲取元素與其父元素、子元素、兄弟元素等關係而構成的選擇器。

(1). 後代選擇器 $("#menu span") 選取#menu下所有的<span>元素

(2). 子選擇器 $("#menu>span") 選取#menu下的子元素<span>元素

(3). 相鄰元素選擇器 $(#menu+span) 選取緊鄰#menu之後的同輩元素

(4). 同輩元素選擇器 $("#menu~span") 選取#menu之後的所有同輩元素

5.jQuery屬性選擇器

屬性選擇器就是通過HTML元素屬性選擇元素的選擇器，它與CSS中的屬性選擇器語法構成完全一致。

(1). $("[href]") 選取含有href屬性的元素

(2). $("[href='#']") 選取href屬性值爲“#”的屬性

(3). $("[href!='#']") 選取href屬性不爲“#”的元素

(4). $("[href^='ch']") 選取href屬性值以“ch”開頭的元素

(5). $("[href$='ch']") 選取href屬性值爲“ch”結尾的元素

(6). $("[href*='ch']") 選取href屬性值含“ch”的元素

(7). $("li[id][title=name]") 選取含有id屬性和title屬性爲“name”的<li>元素

6.基本過濾選擇器

(1). $("li:first") 選取所有<li>元素中的第一個

(2). $("li:last") 選取所有<li>元素中的最後一個

(3). $("li:not(.three)") 選取class不是three的元素

(4). $("li:even") 選取索引是偶數的所有<li>元素

(5). $("li:odd") 選取索引是奇數的所有<li>元素

(6). $("li:eq(1)") 選取索引等於1的<li>元素

(7). $("li:gt(1)") 選取索引大於1的<li>元素

(8). $("li:lt(1)") 選取索引小於1的<li>元素

(9). $(":header") 選取網頁中的所有標題元素 如：<h1>、<h2>、<h3>、<h4>...

(10). $(":focus") 選取當前獲取焦點的元素

注：索引從0開始

7.可見性過濾選擇器

(1). $(":visible") 選取所有可見元素

(2). $(":hidden") 選取所有隱藏元素

8.jQuery選擇器注意事項

(1).選擇器中含有特殊符號

HTML:

<div id="id#a">aa</div>
<div id="id[2]">bb</div>

jQuery錯誤書寫：

$("#id#a");
$("#id[2]");

jQuery正確書寫：

$("#id\\#a");
$("#id\\[2\\]");

(2).選擇器中含有空格

$(".test :hidden")    //選取class爲test的內部隱藏元素
$(".test:hidden")    //選取class爲test並且隱藏的元素