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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
微信小程序动态设置图片大小的方法
Nov 21 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中的cookie
2006/11/26 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
使用angular写一个hello world
2015/01/23 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
js模块加载方式浅析
2017/08/12 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
零基础写python爬虫之神器正则表达式
2014/11/06 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
django删除表重建的实现方法
2019/08/28 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
前台文员的岗位职责
2013/11/14 职场文书
销售文员岗位职责
2013/11/29 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python