var j = jquery.noConflict();
讓出對變量$的控制權,並將jquery付給別名j
jquery.noConflict(true);讓出對變量$和jquery的控制權
selector 表示選擇器
<div ><div><input/></div></div>
$(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 ); // true var n1 = document.getElementById("n1"); var $n3 = $( "#n3", n1 ); // 返回n1 document.writeln( $n3.context ); // [object HTMLDivElement] document.writeln( $n3.context === n1 ); // true var $n2 = $("#n2"); var $n4 = $( "#n4", $n2 ); // 返回$n2的context屬性:document對象 document.writeln( $n4.context ); // [object HTMLDocument] document.writeln( $n4.context === document ); // true var $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訪問元素
<div id="n1">
<p id="n2" class="test"></p>
<p id="n3" class="detail">
<span id="n4" class="test codeplayer"></span>
</p>
</div>
// 選擇了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對象並返回。<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爲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)大於索引的元素
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
個子元素的元素;
<div id="n1">
<div id="n2">
<ul id="n3">
<li id="n4" class="c">item1</li>
<li id="n5">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>
現在,我們想要爲每個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 選擇器(: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))詳解
<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代碼爲例:
<div id="n1">
<div id="n2">
<span id="n3">張三</span>
<span id="n4"> </span>
</div>
<div id="n5">
<span id="n6"></span>
</div>
<div id="n7">
</div>
</div>
現在,我們想要查找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 選擇器(:header)詳解
以下面這段HTML代碼爲例:
<div id="n1">
<h1 id="n2">標題1</h1>
<div id="n3">
<h2 id="n4">標題2</h2>
</div>
<div id="n5">
<h3 id="n6">標題3</h3>
<h3 id="n7">標題4</h3>
</div>
</div>
現在,我們想要查找所有的標題元素,則可以編寫如下jQuery代碼:
// 選擇了id分別爲n2、n4、n6、n7的4個元素 $(":header");
接着,查找id爲n5
的div標籤內的所有標題元素,則可以編寫如下jQuery代碼:
// 選擇了id分別爲n6、n7的兩個元素 $("#n5 :header");
jQuery 選擇器(:focus)詳解
jQuery的:focus選擇器用於匹配當前獲得焦點的元素,將其封裝爲jQuery對象並返回。以下面這段HTML代碼爲例:
<div id="n1">
<input name="name" type="text" label="姓名"><br>
<input name="age" type="text" label="年齡"><br>
<input name="cellphone" type="text" label="手機號碼">
</div>
<div id="message"></div>
現在,我們爲當前獲得焦點的<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代碼爲例:
<div id="n1">
<div id="n2">
<ul id="n3">
<li id="n4">item2</li>
<li id="n5" class="c" tabindex="3">item3</li>
</ul>
</div>
<div id="n6" class>
<ul id="n7">
<li id="n8" class="">item1</li>
<li id="n9">item2</li>
</ul>
</div>
</div>
現在,我們想要查找所有具有class
屬性的元素,則可以編寫如下jQuery代碼:
// 選擇了id分別爲n5、n6、n8的3個元素 $("[class]");
接着,查找所有同時具有class
屬性和tabindex
屬性的元素,則可以編寫如下jQuery代碼:
// 選擇了id爲n5的一個元素 $("[class][tabindex]");
jQuery 選擇器([attribute=value])詳解
jQuery的[attribute=value]選擇器用於匹配指定屬性爲指定值的所有元素,將其封裝爲jQuery對象並返回。以下面這段HTML代碼爲例:
<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="5">item1</li>
<li id="n9">item2</li>
</ul>
</div>
</div>
現在,我們想要查找所有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代碼爲例:
<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_1]">item1</li>
<li id="n9" dataId="x[5_2]">item2</li>
<li id="n10" dataId="x[6_1]">item3</li>
</ul>
</div>
</div>
現在,我們想要查找所有id
屬性以5
結尾的元素,則可以編寫如下jQuery代碼:
// 選擇了id爲n5的一個元素 $("[id$=5]");
接着,查找dataId
屬性以_1]
結尾的所有元素,則可以編寫如下jQuery代碼:
// 選擇了id分別爲n8、n10的兩個元素 $("[dataId$='_1]']");
jQuery 選擇器([attribute|=value])詳解
jQuery的[attribute|=value]選擇器用於匹配指定屬性等於指定值或以指定值爲前綴的所有元素,將其封裝爲jQuery對象並返回。這裏的前綴,表示以指定值開頭,與後面的部分以連線("-")進行連接。以下面這段HTML代碼爲例:
<div id="n1">
<div id="n2">
<input id="n3" name="Code Player" type="checkbox" value="1" >
<input id="n4" name="Code-Player" type="checkbox" value="2" >
<input id="n5" name="CodePlayer" type="checkbox" value="3" >
<input id="n6" name="Code" type="checkbox" value="4" >
</div>
</div>
現在,我們想要查找所有name
屬性以Code
爲前綴的元素,則可以編寫如下jQuery代碼:
// 選擇了id分別爲n4、n6的兩個元素 $("[name|=Code]");
jQuery 選擇器([attribute~=value])詳解
jQuery的[attribute~=value]選擇器用於匹配指定屬性的值中包含指定單詞的所有元素,將其封裝爲jQuery對象並返回。返回封裝了所有指定屬性包含指定值作爲"單詞"的元素的jQuery對象。
這裏的"單詞"可以理解爲常規英文書寫中的單詞表現形式,與其他"單詞"以空格進行分隔。
如果找不到任何相應的匹配,則返回一個空的jQuery對象。
<div id="n1">
<div id="n2">
<input id="n3" name="Jim Anna jQuery" type="checkbox" value="1" >
<input id="n4" name="Jim-Anna-jQuery" type="checkbox" value="2" >
<input id="n5" name="Anna Jim jQuery" type="checkbox" value="3" >
<input id="n6" name="Jim jQuery Anna" type="checkbox" value="3" >
<input id="n7" name="Anna" type="checkbox" value="4" >
</div>
</div>
現在,我們想要查找所有name
屬性中包含單詞Anna
的元素,則可以編寫如下jQuery代碼:
// 選擇了id分別爲n3、n5、n6、n7的4個元素 $("[name~=Anna]");
jQuery 選擇器([attribute*=value])詳解
jQuery的[attribute*=value]選擇器用於匹配指定屬性包含指定值的所有元素,將其封裝爲jQuery對象並返回。以下面這段HTML代碼爲例:
<div id="n1">
<div id="n2">
<input id="n3" name="xid1" type="checkbox" value="1" >
<input id="n4" name="yid2" type="checkbox" value="2" >
<input id="n5" name="zid3" type="checkbox" value="3" >
</div>
<div id="n6">
<ul id="n7">
<li id="n8" dataId="x[5_1]">item1</li>
<li id="n9" dataId="x[5_2]">item2</li>
<li id="n10" dataId="y[5_3]">item3</li>
</ul>
</div>
</div>
現在,我們想要查找所有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標籤。
<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>
現在,我們查找所有選中的option元素,即可編寫如下jQuery代碼:
// 選擇了id爲n11的一個元素 $(":selected");