jQuery自定义选择器

1.自定义选择器

自定义选择器不能使用速度最快的原生态选择器了。因此尽量不要使用。

(1):even结果集中其索引为偶数的元素(0,2,4....)

(2):odd结果集中其索引为奇数的元素(1,3,5....)

[注意]经常使用$("tr:odd")或者$("tr:nth-child")实现table隔行,但是当页面中含有不只一个table时,前者往往会使后面table的隔行出现混乱,而后者是不存在此类问题的。并且nth-child是jQuery中唯一一个从1开始计数的选择器。

(3):eq(N)and:nth(N)选择结果索引为N的元素

(4):gt(N)选择结果集中索引大于N的元素

(5):lt(N)选择结果集中索引小于N的元素

(6):first选择结果集中的第一个元素

Demo一:选择结果集中第一个元素的方法

$('div:first')
$('div:nth(0)')
$('div:eq(0)')

Demo二::first和:first-child的区别

$('tabletr:first)是第一table的第一个tr

$('tabletr:first-child')是每个table的第一个tr

使用first-child可以利用table的ID将需要处理的表格固定。例如以下例子:

<script type="text/javascript">
         $(function(){
            $('#table1 tr:first-child').addClass("divTitle");
            $('table tr:first').addClass("divTitle");
         })
    </script>
</head>
<body>
<div class="divFrame">
    <table id="table1">
		<tr><td>name</td><td>title</td></tr>
		<tr><td>1</td><td>"111"</td></tr>
		<tr><td>2</td><td>"222"</td></tr>
	</table>
	<br>
	<br>
	<table id="table2">
		<tr><td>namegggg</td><td>titleggggg</td></tr>
		<tr><td>1</td><td>"111"</td></tr>
		<tr><td>2</td><td>"222"</td></tr>
	</table>
	<br>
	<br>
	<button class="divBtn" id="button1" value="btn" text="btn"></button>
</div>
<div id="divTip" class="divTip"></div>
</body>
</html>

(7):last选择结果集中的最后一个元素

(8):parent在结果集中选择元素,它必须具有子元素(包括文本节点)(跟:empty相反)

(9):contains(’test’)选择结果集中包含有指定文本的元素

(10):visible选择所有可见(visible)的元素

相关推荐