當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery选择器篇

發布時間：2023/12/18 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery选择器篇小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

var j = jQuery.noConflict();

讓出對變量$的控制權，并將jquery付給別名j

jquery.noConflict(true);讓出對變量$和jquery的控制權

jQuery(selector, context)??

selector 表示選擇器

$(div <div <input)

$(div).find(div).find(input).eq(0)

context 表示jquery對象

<div id="n1"><div id="n2"><ul id="n3"><li id="n4">item1</li><li id="n5">item2</li><li id="n6">item3</li></ul></div> ? </div> var $li = $("ul li"); // 返回當前文檔的document對象 document.writeln( $li.context ); // [object HTMLDocument] document.writeln( $li.context === document ); // truevar n1 = document.getElementById("n1"); var $n3 = $( "#n3", n1 ); // 返回n1 document.writeln( $n3.context ); // [object HTMLDivElement] document.writeln( $n3.context === n1 ); // truevar $n2 = $("#n2"); var $n4 = $( "#n4", $n2 ); // 返回$n2的context屬性：document對象 document.writeln( $n4.context ); // [object HTMLDocument] document.writeln( $n4.context === document ); // truevar $n3 = $("#n3", n1); var $n5 = $( "#n5", $n3 ); // 返回$n3的context屬性：n1 document.writeln( $n5.context ); // [object HTMLDivElement] document.writeln( $n5.context === n1 ); // true

jQuery.length 屬性詳解

length表示jquery對象封裝的dom元素個數,如果該對象是一個空的jQuery對象，沒有封裝任何元素，則返回0。

jQuery.size() 函數詳解

size()函數用于返回當前jQuery對象封裝的元素個數。

jQuery.index() 函數詳解

index()函數用于獲取當前jQuery對象中指定DOM元素的索引值。

Jquery("#id") 通過id訪問元素

Jquery("Div")通過TagName訪問元素

Jquery(".className") 通過className訪問元素

// 選擇了id分別為n1、n2、n4的三個元素 $("#n1,#n2,span.test"); // 選擇了id分別為n3、n2、n4的三個元素 $("p.detail,.test");

jQuery 選擇器(parent > child)詳解

// 這里的parent表示具體的父輩選擇器 // 這里的child表示具體的子輩選擇器 jQuery( "parent > child" )

<div id="n1"><p id="n2" class="test"><span id="n3" class="a">Hello</span></p><p id="n4" class="detail"><span id="n5" class="b codeplayer">World<span id="n6" class="c">365mini.com</span></span></p> </div>

// 選擇了id分別為n3、n5的兩個元素 // n6不是p標簽的子元素，而是孫子輩的元素，因此無法匹配 $("p > span");

我們可以配合使用所有元素選擇器(*)來實現只查找孫子輩元素的選擇器。例如：我們想要查找id為n1的元素的孫子輩的span標簽，對應的jQuery代碼如下：

// 選擇了id分別為n3、n5的兩個元素 $("#n1 > * > span");

jQuery 選擇器(prev + next)詳解

選擇器next的查找范圍必須是與"prev元素"相鄰的下一個元素，并且必須是"prev元素"的同輩元素。

<div id="n1"><p id="n2" class="test"><span id="n3" class="a">Hello</span><span id="n4">Hello</span></p><p id="n5" class="detail"><span id="n6" class="b codeplayer">World<span id="n7" class="a">http://365mini.com</span><span id="n8"></span><span id="n9"></span></span></p> </div>

現在，我們想要查找與p標簽相鄰的下一個同輩p標簽，則可以編寫如下jQuery代碼：

// 選擇了id為n5的一個元素 $("p + p");

接著，我們查找與span標簽相鄰的下一個同輩span標簽，則可以編寫如下jQuery代碼：

// 選擇了id分別為n4、n8、n9的三個元素 // n4是n3的next，n8是n7的next，n9是n8的next $("span + span");

查找與包含類名a的span標簽相鄰的下一個同輩span標簽，對應的jQuery代碼如下：

// 選擇了id分別為n4、n8的兩個元素 // n8沒有包含類名a，因此無法匹配其next——n9 $("span.a + span");

jQuery 選擇器(prev ~ siblings)詳解

jQuery的prev ~ siblings選擇器用于匹配prev元素之后的所有同輩的siblings元素，將其封裝為jQuery對象并返回。

// 選擇了id為n5的一個元素 $("p ~ p");

// 選擇了id分別為n4、n8、n9的三個元素 // n9屬于n7的~siblings，也是n8的~siblings，同一個元素只計入一次 $("span ~ span");

jQuery 選擇器(:first)詳解

jQuery的:first選擇器用于獲取匹配到的第一個元素，將其封裝為jQuery對象并返回。:first選擇器等價于 :eq(0)選擇器。

// 選擇了id為n1的一個元素 $("div:first"); // 選擇了id為n4的一個元素 // 雖然HTML中有兩個ul標簽，但:first不是分別取每個ul中的第一個li，而是從上到下只要找到一個符合條件的元素就立即返回 $("ul li:first");

jQuery 選擇器(:last)詳解

jQuery的:last選擇器用于獲取匹配到的最后一個元素，將其封裝為jQuery對象并返回。

與該選擇器相對的是:first選擇器，用于獲取匹配到的第一個元素。

// 選擇了id為n7的一個元素 $("div:last"); Jquery選擇器（：even）jQuery的:even選擇器用于匹配所有索引值為偶數的元素，將其封裝為jQuery對象并返回。 <div id="n1"><div id="n2"><ul id="n3"><li id="n4">item1</li><li id="n5">item2</li><li id="n6">item3</li></ul></div><div id="n7"><table id="n8"><tr id="n9"><td>cell1</td></tr><tr id="n10"><td>cell2</td></tr><tr id="n11"><td>cell3</td></tr></table></div> </div>// 選擇了id分別為n9、n11的兩個元素 $("tr:even");

jquery(:odd)查找索引值為基數的元素

jQuery 選擇器(:eq(index))詳解

// 這里的selector表示具體的選擇器 // 這里的index表示指定的索引值 jQuery( "selector:eq(index)" )<div id="n1"><div id="n2"><ul id="n3"><li id="n4">item1</li><li id="n5">item2</li><li id="n6">item3</li></ul></div><div id="n7"><ul id="n8"><li id="n9">item1</li><li id="n10">item2</li></ul></div> </div> 現在，我們想要查找第2個div標簽，則可以編寫如下jQuery代碼：
// 選擇了id為n2的一個元素 $("div:eq(1)");

接著，獲取匹配ul li選擇器的元素中的第4個元素，則可以編寫如下jQuery代碼：

// 選擇了id為n9的一個元素 $("ul li:eq(3)");:gt(index)大于索引的元素:lt(index)小于索引的元素

jQuery 選擇器(:first-child)詳解

jQuery的:first-child選擇器用于匹配作為父元素的第一個子元素的元素，將其封裝為jQuery對象并返回。:first-child選擇器等價于:nth-child(0)選擇器。
<div id="n1">CodePlayer<div id="n2"><ul id="n3"><li id="n4">item1</li><li id="n5" class="c">item2</li><li id="n6" class="c">item3</li></ul></div><div id="n7"><ul id="n8"><li id="n9">item1</li><li id="n10">item2</li></ul></div> </div>// 選擇了id分別為n4、n9的兩個元素 $("ul li:first-child");

jQuery 選擇器(:only-child)詳解

jQuery的:only-child選擇器用于匹配作為父元素的唯一子元素的元素，將其封裝為jQuery對象并返回。

<div id="n1"><div id="n2">CodePlayer--專注于編程開發技術分享<ul id="n3"><li id="n4">item1</li><li id="n5">item2</li><li id="n6">item3</li></ul></div><div id="n7"><ul id="n8"><li id="n9">item1</li></ul></div> </div>

現在，我們想要查找不同父輩元素的最后一個div標簽，則可以編寫如下jQuery代碼：

