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的商品展示放大镜
Aug 07 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 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
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
JScript的条件编译
2007/05/29 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
Python中的下划线详解
2015/06/24 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python实现通讯录功能
2018/02/22 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
EJB面试题
2015/07/28 面试题
MYSQL支持事务吗
2013/08/09 面试题
本科生详细的自我评价
2013/09/19 职场文书
林肯就职演讲稿
2014/05/19 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers