1、基本選擇器：
創(chuàng)新互聯(lián)建站主營(yíng)金秀網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都APP應(yīng)用開(kāi)發(fā),金秀h5小程序制作搭建,金秀網(wǎng)站營(yíng)銷(xiāo)推廣歡迎金秀等地區(qū)企業(yè)咨詢(xún)
#id 、element 、.class 、* 、selector1,selector2,selectorN
2、層次選擇器：
ancestor descendant 、parent child 、prev + next 、prev ~ siblings
3、基本過(guò)濾器選擇器
:first 、:last 、:not 、:even 、:odd 、:eq 、:gt 、:lt 、:header 、
:animated
4、內(nèi)容過(guò)濾器選擇器
:contains 、:empty 、:has 、:parent
5、可見(jiàn)性過(guò)濾器選擇器
:hidden 、:visible
6、屬性過(guò)濾器選擇器
[attribute] 、[attribute=value] 、[attribute!=value] 、[attribute^=value] 、[attribute$=value] 、[attribute*=value] 、[attrSel1][attrSel2][attrSelN]
7、子元素過(guò)濾器選擇器
:nth-child 、:first-child 、:last-child 、:only-child
8、表單選擇器
:input 、:text 、:password 、:radio 、:checkbox 、:submit 、:image 、:reset 、:button
、:file 、:hidden
9、表單過(guò)濾器選擇器
:enabled 、:disabled 、:checked 、:selected
jquery屬性選擇器中屬性指的是元素的屬性，比如input 的input；a color=""的color。
應(yīng)該使用
$('option:selected');
':selected'和$('[name="value"]')有什么區(qū)別呢:
':selected'是jQuery擴(kuò)展的選擇器,并不屬于CSS選擇器規(guī)范,? 僅適用于動(dòng)態(tài)的獲取選中的option. 請(qǐng)注意,你選中Select中的option時(shí), 雖然select的狀態(tài)發(fā)生了變化, 但html標(biāo)記本身并不會(huì)變化.
而$('[name="value"]')的語(yǔ)法是jQuery的屬性選擇器, 遵循CSS選擇器規(guī)范.? 屬性選擇器是嚴(yán)格和html標(biāo)記相匹配的, 舉個(gè)例子: $('input[type="text"]')會(huì)命中input type="text" 但是不會(huì)命中input , 雖然后者默認(rèn)是text.
select
option1option
option?selected2option
option3option
/select
$('option[selected]').text();
//頁(yè)面加載后得到2
//手工選擇1或者3后,?依然得到的是2.?選擇select并不會(huì)修改html標(biāo)記.
$('option[selected="selected"]').text();
//始終得到"",?雖然選項(xiàng)2的selected屬性的確是selected,?但是請(qǐng)注意屬性選擇器是嚴(yán)格和html標(biāo)記對(duì)應(yīng)的.
$('option:selected').text();
//頁(yè)面加載后得到2
//手工選擇1得到1,選擇3得到3.?正式期望的結(jié)果.這就是為什么jQuery會(huì)擴(kuò)展出這個(gè)選擇器.
選擇器是jQuery最基礎(chǔ)的東西，本文中列舉的選擇器基本上囊括了所有的jQuery選擇器，也許各位通過(guò)這篇文章能夠加深對(duì)jQuery選擇器的理解，它們本身用法就非常簡(jiǎn)單，我更希望的是它能夠提升個(gè)人編寫(xiě)jQuery代碼的效率。本文配合截圖、代碼和簡(jiǎn)單的概括對(duì)所有jQuery選擇器進(jìn)行了介紹，也列舉出了一些需要注意和區(qū)分的地方。
一、基本選擇器
1.?id選擇器（指定id元素）
將id="one"的元素背景色設(shè)置為黑色。（id選擇器返單個(gè)元素）
$(document).ready(function?()?{
$('#one').css('background',?'#000');
});
2.?class選擇器（遍歷css類(lèi)元素）
將class="cube"的元素背景色設(shè)為黑色
$(document).ready(function?()?{
$('.cube').css('background',?'#000');
});
3.?element選擇器（遍歷html元素）
將p元素的文字大小設(shè)置為12px
$(document).ready(function?()?{
$('p').css('font-size',?'12px');
});
4.?*?選擇器（遍歷所有元素）
$(document).ready(function?()?{
//?遍歷form下的所有元素，將字體顏色設(shè)置為紅色
$('form?*').css('color',?'#FF0000');
});
5.?并列選擇器
$(document).ready(function?()?{
//?將p元素和div元素的margin設(shè)為0
$('p,?div').css('margin',?'0');
});
二、?層次選擇器
1.?parent??child（直系子元素）
$(document).ready(function?()?{
//?選取div下的第一代span元素，將字體顏色設(shè)為紅色
$('div??span').css('color',?'#FF0000');
});
下面的代碼，只有第一個(gè)span會(huì)變色，第二個(gè)span不屬于div的一代子元素，顏色保持不變。
div
span123/span
p
span456/span
/p
/div
2.?prev?+?next（下一個(gè)兄弟元素，等同于next()方法）
$(document).ready(function?()?{
//?選取class為item的下一個(gè)div兄弟元素
$('.item?+?div').css('color',?'#FF0000');
//?等價(jià)代碼
//$('.item').next('div').css('color',?'#FF0000');
});
下面的代碼，只有123和789會(huì)變色
p?class="item"/p
div123/div
div456/div
span?class="item"/span
div789/div
3.?prev?~?siblings（prev元素的所有兄弟元素，等同于nextAll()方法）
$(document).ready(function?()?{
//?選取class為inside之后的所有div兄弟元素
$('.inside?~?div').css('color',?'#FF0000');
//?等價(jià)代碼
//$('.inside').nextAll('div').css('color',?'#FF0000');
});
下面的代碼，G2和G4會(huì)變色
div?class="inside"G1/div
divG2/div
spanG3/span
divG4/div
三、?過(guò)濾選擇器
1.?基本過(guò)濾選擇器
——1.1?:first和:last（取第一個(gè)元素或最后一個(gè)元素）
$(document).ready(function?()?{
$('span:first').css('color',?'#FF0000');
$('span:last').css('color',?'#FF0000');
});
下面的代碼，G1（first元素）和G3（last元素）會(huì)變色
spanG1/span
spanG2/span
spanG3/span
——1.2?:not（取非元素）
$(document).ready(function?()?{
$('div:not(.wrap)').css('color',?'#FF0000');
});
下面的代碼，G1會(huì)變色
divG1/div
div?class="wrap"G2/div
但是，請(qǐng)注意下面的代碼：
div
G1
div?class="wrap"G2/div
/div
當(dāng)G1所在div和G2所在div是父子關(guān)系時(shí)，G1和G2都會(huì)變色。
——1.3?:even和:odd（取偶數(shù)索引或奇數(shù)索引元素，索引從0開(kāi)始，even表示偶數(shù)，odd表示奇數(shù)）
$(document).ready(function?()?{
$('tr:even').css('background',?'#EEE');?//?偶數(shù)行顏色
$('tr:odd').css('background',?'#DADADA');?//?奇數(shù)行顏色
});
A、C行顏色#EEE（第一行的索引為0），B、D行顏色#DADADA
table?width="200"?cellpadding="0"?cellspacing="0"
tbody
trtdA/td/tr
trtdB/td/tr
trtdC/td/tr
trtdD/td/tr
/tbody
/table
——1.4?:eq(x)?（取指定索引的元素）
$(document).ready(function?()?{
$('tr:eq(2)').css('background',?'#FF0000');
});
更改第三行的背景色，在上面的代碼中C的背景會(huì)變色。
——1.5?:gt(x)和:lt(x)（取大于x索引或小于x索引的元素）
$(document).ready(function?()?{
$('ul?li:gt(2)').css('color',?'#FF0000');
$('ul?li:lt(2)').css('color',?'#0000FF');
});
L4和L5會(huì)是紅色，L1和L2會(huì)是藍(lán)色，L3是默認(rèn)顏色
ul
liL1/li
liL2/li
liL3/li
liL4/li
liL5/li
/ul
——1.6?:header（取H1~H6標(biāo)題元素）
$(document).ready(function?()?{
$(':header').css('background',?'#EFEFEF');
});
下面的代碼，H1~H6的背景色都會(huì)變
h1H1/h1
h2H2/h2
h3H3/h3
h4H4/h4
h5H5/h5
h6H6/h6
2.?內(nèi)容過(guò)濾選擇器
——2.1?:contains(text)（取包含text文本的元素）
$(document).ready(function?()?{
//?dd元素中包含"jQuery"文本的會(huì)變色
$('dd:contains("jQuery")').css('color',?'#FF0000');
});
下面的代碼，第一個(gè)dd會(huì)變色
dl
dt技術(shù)/dt
ddjQuery,?.NET,?CLR/dd
dtSEO/dt
dd關(guān)鍵字排名/dd
dt其他/dt
dd/dd
/dl
——2.2?:empty（取不包含子元素或文本為空的元素）
$(document).ready(function?()?{
$('dd:empty').html('沒(méi)有內(nèi)容');
});
上面第三個(gè)dd會(huì)顯示"沒(méi)有內(nèi)容"文本
——2.3?:has(selector)（取選擇器匹配的元素）
$(document).ready(function?()?{
//?為包含span元素的div添加邊框
$('div:has(span)').css('border',?'1px?solid?#000');
});
即使span不是div的直系子元素，也會(huì)生效
div
h2
A
spanB/span
/h2
/div
——2.4?:parent（取包含子元素或文本的元素）
$(document).ready(function?()?{
$('ol?li:parent').css('border',?'1px?solid?#000');
});
下面的代碼，A和D所在的li會(huì)有邊框
ol
li/li
liA/li
li/li
liD/li
/ol
3.?可見(jiàn)性過(guò)濾選擇器
——3.1?:hidden（取不可見(jiàn)的元素）
jQuery至1.3.2之后的:hidden選擇器僅匹配display:none或input?type="hidden"?/的元素，而不匹配visibility:?hidden或opacity:0的元素。這也意味著hidden只匹配那些“隱藏的”并且不占空間的元素，像visibility:hidden或opactity:0的元素占據(jù)了空間，會(huì)被排除在外。
參照：
下面的代碼，先彈出"hello"對(duì)話(huà)框，然后hid-1會(huì)顯示，hid-2仍然是不可見(jiàn)的。
html?xmlns=""?
head?runat="server"
title/title
style?type="text/css"
div
{
margin:?10px;
width:?200px;
height:?40px;
border:?1px?solid?#FF0000;
display:block;
}
.hid-1
{
display:?none;
}
.hid-2
{
visibility:?hidden;
}
/style
script?type="text/javascript"?src="js/jquery.min.js"/script
script?type="text/javascript"
$(document).ready(function()?{
$('div:hidden').show(500);
alert($('input:hidden').val());
});
/script
/head
body
div?class="hid-1"display:?none/div
div?class="hid-2"visibility:?hidden/div
input?type="hidden"?value="hello"/
/body
/html
——3.2?:visible（取可見(jiàn)的元素）
下面的代碼，最后一個(gè)div會(huì)有背景色
script?type="text/javascript"
$(document).ready(function()?{
$('div:visible').css('background',?'#EEADBB');
});
/script
div?class="hid-1"display:?none/div
div?class="hid-2"visibility:?hidden/div
input?type="hidden"?value="hello"/
div
jQuery選擇器大全
/div
4.?屬性過(guò)濾選擇器
——4.1?[attribute]（取擁有attribute屬性的元素）
下面的代碼，最后一個(gè)a標(biāo)簽沒(méi)有title屬性，所以它仍然會(huì)帶下劃線
script?type="text/javascript"
$(document).ready(function()?{
$('a[title]').css('text-decoration',?'none');
});
/script???????
ul
lia?href="#"?title="DOM對(duì)象和jQuery對(duì)象"?class="item"DOM對(duì)象和jQuery對(duì)象/a/li
lia?href="#"?title="jQuery選擇器大全"?class="item-selected"jQuery選擇器大全/a/li
lia?href="#"?title="jQuery事件大全"?class="item"jQuery事件大全/a/li
lia?href="#"?title="基于jQuery的插件開(kāi)發(fā)"?class="item"基于jQuery的插件開(kāi)發(fā)/a/li
lia?href="#"?title="Wordpress??jQuery"?class="item"Wordpress??jQuery/a/li
lia?href="#"?class="item"其他/a/li
/ul
——4.2?[attribute?=?value]和[attribute?!=?value]（取attribute屬性值等于value或不等于value的元素）
分別為class="item"和class!=item的a標(biāo)簽指定文字顏色
!DOCTYPE?html
html
head
titleDemo/title
/head
body
div?name?=?"userName"?id?=?"div1"/div
div?name?=?"please"?id?=?"div2"/div
div?name?=?"bike"?id?=?"div3"/div
div?name?=?"thanks"?id?=?"div4"/div
/body
script
src=""
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"/script
script?type="text/javascript"
var?$name1?=?$("[name='userName']");//?獲取name屬性的值等于userName的頁(yè)面元素
var?$name2?=?$("[name^='p']");//?獲取name屬性的值以p為首字母的頁(yè)面元素
var?$name3?=?$("[name$='e']");//?獲取name屬性的值以e結(jié)尾的頁(yè)面元素
var?$name4?=?$("[name*='a']");//?獲取name屬性的值包含a的頁(yè)面元素
console.log($name1,$name2,$name3,$name4)
/script
/html
這些屬性選擇器在jquery官方文檔上都有示例和詳細(xì)的描述
網(wǎng)頁(yè)鏈接
重慶分公司
重慶分公司