// 選擇了id為n9的一個元素 $("ul li:only-child");

查找作為父元素的"獨生子"的ul標簽，則可以編寫如下jQuery代碼：

// 選擇了id分別為n3、n8的兩個元素 // n3的父元素n2雖然有自己的文本內容，但是只有n3這一個子元素，因此n3也算是唯一子元素 $("ul:only-child");

jQuery 選擇器(:nth-child(n))詳解

jQuery的:nth-child(n)選擇器用于匹配作為父元素下的第n個(或特定順序的)子元素的元素，將其封裝為jQuery對象并返回。

:nth-child(odd)表示匹配作為父元素的奇數(第1、3、5、7……個)子元素的元素；
:nth-child(even)表示匹配作為父元素的偶數(第2、4、6、8……個)子元素的元素；
:nth-child(3n)表示匹配作為父元素的第3n個子元素的元素(n表示包括0在內的自然數，下同)；
:nth-child(3n+1)表示匹配作為父元素的第3n+1個子元素的元素；
:nth-child(3n+2)表示匹配作為父元素的第3n+2個子元素的元素；

現在，我們想要為每個ul標簽內查找它的第2個li標簽，則可以編寫如下jQuery代碼：

// 選擇了id分別為n5、n10的兩個元素 $("ul li:nth-child(2)");

接著，為每個ul標簽查找自然順序為奇數的li標簽，則可以編寫如下jQuery代碼：

// 選擇了id分別為n4、n6、n9的3個元素 $("ul li:nth-child(odd)");

jQuery 選擇器(:nth-last-child(n))詳解

jQuery的:nth-last-child(n)選擇器用于匹配作為父元素下的倒數第n個子元素或符合特定順序規則的元素，將其封裝為jQuery對象并返回。

jQuery 選擇器(:first-of-type)詳解

jQuery的:first-of-type選擇器用于匹配作為父元素的第一個該類型的子元素的元素，將其封裝為jQuery對象并返回。:first-of-type選擇器等價于:nth-of-type(1)選擇器。
<div id="n1"><div id="n2" class="abc"><label id="n3">label1</label><span id="n4">span1</span><span id="n5" class="abc">span2</span><span id="n6">span3</span></div><div id="n7"><span id="n8" class="abc">span1</span><span id="n9">span2</span></div> </div>

現在，我們查找作為父元素的span類型子元素中的"長子"的span標簽，則可以編寫如下jQuery代碼：

// 選擇了id分別為n4、n8的兩個元素 // n4雖然不是n2的第一個子元素，但它是n2所有span類型子元素中的第一個，因此可以匹配 $("span:first-of-type");

接著，查找所有包含類名abc的元素，而且它們必須是父元素的該類型子元素中的"長子"，則可以編寫如下jQuery代碼：

// 選擇了id分別為n2、n8的兩個元素 // .abc可以匹配id分別為n2、n5、n8的3個元素，n2是n1所有div類型子元素中的第一個，n8是n7所有span類型子元素中的第一個，但n5不是n2所有span類型子元素中的第一個，因此不能匹配n5。 $(".abc:first-of-type");

jQuery 選擇器(:has(selector))詳解

jQuery的:has(selector)選擇器用于匹配所有包含selector元素的元素，將其封裝為jQuery對象并返回。
<div id="n1"><p id="n2" class="test"><span id="n3" class="a">Hello</span><span id="n4">Hello</span></p><p id="n5" class="detail"><span id="n6" class="b codeplayer">World<span id="n7" class="a">http://365mini.com</span><span id="n8"></span><span id="n9"></span></span></p> </div>

現在，我們想要在id為n1的div標簽內查找所有包含span標簽的元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n2、n5、n6的3個元素 $("#n1 :has(span)");

接著，我們在id為n1的div標簽內查找包含類名為b的span標簽的元素，則可以編寫如下jQuery代碼：

// 選擇了id為n5的一個元素 $("#n1 :has(span.b)");

