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 相关文章推荐
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
js实现按座位号抽奖
Apr 05 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
快速入门Vue
2016/12/19 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
python列表生成式与列表生成器的使用
2018/02/23 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
python监控文件并且发送告警邮件
2018/06/21 Python
如何用Python合并lmdb文件
2018/07/02 Python
Numpy中的mask的使用
2018/07/21 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
三个Unix的命令面试题
2015/04/12 面试题
应届大学生自荐书
2014/06/17 职场文书
甜品店创业计划书
2014/09/21 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
法院个人总结
2015/03/03 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js