筆記來源：尚矽谷jQuery教程(jquery從入門到精通)

• jQuery 選擇器
  • 1、選擇器
    • 說明
    • 分類
      • 基本選擇器
      • 層次選擇器
      • 過濾選擇器
      • 表單選擇器
  • 2、基本選擇器
    • ID 選擇器
    • 標籤選擇器
    • 屬性選擇器
    • 並集選擇器
    • 交集選擇器
    • 通用選擇器
  • 3、層級選擇器
    • 後代元素選擇器
    • 子元素選擇器
    • 兄弟選擇器
  • 4、過濾選擇器
    • :first
    • :last
    • :not
    • :eq、:gt、:lt
    • :contains
    • :hidden
    • [attribute]
    • [attribute=value]
    • :odd
  • 5、表單選擇器
    • :text、:disabled
    • :submit、:checkbox、:checked

jQuery 選擇器

1、選擇器

說明

選擇器是jQuery學習的重中之重，也就是對jQuery

• 選擇器本身只是一個有特定語法規則的字串，沒有實質用處
• 它的基本語法規則使用的就是 CSS 的選擇器語法，並對基進行了擴充套件
• 只有呼叫$()，並將選擇器作為引數傳入才能起作用
• $(selector)作用：根據選擇器規則在整個文件中查詢所有匹配的標籤的陣列（偽陣列），並封裝成jQuery物件

分類

基本選擇器

• ID 選擇器：#id
• 標籤選擇器：element
• 屬性選擇器：.class
• 通用選擇器：*
• 並集選擇器：selector1,selector2,selectorN
• 交集選擇器：selector1selector2selectorN

層次選擇器

• 後代元素選擇器：ancestor descendant
• 子元素選擇器：parent > child
• 兄弟選擇器：prev + next、prev ~ siblings

過濾選擇器

在原有選擇器匹配的元素中進一步進行過濾的選擇器

選擇器語法中大部分是過濾選擇器

• 基本
• 內容
• 可見性
• 屬性

表單選擇器

• 表單
• 表單物件屬性

下面，我們對其中 常用的選擇器 進行一一學習

2、基本選擇器

HTML 程式碼

<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br>
<ul>
    <li>AAAAA</li>
    <li title="hello">BBBBB(title="hello")</li>
    <li class="box">CCCCC(class="box")</li>
    <li title="hello">DDDDDD(title="hello")</li>
</ul>

ID 選擇器

// 1.選擇id為div1的元素
$('#div1').css('background-color', 'red');

標籤選擇器

// 2.選擇所有的div元素
$('div').css('background-color', 'red');

屬性選擇器

// 3.選擇所有class屬性為box的元素
$('.box').css('background-color', 'red');

並集選擇器

// 4.選擇所有的div和span元素
$('div,span').css('background-color', 'red');

交集選擇器

// 5.選擇所有class屬性為box的div元素
$('div.box').css('background-color', 'red');

通用選擇器

// 6.選擇所有元素
$('*').css('background-color', 'red');

3、層級選擇器

查詢子元素，後代元素，兄弟元素的選擇器

HTML 程式碼

<ul>
	<li>AAAAA</li>
	<li class="box">CCCCC</li>
	<li title="hello"><span>BBBBB</span></li>
	<li title="hello"><span class="box">DDDD</span></li>
	<span>EEEEE</span>
</ul>

後代元素選擇器

// 1.選中ul下所有的span
$('ul span').css('background', 'red');

子元素選擇器

// 2.選中ul下所有的子元素span
$('ul > span').css('background', 'red');

兄弟選擇器

// 3.選中class為box的下一個li
$('.box + li').css('background', 'red');

// 4.選中ul下li的class為box的元素後面的所有兄弟元素
$('ul .box ~ *').css('background', 'red');

4、過濾選擇器

在原有選擇器匹配的元素中進行進一步過濾的選擇器

HTML 程式碼

<div id="div1" class="box">class為box的div1</div>
<div id="div2" class="box">class為box的div2</div>
<div id="div3">div3</div>
<span class="box">class為box的span</span>
<br/>
<ul>
    <li>AAAAA</li>
    <li title="hello">BBBBB</li>
    <li class="box">CCCCC</li>
    <li title="hello">DDDDDD</li>
    <li title="two">BBBBB</li>
    <li style="display: none">我本來是隱藏的</li>
</ul>

:first

// 1.選擇第一個div
$('div:first').css('background', 'red');

:last

// 2.選擇最後一個class為box的元素
$('.box:last').css('background', 'red');

:not

// 3.選擇所有class屬性不為box的div
$('div:not(.box)').css('background', 'red');

:eq、:gt、:lt

多個選擇器是依次執行的，不是同時執行的

// 4.選擇第二個和第三個li元素
// $('li:eq(1),li:eq(2)').css('background', 'red');
// $('li:gt(0):lt(2)').css('background', 'red');
$('li:lt(3):gt(0)').css('background', 'red');

:contains

// 5.選擇內容為BBBBB的li
$('li:contains("BBBBB")').css('background', 'red');

:hidden

// 6.選擇隱藏的li
$('li:hidden').show().css('background', 'red');

[attribute]

// 7.送擇有title屬性的li元素
$('li[title]').css('background', 'red');

[attribute=value]

// 8.選擇所有屬性title為hello的li元素
$('li[title=hello]').css('background', 'red');

:odd

$('#data tbody > tr:odd').css('backgroundColor', '#ccf');

5、表單選擇器

表單和表單物件屬性

HTML程式碼

<form>
    使用者名稱：<input type="text"/><br>
    密碼：<input type="password"/><br>
    愛好：
    <input type="checkbox" checked="checked"/>籃球
    <input type="checkbox" checked="checked"/>足球
    <input type="checkbox" checked="checked"/>羽毛球<br>
    性別：
    <input type="radio" name="sex" value='male'/>男
    <input type="radio" name="sex" value='female'/>女<br>
    郵箱：<input type="text" name="email" disabled="disabled"/><br>
    所在地：I
    <select>
        <option value="1">北京</option>
        <option value="2" selected="selected">天津</option>
        <option value="3">河北</option>
    </select><br>
    <input type="submit" value="提交"/>
</form>

:text、:disabled

// 1.選擇不可用的文字輸入框
$(':text:disabled').css('background-color', 'red');

:submit、:checkbox、:checked

// 3.顯示選擇的城市名稱
$(':submit').click(function () {
    alert($('select>option:selected').html());
});