jQuery 選擇器(:not(selector))詳解

jQuery的:not(selector)選擇器用于排除所有與選擇器selector匹配的元素，并將剩余的其他DOM元素封裝為jQuery對象并返回。
<div id="n1"><div id="n2"><ul id="n3"><li id="n4">item1</li><li id="n5">item2</li><li id="n6">item3</li></ul></div><div id="n7"><ul id="n8"><li id="n9">item1</li><li id="n10">item2</li></ul></div> </div>

現在，我們想要查找除了id為n2的元素以外的所有元素，則可以編寫如下jQuery代碼：

// 選擇除了id為n2的元素以外的所有元素，包括html、head、style、link、title、meta、script等 $(":not(#n2)"); // 這相當于 $("*:not(#n2)");

接著，查找所有ul標簽中除了id為n5的li標簽以外的所有li標簽，則可以編寫如下jQuery代碼：

// 選擇了id分別為n4、n6、n9、n10的4個元素 $("ul li:not(#n5)");

jQuery 選擇器(:contains(text))詳解

jQuery的:contains(text)選擇器用于匹配包含指定文本的元素，將其封裝為jQuery對象并返回。

<div id="n1"><div id="n2"><span id="n3">張三</span><span id="n4">CodePlayer</span></div><div id="n5"><span id="n6">CodePlayer</span></div><div id="n7">CodePlayer</div> </div>

現在，我們想要在id為n1的div標簽內查找所有包含字符串"CodePlayer"的元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n2、n4、n5、n6、n7的5個元素 // n5的子元素n6中包含"CodePlayer"，因此n5也會被計入在內 $("#n1 :contains(CodePlayer)");

接著，在id為n1的div標簽內查找所有包含字符串"張三"的元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n2、n3的兩個元素 // n2的子元素n3包含"張三"，因此n2也會被計入在內 $("#n1 :contains(張三)");

jQuery 選擇器(:empty)詳解

空的元素，是指該元素既不包含子元素，也不包含文本內容(哪怕是空格或換行符，也算有文本內容)。

以下面這段HTML代碼為例：

現在，我們想要查找id為n1的div標簽內所有有內容的元素，則可以編寫如下jQuery代碼：

// 選擇了id為n6的一個元素 $("#n1 :empty");

查找所有有內容的span標簽，則可以編寫如下jQuery代碼：

// 選擇了id為n6的一個元素 $("span:empty");

jQuery 選擇器(:visible)詳解

jQuery的:visible選擇器用于匹配所有可見的元素，將其封裝為jQuery對象并返回。

以下面這段HTML代碼為例：

<div id="n1"><p id="n2" style="display: none;"></p><p id="n3"><span id="n4">CodePlayer</span><input id="n5" type="hidden" value="專注于編程開發技術分享"><span id="n6" style="visibility: hidden;">http://www.365mini.com</span><span id="n7" style="opacity: 0;">jQuery手冊</span></p> </div>

現在，我們想要在id為n1的div標簽內查找所有可見的元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n3、n4、n6、n7的4個元素 $("#n1 :visible");

在id為n1的div標簽內查找所有可見的span標簽，則可以編寫如下jQuery代碼：

// 選擇了id分別為n4、n6、n7的3個元素 $("#n1 span:visible"); jquery 選擇器（：hidden)詳解jQuery的:hidden選擇器用于匹配所有不可見的元素，將其封裝為jQuery對象并返回。

jQuery 選擇器(:header)詳解

jQuery的:header選擇器用于匹配所有的標題元素(h1 ~ h6)，將其封裝為jQuery對象并返回。 :header選擇器會匹配h1、h2、h3之類的所有標題元素，如果你只想匹配某種標題元素，可以直接使用標簽選擇器，例如：$("h1")。

以下面這段HTML代碼為例：

現在，我們想要查找所有的標題元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n2、n4、n6、n7的4個元素 $(":header");

接著，查找id為n5的div標簽內的所有標題元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n6、n7的兩個元素 $("#n5 :header");

