abstrakt：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/xuexi/static/jQuery/jquery-3.3.1.min.js">&l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/xuexi/static/jQuery/jquery-3.3.1.min.js"></script>
<title>jquery選擇器總結(jié)</title>
<style>
/* div{
width: 100px; height: 100px; background: aqua;
} */
</style>
</head>
<body>
<script>
$(document).ready(function(){
// $('#id_a').css('background','lemonchiffon'); //id選擇器
// $('.class_a').css('fontSize','30px'); //class選擇器
// $('p').css('color','red') ; //元素選擇器
// $('*').css('fontWeight','bold'); //所有元素選擇器
// $('#id_a,.class_a,p').css('fontFamily','楷體'); //多個(gè)選擇器
// $('ul>li').css('color','red'); //子元素選擇器
// $('ul li').css('listStyle','none'); //后代元素選擇器
// $('h2+h3').css('background','red'); //相鄰兄弟選擇器
// $('h3~h2').css('background','#ccc') //一般兄弟選擇器
// $('h2:first').css('text-decoration','underline') //順序選擇器第一個(gè)元素
// $('h2:last').css('text-decoration','underline') //順序選擇器最后一個(gè)元素
// $('.class_b>h2:first').css('text-decoration','underline') //父級順序中第一個(gè)元素
// $('li:gt(1)').css('color','red') //比較選擇器 設(shè)置比1大的元素
// $('li:lt(4)').css('color','pink') //比較選擇器 設(shè)置比4小的元素
// $('li:eq(2)').css('color','blue') //比較選擇器 設(shè)置下標(biāo)為2的元素
// $('.class_b >h2:gt(0)').css('color','blue') //比較選擇器 設(shè)置class_b中比0大的元素
// $('li:odd').css('background','#ccc') //奇偶數(shù)選擇器中的 奇數(shù)順序設(shè)置
// $('li:even').css('background','red') //奇偶數(shù)選擇器中的 偶數(shù)順序設(shè)置
// $('h2:not(#id_b)').css('color','red') //設(shè)置不是此ID或CLASS名以外的元素
// $('.class_b>h2:not(#id_c)').css('color','red') //設(shè)置class屬性中非id_c的同類元素
// $('h2:contains(我)').css('color','red') //匹配包含給定文本（我）的元素
// $('div:has(h4)').css('color','red') // 匹配包含特定選擇器元素的元素
// $('div:empty').css('background','red') // 匹配不含有內(nèi)容的元素（即 不包含子元素或者文本的空元素）
// $(':parent').css('background','#ccc') // 匹配含有子元素或者文本的元素
// $('input[type]').css('background','pink') //匹配包含給定屬性的元素 例如$('input[type]') input框下type屬性
// $('input[type=button]').css('background','pink') //匹配給定屬性是某個(gè)特定值的元素 $('input[type=button]') input框下type=button的元素
// $('input[type!=button]').css('background','pink') //匹配所有不含有指定值的屬性，或者說是屬性不等于特定值的元素 $('input[type!=text]')
// $('input[type ^=t ]').css('background','pink') //匹配給定屬性是以某些值開始的元素 $('input[type ^=t ]') 以t開始的type屬性
// $('input[type $=n ]').css('background','pink') //匹配給定屬性是以某些值結(jié)尾的元素 $('input[type $=n ]') 以n結(jié)尾的type名屬性
// $('input[type *=xt ]').css('background','pink') //匹配給定屬性包含某些值的元素 $('input[type *=xt ]') type包含o的屬性名
// $('input[id][name*=n]').css('background','pink') //復(fù)合選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用。$('input[id][name*=n]') input框包含id的，mame名包含n的。
// $(':enabled').css('background','pink') //所有激活的input元素（可以使用的input元素）
// $('input:disabled').css('background','pink') //所有禁用的input元素（不可以使用的input元素）
// $(':selected').css('color','blue') //所有被選取的元素，針對于select元素
// $('input:checked').parent().css('color','blue') //所有被選中的input元素
})
</script>
<div id="id_a">
<h1 class="class_a">class選擇器</h1>
<p>元素選擇器</p>
<ul>
<li>我1</li>
<li>1</li>
<div>
<li>2</li>
</div>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<h2 id="id_b">1我是h2</h2>
<h3>相鄰兄弟</h3>
<h2>2我是h2</h2>
<h3>相鄰兄弟</h3>
<h3>相鄰兄弟</h3>
<h2>3我是h2</h2>
<h2>4我是h2</h2>
<h2>5我是h2</h2>
<div class="class_b">
<h2>6我是h2</h2>
<h2 id="id_c">7我是h2</h2>
<h2>8我是h2</h2>
<p>李濤</p>
<div></div> <!--不包含內(nèi)容的元素-->
</div>
</div>
<div>
<h4>內(nèi)容選擇</h4>
<h4>內(nèi)容選擇</h4>
<h4>內(nèi)容選擇</h4>
</div>
<div></div>
<form>
輸入框1<input type="text" name="myname" id="for_1"><br>
輸入框2<input type="text" name="my" id="for_2"><br>
輸入框3<input type="text" name="" disabled><br>
<input type="button" value="按鈕"><br>
<select>
<option>摩羯座</option>
<option selected>雙魚座</option>
<option>射手座</option>
<option>天蝎座</option>
</select>
<br>
愛好：
<label><input type="checkbox" name="">看書</label>
<label><input type="checkbox" name="" checked>游泳</label>
<label><input type="checkbox" name="">游戲</label>
</form>
</body>
</html>
選擇器總結(jié)筆記
選擇器
id選擇器 語法：$('#id名') 理解：和CSS語法一樣
class選擇器 語法：$('.class名') 理解：和CSS語法一樣
元素選擇器 語法：$('元素名') 理解：和css語法一樣
所有元素選擇器 語法：$('*') 理解：和css語法一樣
頁面中多個(gè)選擇器 語法：$('#id名 class名 元素名') 理解：中間用空格分開，可以設(shè)置多個(gè)不同的選擇器
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
層級選擇器
子元素選擇器 語法：$('父級元素>子級元素') 理解：匹配所有屬于E元素的子元素F
后代元素選擇器 語法：$('祖先元素 后代元素') 理解：匹配所有屬于E元素后代的F元素，E和F之間用空格分隔
相鄰兄弟選擇器 語法：$('E元素 + F元素') 理解：匹配所有緊隨E元素之后的同級元素F（只能同級元素）
一般兄弟選擇器 語法：$('E元素~F元素) 理解：匹配將E元素后面的所有兄弟元素F
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
順序選擇器
第一個(gè)元素 語法：$(':first') 理解：匹配全文的第一個(gè)元素)$('p:first')
最后一個(gè)元素 語法：$(':last') 理解：匹配全文的最后一個(gè)元素$('p':last')
盒子內(nèi)第一個(gè)元素 語法：$('父級元素 > 子元素:first') 理解：匹配盒子內(nèi)第一個(gè)元素 $('父級元素>p:first')
盒子內(nèi)最后一個(gè)元素 語法：$('父級元素 > 子元素:last') 理解：匹配盒子內(nèi)最后一個(gè)元素 $('父級元素>p:last')
---------------------------------------------------------------------------------------------------------
比較選擇器 (x的順序是從0開始的)
表示大于值x的元素 語法：$(':gt(x)') 理解：如$('p:gt(1)') 匹配頁面中P標(biāo)簽順序除了第1/2個(gè)之后的所有P標(biāo)簽
表示小于值X的元素 語法：$(':lt(x)') 理解：如$('p:lt(2)') 匹配頁面中P標(biāo)簽順序除了第1/2/3的的P標(biāo)簽
表示等于值X的元素 語法：$(':eq(x)') 理解：如$('p:eq(5)') 匹配頁面中P標(biāo)簽顯示順序第6個(gè)P標(biāo)簽
如果選擇某一個(gè)div里面的可以加上父級選擇器 $('div> p:gt(1)')
---------------------------------------------------------------------------------------------------
奇數(shù)偶數(shù)
奇數(shù)順序 語法：$(':odd') 理解：$('li:odd') 匹配li元素順序?yàn)槠鏀?shù)的li元素
偶數(shù)順序 語法：$(':even') 理解：$('li:even')匹配li元素順序?yàn)榕紨?shù)的li元素
----------------------------------------------------------------------------------------------------------
非 排除ID名或class名以外的所有元素
語法：$('h2:not(#id名 或.class名)') 理解：匹配h2中不是此ID或CLASS名以外的的所有元素
$('.class_b>h2:not(#id_c)') 理解：匹配.class_b選擇器下h2元素中不是id名：#id_c以外的所有元素
-----------------------------------------------------------------------------------------------------------
內(nèi)容選擇器
匹配包含給定文本（text）的元素 語法：$(':contains(text)') 理解：如$('h2:contains(love)') 匹配h2本中包含love的h2元素
匹配包含特定選擇器元素的元素 語法：$(':has(selector)') 理解：$('div:has(h4)')匹配div中包含h4元素
匹配不含有內(nèi)容的元素 語法：$(':empty') 理解：$('div:empty')匹配沒有子元素同時(shí)也為空的div（即不包含子元素或者文本的空元素）
匹配含有子元素或者文本的元素 語法：$(':parent') 理解：$(':parent') 匹配有子元素或者文本的元素
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
屬性選擇器（主要適用于input框）
包含給定屬性的元素 語法：$('[屬性名]') 理解：匹配包含給定屬性的元素 如$('input[type]') 匹配input框下含有type屬性的元素
屬性是某個(gè)特定值的元素 語法：$('[attribute=value]') 理解：匹配給定屬性是某個(gè)特定值的元素,如$('input[type=button]') input框下type=button的名的元素
不含有指定值的屬性元素 語法：$('[attribute!=value]')理解：匹配所有不含有指定值的屬性，或者說是屬性不等于特定值的元素 $('input[type!=text]') type不等于text的元素
給定屬性是以某些值開始的元素 語法:$('[attribute ^= value]') 理解:匹配給定屬性是以某些值開始的元素 $('input[type ^=t ]') 以t開始的input type元素
給定屬性是以某些值結(jié)尾的元素 語法:$('[attribute $= value]') 理解:匹配給定屬性是以某些值結(jié)尾的元素 $('input[type $=n ]') 以n結(jié)尾的input type名元素
給定屬性包含某些值的元素 語法: $('[attribute *= value]') 理解:匹配給定屬性包含某些值的元素 如：$('input[type *=o ]') type名包含o的元素
復(fù)合選擇器 語法：$('attrSel[1] attrSel[1] attrSel[1]') 理解：中間用空格分開，需同時(shí)滿足多個(gè)條件時(shí)使用。$('input[id][name*=n]') input框包含id，且name名包含n的元素。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
表單選擇器
所有激活的input元素 語法：$(':enabled') 理解:如$(':enabled')或$('input:enabled') 匹配可以使用的input元素。
所有禁用的input元素 語法：$(':disabled') 理解:$(':disabled') 或$('input:disabled')匹配不可以使用禁止input元素，input框?qū)傩詾閐isabled=“disabled”就是禁止使用的意思。
下拉框被選取的元素 語法：$(':selected') 理解:所有被選取的元素，針對于下拉框元素,下拉框<select><option selected="selected">雙魚座</option></select> selected是選擇的意思
選擇框被撞中的元素 語法：$(':checked') 理解：匹配所有被選中的input元素 如<input type="checkbox" name="" checked> checkbox是選擇框 checked=“checked”是選擇的意思
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-02-03 15:07:33
Zusammenfassung des Lehrers：總結(jié)的相當(dāng)完整 , 推薦將這個(gè)內(nèi)容當(dāng)成原創(chuàng)文章,發(fā)表到php中文 網(wǎng)上, 這樣可以幫到列多的新人