jquery選擇器有哪些

jQuery 選擇器簡介

創(chuàng)新互聯(lián)公司是一家以重慶網(wǎng)站建設(shè)公司、網(wǎng)頁設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、seo優(yōu)化、小程序App開發(fā)等移動(dòng)開發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為成都咖啡廳設(shè)計(jì)等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

jQuery 選擇器允許對(duì) HTML 元素組或單個(gè)元素進(jìn)行操作。

jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。

jQuery 中所有選擇器都以美元符號(hào)開頭：$()。

1 .基本選擇器

$("#test")???????????? ?? 選擇id值為test的元素，id值是唯一的所以返回單個(gè)元素。

$("div")?????????????? ?? 選擇所有的div標(biāo)簽元素，返回div元素?cái)?shù)組

$(".myclass")????????? ?? 選擇使用myclass類的css的所有元素

$("*")???????????????? ?? 選取所有元素。

$("#test,div,.myclass")? ??? 選取多個(gè)元素。

2.層次選擇器

$("div span") ? 選取div里的所有span元素

$("div span")?? ? 選取div元素下元素名是span的子元素

$("#one +div")?? ? 選取id為one的元素的下一個(gè)div同輩元素??? 等同于$("#one").next("div")

$("#one~div")??? ? 選取id為one的元素的元素后面的所有div同輩元素??? 等同于$("#one").nextAll("div")

$("#one").siblings("div") ?? 獲取id為one的元素的所有div同輩元素（不管前后）

$("#one").prev("div") 　獲取id為one的元素的前面緊鄰的同輩div元素

所以 獲取元素范圍大小順序依次為：

$("#one").siblings("div")$("#one~div")$("#one +div")

或是

$("#one").siblings("div")$("#one").nextAll("div")$("#one").next("div")

3.基本過濾選擇器

$("div:first")?????????????? 選取所有div元素中第1個(gè)div元素

$("div:last")?????????????????? 選取所有div元素中最后一個(gè)div元素

$("input:not(.myClass)")??????? 選取class不是myClass的input元素

$("input:even")???????????????? 選取索引是偶數(shù)的input元素(索引從0開始)

$("input:odd")????????????????? 選取索引是基數(shù)的input元素(索引從0開始)

$("input:eq(2)")??????????????? 選取索引等于2的input元素

$("input:gt(4)")??????????????? 選取索引大于4的input元素

$("input:lt(4)")??????????????? 選取索引小于4的input元素

$(":header")??????????????????? 過濾掉所有標(biāo)題元素，例如：h1、h2、h3等

$("div:animated")?????????????? 選取正在執(zhí)行動(dòng)畫的div元素

$(":focus")???????????????????? 選取當(dāng)前獲取焦點(diǎn)的元素

4.內(nèi)容過濾選擇器

$("div:contains('Name')")?????? 選取所有div中含有'Name'文本的元素

$("div:empty")????????????????? 選取不包含子元素（包括文本元素）的div空元素

$("div:has(p)")???????????????? 選取所有含有p元素的div元素

$("div:parent")???????????????? 選取擁有子元素的（包括文本元素）div元素

5.可見性過濾選擇器

$("div:hidden")???????????????? 選取所有不可見的div元素

$("div:visible")??????????????? 選取所有可見的div元素

6.屬性過濾選擇器

$("div[id]")????????????? 選取所有擁有屬性id的元素

$("input[name='test']")???? 選取所有的name屬性等于'test'的input元素

$("input[name!='test']")? 選取所有的name屬性不等于'test'的input元素

$("input[name^='news']")??????? 選取所有的name屬性以'news'開頭的input元素

$("input[name$='news']")??????? 選取所有的name屬性以'news'結(jié)尾的input元素

$("input[name*='news']")??????? 選取所有的name屬性包含'news'的input元素

$("div[title|='en']")?????????? 選取屬性title等于'en'或以'en'為前綴(該字符串后跟一個(gè)連字符'-')的div元素

$("div[title~='en']")?????????? 選取屬性title用空格分隔的值中包含字符en的div元素

$("div[id][title$='test']")???? 選取擁有屬性id,并且屬性title以'test'結(jié)束的div元素

7.子元素過濾選擇器

$("div .one:nth-child(2)")?????? 選取class為'one'的div父元素下的第2個(gè)子元素

$("div span:first-child")??????? 選取每個(gè)div中的第1個(gè)span元素

$("div span:last-child")???????? 選取每個(gè)div中的最后一個(gè)span元素

$("div button:only-child")?????? 在div中選取是唯一子元素的button元素

8.表單對(duì)象屬性過濾選擇器

$("#form1 :enabled")???????????? 選取id為'form1'的表單內(nèi)所有可用元素

$("#form2 :disabled")??????????? 選取id為'form2'的表單內(nèi)所有不可用元素

$("input :checked")????????????? 選取所有被選中的input元素

$("select option:selected")????? 選取所有的select 的子元素中被選中的元素

9.表單選擇器

$(":input")????????????????????? 選取所有input,textarea,select 和 button元素

$(":text")??????????????????? 選取所有的單行文本框

$(":password")?????????????????? 選取所有的密碼框

$(":radio")????????????????????? 選取所有單的選框

$(":checkbox")?????????????????? 選取所有的多選框

$(":submit")???????????????????? 選取所有的提交按鈕

$(":image")????????????????????? 選取所有的圖像按鈕

$(":reset")????????????????????? 選取所有的重置按鈕

$(":button")???????????????????? 選取所有的按鈕

$(":file")?????????????????????? 選取所有的上傳域

$(":hidden")???????????????????? 選取所有不可見元素

jquery如何獲取第一個(gè)或最后一個(gè)子元素？

1、獲取第一個(gè)子元素有如下方法：

（1）:first

舉：$('div.one:first')，獲取所有class="one"的div的第一個(gè)div子元素。這里的限制在于父子元素都是同一種，即父元素如果是span標(biāo)簽，獲取的第一個(gè)子元素也是span標(biāo)簽，如果父元素是table標(biāo)簽，獲取的子元素也是table標(biāo)簽。

（2）:first-child

如：$('div.one:first-child')，獲取所有class="one"的div的第一個(gè)子元素，注意是“所有”，意思是說，如果這個(gè)div有多外，那么獲取的第一個(gè)子元素也是有多個(gè)。

（3）使用eq()方法

如：$('div.one span:eq(1)'),獲取class="one"下的div的第一個(gè)span子元素，同（2）一樣，也是有多個(gè)div也是獲取多個(gè)div的第一個(gè)元素。

可以通過獲取id，或者直接在父層限制一個(gè)eq(1)這樣的形式去獲取惟一一個(gè)子元素

jquery 有幾個(gè)div使用了相同的類名one，要實(shí)現(xiàn)指哪個(gè)層，則給該層添加一個(gè)類two。怎么實(shí)現(xiàn)？

$(function(){

$('div').hover(function(){

$(this).addClass('two');

},function(){

$(this).removeClass('two');

});

});

只哪個(gè)給哪個(gè)加，移除以后去掉

新聞名稱：jquery的one,jQuery用法
文章鏈接：http://chinadenli.net/article9/dsedeih.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)建站、App設(shè)計(jì)、網(wǎng)站導(dǎo)航、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)