jQuery 選擇器(:focus)詳解

jQuery的:focus選擇器用于匹配當前獲得焦點的元素，將其封裝為jQuery對象并返回。

以下面這段HTML代碼為例：

現在，我們為當前獲得焦點的<input>元素顯示提示信息，則可以編寫如下jQuery代碼：

// 當<input>元素獲得焦點時，在#message中顯示"請輸入[姓名]"、"請輸入[年齡]"等相應的提示信息。 $("input").on("focus blur", function(){var me = $(this);var msg = me.is(":focus") ? ("請輸入[" + me.attr("label") + "]") : "";$("#message").html(msg); });

jQuery 選擇器([attribute])詳解

jQuery的[attribute]選擇器用于匹配所有具有指定屬性的元素，將其封裝為jQuery對象并返回

以下面這段HTML代碼為例：

現在，我們想要查找所有具有class屬性的元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n5、n6、n8的3個元素 $("[class]");

接著，查找所有同時具有class屬性和tabindex屬性的元素，則可以編寫如下jQuery代碼：

// 選擇了id為n5的一個元素 $("[class][tabindex]");

jQuery 選擇器([attribute=value])詳解

jQuery的[attribute=value]選擇器用于匹配指定屬性為指定值的所有元素，將其封裝為jQuery對象并返回。

以下面這段HTML代碼為例：

現在，我們想要查找所有name屬性為page_id[]的元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n3、n4、n5的3個元素 $("[name='id[]']");

接著，查找所有dataId屬性為5的元素，則可以編寫如下jQuery代碼：

// 選擇了id為n8的一個元素 $("[dataId=5]");

jQuery 選擇器([attribute!=value])詳解

jQuery的[attribute!=value]選擇器用于匹配指定屬性不等于指定值的所有元素，將其封裝為jQuery對象并返回。
<div id="n1"><div id="n2"><input id="n3" name="id[]" type="checkbox" value="1" ><input id="n4" name="id[]" type="checkbox" value="2" ><input id="n5" name="id[]" type="checkbox" value="3" ></div><div id="n6"><ul id="n7"><li id="n8" dataId="x[5]">item1</li><li id="n9">item2</li></ul></div> </div>

現在，我們想要查找所有id屬性不等于n3的元素，則可以編寫如下jQuery代碼：

// 選擇了id不等于n3的所有元素(包括html、body、style、script、title等標簽) $("[id!=n3]");

接著，在id為n6的后代元素中查找所有dataId屬性不等于x[5]的元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n7、n9的兩個元素 $("#n6 [dataId!='x[5]']");

jQuery 選擇器([attribute^=value])詳解

jQuery的[attribute^=value]選擇器用于匹配指定屬性以指定值開始的所有元素，將其封裝為jQuery對象并返回。

jQuery 選擇器([attribute$=value])詳解

jQuery的[attribute$=value]選擇器用于匹配指定屬性以指定值結尾的所有元素，將其封裝為jQuery對象并返回。

以下面這段HTML代碼為例：

現在，我們想要查找所有id屬性以5結尾的元素，則可以編寫如下jQuery代碼：

// 選擇了id為n5的一個元素 $("[id$=5]");

接著，查找dataId屬性以_1]結尾的所有元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n8、n10的兩個元素 $("[dataId$='_1]']");

jQuery 選擇器([attribute|=value])詳解

jQuery的[attribute|=value]選擇器用于匹配指定屬性等于指定值或以指定值為前綴的所有元素，將其封裝為jQuery對象并返回。這里的前綴，表示以指定值開頭，與后面的部分以連線("-")進行連接。

以下面這段HTML代碼為例：

現在，我們想要查找所有name屬性以Code為前綴的元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n4、n6的兩個元素 $("[name|=Code]");

jQuery 選擇器([attribute~=value])詳解

jQuery的[attribute~=value]選擇器用于匹配指定屬性的值中包含指定單詞的所有元素，將其封裝為jQuery對象并返回。

返回封裝了所有指定屬性包含指定值作為"單詞"的元素的jQuery對象。

