jQuery过滤选择器用法分析


Posted in Javascript onFebruary 10, 2015

本文实例讲述了jQuery过滤选择器用法。分享给大家供大家参考。具体分析如下:

在实践中,可以在基本选择器的基础上添加过滤选择器来完成查询任务,根据具体情况,在过滤选择器中可以使用元素的索引值、内容、属性、子元素位置、表单

域属性以及可见性作为筛选条件

1. :first选择器

格式:

$("selector: first")
用于对当前jQuery集合进行过滤并选择出第一个匹配元素

实例:

$("td:first").css("border", "2px solid blue");

2. :last选择器

格式:

$("selector: last")
用于对当前jQuery集合进行过滤并选择出最后一个匹配元素
实例:
$("td:last").css("border", "2px solid blue");

3. :odd选择器

格式:

$("selector: odd")
用于选择索引为奇数(从0开始计数)的所有元素

实例:

$("td:odd").css("background", "red");

4. :even选择器

格式:

$("selector: even")
用于选择索引为偶数(从0开始计数)的所有元素

实例:

$("td:even").css("background", "red");

5. :eq选择器

格式:

$("selector:eq(index)")
用于从匹配的集合中选择索引等于给定值的元素

实例:

$("li:eq(1)").css("color", "blue");

6. :gt选择器

格式:

$("selector:gt(index)")
用于从匹配的集合中选择索引大于给定值的所有元素

实例:

$("li:gt(0)").css("color", "green");

7. :lt选择器      

格式:

$("selector:lt(index)")
用于从匹配的集合中选择索引大于给定值的所有元素

实例:

$("li:lt(5)").css("color", "green");

若要查找索引大于n1小于n2的所有元素,可以使用数组选择器,

$("selector:gt(n1), selector:lt(n2)");

8. :not选择器

格式:

$("selector1:not(selector2)")
用于从匹配的集合中去除所有与给定选择器匹配的元素

实例:

$("td:not(:first, :last)").css("background", "red");  //除了第一个和最后一个单元格,其他的单元格的背景色为红色

9. :header选择器

格式:

$(":header")
用于选择所有诸如h1, h2, h3之类的标题元素

10. :animated选择器

格式:

$("selector:animated")
用于选择所有正在执行动画效果的元素

简单示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>过滤选择器</title>  

<script type="text/javascript" src="jquery-1.7.min.js"></script>  

<script type="text/javascript">  

    $(document).ready(function() {  

           $(":header").css("color", "#999");  

           $("tr:first").css("background", "#FCF");  

           $("td:last").css("background", "#FCF");  

           $("td:odd").css("background", "yellow");  

           $("td:even").html("偶数");  

           $("td:eq(1)").css("border", "1px solid red");  

           $("td:gt(6)").css("border", "1px solid blue");  

           $("td:lt(6)").css("color", "blue");  

           $("td:not(:first, :last").css("color", "red");  

        });  

</script>  

</head>  

<body>  

<h3 align="center">简单过滤选择器应用示例</h3>  

<table width="480" height="160" border="1">  

  <tr>  

    <td> </td>  

    <td> </td>  

    <td> </td>  

    <td> </td>  

    <td> </td>  

  </tr>  

  <tr>  

    <td> </td>  

    <td> </td>  

    <td> </td>  

    <td> </td>  

    <td> </td>  

  </tr>  

  <tr>  

    <td> </td>  

    <td> </td>  

    <td> </td>  

    <td> </td>  

    <td> </td>  

  </tr>  

</body>  

</html>

效果图如下所示:

jQuery过滤选择器用法分析

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
js三种排序算法分享
Aug 16 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
domReady的实现案例
Nov 23 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
jQuery表单域选择器用法分析
Feb 10 #Javascript
jQuery层级选择器用法分析
Feb 10 #Javascript
Jquery中CSS选择器用法分析
Feb 10 #Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 #Javascript
Js为表单动态添加节点内容的方法
Feb 10 #Javascript
jQuery前端分页示例分享
Feb 10 #Javascript
js进行表单验证实例分析
Feb 10 #Javascript
You might like
模仿OSO的论坛(三)
2006/10/09 PHP
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
PHP生成条形图的方法
2014/12/10 PHP
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
python发送HTTP请求的方法小结
2015/07/08 Python
python实现用户登录系统
2016/05/21 Python
python爬虫基本知识
2018/03/05 Python
python用户管理系统
2018/03/13 Python
Python requests库用法实例详解
2018/08/14 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
pycharm新建一个python工程步骤
2019/07/16 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
python梯度下降算法的实现
2020/02/24 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
python上selenium的弹框操作实现
2020/07/13 Python
应届生的求职推荐信范文
2013/11/30 职场文书
解除施工合同协议书
2014/10/17 职场文书
个人汇报材料范文
2014/12/30 职场文书
慰问信模板
2015/02/14 职场文书
2015年科协工作总结
2015/05/19 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
宾馆客房管理制度
2015/08/06 职场文书
golang生成并解析JSON
2022/04/14 Golang
Python实现双向链表基本操作
2022/05/25 Python