jQuery經常使用函數（二）：選擇器selector

時間 2020-02-14

標籤 jquery 經常使用函數選擇器 selector 欄目 JQuery 简体版

原文原文鏈接

$(function(){
	
//ID匹配
var test = $('#1,#2');

//匹配父下面的子的最後一個
var test1 = $('ul li:last');

//給定父元素下的全部子元素
var test2x = $('ul>');

var test2 = $('ul>li');

//匹配id=1的li元素的下一個li元素。（指下一個相鄰同輩元素），返回id=2的li
var test3 = $('#1+li');

//匹配li以後的全部同輩元素
var test4 = $('#1~li');

//li集合的第一個li
var test5 = $('li:first');

//匹配第N個子元素,序號從1開始，注意ul後有空格
var test5x = $('ul :nth-child(5)');

//li集合最後一個li
var test6 = $('li:last');

//去除與給定li匹配的元素；
var test7 = $('li:not(#2)');

//匹配全部索引爲偶數的元素，從0開始
var test8 = $('li:even');//同理：odd奇數

//匹配指定索引的元素
var test9 = $('li:eq(5)');

//匹配全部大於指定索引的元素
var test10 = $('li:gt(0)');//同理：lt（index）匹配小於指定索引的元素

//匹配如<h1><h2>之類的標題元素
var test11 = $(':header:eq(0)');//返回h1

//當前獲取焦點的元素
var test12 = $(':focus');

//當前全部正在執行的動畫元素；
var test13 = $(':animated');

/* 匹配包含指定文本的元素
var test14 = $('ul:contains(1)')與var test14 = $('ul :contains(1)')
注意這兩句的區別，ul後有空格的則返回li#1（表示取子）,每空格的則返回ul */
var test14 = $('ul :contains(1)');

//匹配全部不包含子元素或者文本的空元素
var test15 = $('ul :empty');

//匹配全部選擇器所匹配的元素的元素
var test16 = $(':has(li)');//返回的是	Object[html,body,ul]；

//匹配全部子元素或者文本元素
var test17 = $('body :parent');//返回body下面的全部子元素，注意body後面有個空格

/* 其餘：
:enabled（匹配全部可用元素）
:disabled（匹配全部不可用元素）
:checked（匹配全部選中元素，複選框、單選框等，不包括<select>中的option）
:selected（匹配全部選中的option元素）
:hidden（匹配全部不可見元素）
:visible（匹配全部可見元素）*/

/* 表單 ：
:input（<input><textarea><select><button>）
:text(全部單行文本框)
:password
:radio
:checkbox
:submit
:image
:reset 匹配全部重置按鈕,input的type裏有reset
:button
:file
:hidden
*/

console.log(test5x);
});
<body>
	<h1>h1</h1>
	<h2>h2</h2>
	<ul>
		<li id="1">1</li>
		<li id="2">2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li id="6">6</li>
		<ins></ins>
	</ul>
</body>