這里的"單詞"可以理解為常規英文書寫中的單詞表現形式，與其他"單詞"以空格進行分隔。

如果找不到任何相應的匹配，則返回一個空的jQuery對象。

現在，我們想要查找所有name屬性中包含單詞Anna的元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n3、n5、n6、n7的4個元素 $("[name~=Anna]");

jQuery 選擇器([attribute*=value])詳解

jQuery的[attribute*=value]選擇器用于匹配指定屬性包含指定值的所有元素，將其封裝為jQuery對象并返回。

以下面這段HTML代碼為例：

現在，我們想要查找所有name屬性包含id的元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n3、n4、n5的3個元素 $("[name*=id]");

接著，查找dataId屬性包含[5的所有元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n8、n9、n10的3個元素 $("[dataId*='[5']");

jQuery 選擇器(:input)詳解

jQuery的:input選擇器用于匹配所有的表單控件元素，將其封裝為jQuery對象并返回。

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="password" /><input id="n9" type="radio" /><input id="n10" type="reset" /> <input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><textarea id="n15"></textarea><button id="n16">Button</button></form> </div>

現在，查找所有的表單信息元素，則可以編寫如下jQuery代碼：

// 選擇了id分別為n3 ~ n16(除了n14)的13個元素 $(":input");

jQuery 選擇器(:text)詳解

jQuery的:text選擇器用于匹配所有的單行文本框元素，將其封裝為jQuery對象并返回。

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="password" /><input id="n9" type="radio" /><input id="n10" type="reset" /> ?<input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><textarea id="n15"></textarea><button id="n16">Button</button></form> </div>

現在，我們查找所有的單行文本框元素，即可編寫如下jQuery代碼：

// 選擇了id為n12的一個元素 $(":text");

jQuery 選擇器(:password)詳解

jQuery的:password選擇器用于匹配所有的密碼框元素，將其封裝為jQuery對象并返回。

密碼框就是type為password的input標簽：<input type="password">。

jQuery 選擇器(:radio)詳解

jQuery的:radio選擇器用于匹配所有的單選按鈕元素，將其封裝為jQuery對象并返回。

單選按鈕就是type為radio的input標簽：<input type="radio">。

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="password" /><input id="n9" type="radio" /><input id="n10" type="reset" /> ?<input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><radioarea id="n15"></radioarea><button id="n16">Button</button></form> </div>

現在，我們查找所有的單選按鈕元素，即可編寫如下jQuery代碼：

// 選擇了id為n9的一個元素 $(":radio");

jQuery 選擇器(:checkbox)詳解

jQuery的:checkbox選擇器用于匹配所有的復選框元素，將其封裝為jQuery對象并返回。

復選框就是type為checkbox的input標簽：<input type="checkbox">。

以下面這段HTML代碼為例：

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="radio" /><input id="n9" type="radio" /><input id="n10" type="reset" /> ?<input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><radioarea id="n15"></radioarea><button id="n16">Button</button></form> </div>

現在，我們查找所有的單行文本框元素，即可編寫如下jQuery代碼：

// 選擇了id為n4的一個元素 $(":checkbox");

jQuery 選擇器(:button)詳解

jQuery的:button選擇器用于匹配所有的按鈕元素，將其封裝為jQuery對象并返回。

這里的按鈕指的是所有的button標簽(不區分type)以及type為button的input標簽：

以下面這段HTML代碼為例：

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="password" /><input id="n9" type="radio" /><input id="n10" type="reset" /><input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><textarea id="n15"></textarea><button id="n16" type="button">Button</button><button id="n17" type="submit">Submit</button><button id="n18" type="reset">Reset</button></form> </div>

現在，我們查找所有的普通按鈕(type="button"的input標簽)和button標簽，即可編寫如下jQuery代碼：

// 選擇了id分別為n3、n16、n17、n18的4個元素 $(":button");

如果你只想匹配type為button的input標簽，你可以編寫如下jQuery代碼：

// 選擇了id為n3的一個元素 $("input:button");

jQuery 選擇器(:submit)詳解

jQuery的:submit選擇器用于匹配所有的提交按鈕元素，將其封裝為jQuery對象并返回。

提交按鈕框就是type為submit的input或button標簽：<input type="submit">或<button type="submit"></button>。

以下面這段HTML代碼為例：

<div id="n1"><form id="n2"><input id="n3" type="button" value="Input Button"/><input id="n4" type="checkbox" /><input id="n5" type="file" /><input id="n6" type="hidden" /><input id="n7" type="image" /><input id="n8" type="password" /><input id="n9" type="radio" /><input id="n10" type="reset" /><input id="n11" type="submit" /><input id="n12" type="text" /><select id="n13"><option id="n14">Option</option></select><textarea id="n15"></textarea><button id="n16" type="submit">Button</button></form> </div>

現在，我們查找所有的提交按鈕，即可編寫如下jQuery代碼：

// 選擇了id分別為n11、n16的兩個元素 $(":submit");

jQuery 選擇器(:reset)詳解

jQuery的:reset選擇器用于匹配所有的重置按鈕元素，將其封裝為jQuery對象并返回。

重置就是type為reset的input或button標簽：<input type="reset">或<button type="reset"></button>。

jQuery 選擇器(:image)詳解?

jQuery的:image選擇器用于匹配所有的圖像控件，將其封裝為jQuery對象并返回。

圖像域就是type為image的input標簽：<input type="image">。

jQuery 選擇器(:enabled)詳解

jQuery的:enabled選擇器用于匹配所有可用的表單控件元素，將其封裝為jQuery對象并返回。

可用的表單控件是指沒有disabled屬性的<input>、<button>、<select>、<textarea>、<option>等元素。

<div id="n1"><form id="n2"><label id="n3">CodePlayer</label><input id="n4" type="text" disabled="disabled" ><input id="n5" type="checkbox" /><input id="n6" type="password" /><button id="n7" type="button" disabled="disabled">Button</button><select id="n8"><option id="n9">item1</option><option id="n10" disabled="disabled">item2</option></select></form> </div>

現在，我們查找所有的可用元素，即可編寫如下jQuery代碼：

// 選擇了id分別為n5、n6、n8、n9的4個元素 $(":enabled");

jQuery 選擇器(:checked)詳解

jQuery的:checked選擇器用于匹配所有選中的表單域元素，將其封裝為jQuery對象并返回。

選中的表單域是指具有checked屬性的radio和checkbox表單域，以及具有selected屬性的option標簽。

<div id="n1"><form id="n2"><label id="n3">CodePlayer</label><input id="n4" type="text" disabled="disabled" ><input id="n5" type="checkbox" checked="checked" /><input id="n6" type="checkbox" /><input id="n7" type="radio" checked="checked" /> ? ? <input id="n8" type="radio" /> ? ? ? <button id="n9" type="button" disabled="disabled">Button</button><select id="n10"><option id="n11" selected="selected">item1</option><option id="n12">item2</option></select></form> </div>

現在，我們查找所有的提交按鈕，即可編寫如下jQuery代碼：

// 選擇了id分別為n5、n7、n11的3個元素 // :checked可以匹配"selected"的option $(":checked");

如果你只希望匹配選中的radio和checkbox，請使用input:checked。

// 選擇了id分別為n5、n7的兩個元素 $("input:checked");

如果你只希望匹配選中的checkbox，請使用:checkbox:checked。radio也是同理。

// 選擇了id為n5的一個元素 $(":checkbox:checked");

jQuery 選擇器(:selected)詳解

jQuery的:selected選擇器用于匹配所有選中的option元素，將其封裝為jQuery對象并返回。

選中的option元素指的是具有selected屬性的option標簽。

現在，我們查找所有選中的option元素，即可編寫如下jQuery代碼：

// 選擇了id為n11的一個元素 $(":selected");

總結

以上是生活随笔為你收集整理的jquery选择器篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。