jQuery 基本过滤器内容总结

范范

     在这里，主要总结下jQuery的基本过滤器的内容，以及用法， 在每个过滤中，都会有相应的例子，包括html，以及jQuery，和获取到的内容显示
     大家在看着学习的时候，可以直接使用本文中的html进行测试，或者自己写个html，进行测试学习。
     希望可以跟大家一起进步哈

     jQuery的基本过滤器，我这边总结的有10个基本过滤器，在稍后内容中还会总结jQuery的其他过滤器。
     基本过滤器包括以下10种

1.  :first    匹配找到的第一个元素
2. :last    匹配找到的最后一个元素
3. :not(selector)    去除所有与给定选择器匹配的元素
4. :even     匹配所有索引值为偶数的元素
5. dd(':' 后跟着'odd')      匹配所有索引值为奇数的元素
6. :eq(index)    匹配一个给定索引值的元素
7. :gt(index)    匹配所有大于给定索引值的元素
8. :lt(index)    匹配所有小于给董索引值的元素
9. :header     选择所有的h1，h2，h3一类的header标签
10. :animated    匹配所有正在执行动画效果的元素

范范

1.  :first    匹配找到的第一个元素例：$("tr:first")    查找表格的第一行

[HTML] 纯文本查看 复制代码

<ul class="job-hotspot oh">
            <li id="job1">
                <a href="http://baidu.com/532031" target="_blank">
                    <img src="http://imga.baidu.com/201711/21/25402bbeeb1b4ef18af746ee1638d1e6.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2022005" class="text ellipsis">古建项目经理</a>
            </li>
            <li>
                <a href="http://baidu.com/531576" target="_blank">
                    <img src="http://imga.baidu.com/201710/24/71cfeb3e61874a65834878ae14740768.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2021005" class="text ellipsis">电话销售</a>
            </li>
            <li>
                <a href="http://baidu.com/20677" target="_blank">
                    <img src="http://imga.baidu.com/201710/25/4ee6c4750ffd473eb43c49f9a67d0169.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/54315" class="text ellipsis">工程类相关技术人员</a>
            </li>
            <li id="job4">
                <a href="http://baidu.com/514540" target="_blank">
                    <img src="http://imga.baidu.com/201711/15/bae05709addc4bc89c6c707bfde56272.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/1733462" class="text ellipsis">城市规划师</a>
            </li>
            <li id="job5">
                <a href="http://baidu.com/92044" target="_blank">
                    <img src="http://imga.baidu.com/201711/1/1faa0f38aae542029d5fb106e634ae2b.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/734223" class="text ellipsis">观赏植物育种技术员</a>
            </li>
    </ul>

$('.job-hotspot:first')  获取第一个  样式为 ‘job-hotspot’ 的元素
$('li:first')  获取第一个li 元素  本html中有5个li，可以看到获取到的为  第一个，即‘job1’  的li

范范

2、:last    匹配找到的最后一个元素
例：$("tr:last")    查找表格的最后一行

[HTML] 纯文本查看 复制代码

<ul class="job-hotspot oh">
            <li id="job1">
                <a href="http://baidu.com/532031" target="_blank">
                    <img src="http://imga.baidu.com/201711/21/1e6.jpg">
                </a>
				<a target="_blank" href="http://baidu.com/Job/2022005" class="text ellipsis">古建项目经理</a>
            </li>
            <li>
                <a href="http://baidu.com/531576" target="_blank">
                    <img src="http://imga.baidu.com/40768.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2021005" class="text ellipsis">电话销售</a>
            </li>
            <li>
                <a href="http://baidu.com/20677" target="_blank">
                    <img src="http://imga.baidu.com/d0169.jpg">
                </a>
				<a target="_blank" href="http://baidu.com/Job/54315" class="text ellipsis">工程类相关技术人员</a>
            </li>
            <li id="job4">
                <a href="http://baidu.com/514540" target="_blank">
                    <img src="http://imga.baidu.com/e56272.jpg">
                </a>
				<a target="_blank" href="http://baidu.com/Job/1733462" class="text ellipsis">城市规划师</a>
            </li>
            <li id="job5">
                <a href="http://baidu.com/92044" target="_blank">
                    <img src="http://imga.baidu.com/ae2b.jpg">
                </a>
				<a target="_blank" href="http://baidu.com/Job/734223" class="text ellipsis">观赏植物育种技术员</a>
            </li>
    </ul>

$('li:last')  获取最后一个li标签  可以明显的看到，获取到的是  id为‘job5’的元素

范范

沙发沙发，今天先更新到这里，稍后会继续更新，欢迎大家关注本内容，一起学习进步

范范

3、:not(selector)    去除所有与给定选择器匹配的元素
例：$("input:not(:checked)")    查找所有未选中的input

[HTML] 纯文本查看 复制代码

<table class="table table-page" id="grid">
        <tbody>
                <tr>
                        <td align="center"><input type="checkbox" id="Checkbox1" value="532250" name="userflag"></td>
                        <td align="center" style="width: 10%">532250</td>
                </tr>
                
                <tr>
                        <td align="center"><input type="checkbox" id="Checkbox3" value="532249" name="userflag"></td>
                        <td align="center" style="width: 10%">532249</td>
                </tr>
                
                <tr>
                        <td align="center"><input type="checkbox" id="Checkbox5" value="531941" name="userflag"></td>
                        <td align="center" style="width: 10%">531941</td>
                </tr>
                <tr>
                        <td align="center"><input type="checkbox" id="Checkbox21" value="531665" name="userflag"></td>
                        <td align="center" style="width: 10%">531665</td>
                </tr>
                
                <tr>
                        <td align="center"><input type="checkbox" id="Checkbox23" value="531657" name="userflag"></td>
                        <td align="center" style="width: 10%">531657</td>
                </tr>
        </tbody>
</table>

$("input:not(:checked)")
可以很清楚的看到，未选中的input  有2个

范范

4、:even    匹配所有索引值为偶数的元素
注：从0来时计算
例：$("tr:even")    查找表格的1、3、5......行

[HTML] 纯文本查看 复制代码

<table class="table table-page" id="grid">
        <tbody>
                <tr>
                        <td align="center"><input type="checkbox" id="Checkbox1" value="532250" name="userflag"></td>
                        <td align="center" style="width: 10%">532250</td>
                </tr>
                
                <tr>
                        <td align="center"><input type="checkbox" id="Checkbox3" value="532249" name="userflag"></td>
                        <td align="center" style="width: 10%">532249</td>
                </tr>
                
                <tr>
                        <td align="center"><input type="checkbox" id="Checkbox5" value="531941" name="userflag"></td>
                        <td align="center" style="width: 10%">531941</td>
                </tr>
                <tr>
                        <td align="center"><input type="checkbox" id="Checkbox21" value="531665" name="userflag"></td>
                        <td align="center" style="width: 10%">531665</td>
                </tr>
                
                <tr>
                        <td align="center"><input type="checkbox" id="Checkbox23" value="531657" name="userflag"></td>
                        <td align="center" style="width: 10%">531657</td>
                </tr>
        </tbody>
</table>

$('tr:even')输出内容中，可以看到，查询到了3条记录， 1/3/5  三条记录

范范

dd    匹配所有索引值为奇数的元素
注：从0开始计算
例：$("trdd")    查找表格的2、4、6.....行

[HTML] 纯文本查看 复制代码

<table class="table table-page" id="grid">
	<tbody>
		<tr>
			<td align="center"><input type="checkbox" id="Checkbox1" value="532250" name="userflag"></td>
			<td align="center" style="width: 10%">532250</td>
		</tr>
		
		<tr>
			<td align="center"><input type="checkbox" id="Checkbox3" value="532249" name="userflag"></td>
			<td align="center" style="width: 10%">532249</td>
		</tr>
		
		<tr>
			<td align="center"><input type="checkbox" id="Checkbox5" value="531941" name="userflag"></td>
			<td align="center" style="width: 10%">531941</td>
		</tr>
		<tr>
			<td align="center"><input type="checkbox" id="Checkbox21" value="531665" name="userflag"></td>
			<td align="center" style="width: 10%">531665</td>
		</tr>
		
		<tr>
			<td align="center"><input type="checkbox" id="Checkbox23" value="531657" name="userflag"></td>
			<td align="center" style="width: 10%">531657</td>
		</tr>
	</tbody>
</table>

如图可以准确的看到，使用‘odd’可以准确的获取偶数行，即2/4行
获取内容为：532249，531665

范范

:eq(index)    匹配一个给定索引值的元素
注：index从0开始计算
例：$("tr:eq(1)")    查找表格的第2行

[HTML] 纯文本查看 复制代码

<table class="table table-page" id="grid">
	<tbody>
		<tr>
			<td><input type="checkbox" id="Checkbox1" value="532250" name="userflag"></td>
			<td>532250</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox3" value="532249" name="userflag"></td>
			<td>532249</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox5" value="531941" name="userflag"></td>
			<td>531941</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="Checkbox21" value="531665" name="userflag"></td>
			<td>531665</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox23" value="531657" name="userflag"></td>
			<td>531657</td>
		</tr>
	</tbody>
</table>

范范

:gt(index)    匹配所有大于给定索引值的元素
注：index从0开始计算
    例：$("tr:gt(0)")    查找第二行、第三行，即索引值为1、2，也就是比0大

[HTML] 纯文本查看 复制代码

<table class="table table-page" id="grid">
	<tbody>
		<tr>
			<td><input type="checkbox" id="Checkbox1" value="532250" name="userflag"></td>
			<td>532250</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox3" value="532249" name="userflag"></td>
			<td>532249</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox5" value="531941" name="userflag"></td>
			<td>531941</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="Checkbox21" value="531665" name="userflag"></td>
			<td>531665</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox23" value="531657" name="userflag"></td>
			<td>531657</td>
		</tr>
	</tbody>
</table>

可以看到，本table有5个tr，在使用$('tr:gt(4)')  时，未获取到数据
是因为索引由0开始，到4的时候已经是第5行了，没有比4更大的索引值了

范范

:lt(index)    匹配所有小于给董索引值的元素
注：index从0开始计算
    例$("tr:lt(2)")    查找第一行、第二行，即索引值为0、1，也就是比2小

[HTML] 纯文本查看 复制代码

<table class="table table-page" id="grid">
	<tbody>
		<tr>
			<td><input type="checkbox" id="Checkbox1" value="532250" name="userflag"></td>
			<td>532250</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox3" value="532249" name="userflag"></td>
			<td>532249</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox5" value="531941" name="userflag"></td>
			<td>531941</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="Checkbox21" value="531665" name="userflag"></td>
			<td>531665</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox23" value="531657" name="userflag"></td>
			<td>531657</td>
		</tr>
	</tbody>
</table>

可以明显看到，gt与lt是相反的两个过滤器，   gt获取比当前索引到的内容，lt获取比当前索引小的内容