jQuery子属性过滤选择器用法分析


Posted in Javascript onFebruary 10, 2015

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

1. :first-child选择器

用于选择其父级的第一个子元素的所有元素,格式:

$("selector:first-child")

如:

$("ul:first-child").css("text-decoration", "underline").css("color", "blue");

2. :last-child选择器

用于选择其父级的最后一个子元素的所有元素,格式:

$("selector:last-child")

如:

$("ul:last-child").css("text-decoration", "underline").css("color", "red");

3. :nth-child选择器

用于选择父元素下的第N个子元素或奇偶元素。

语法格式:

$("selector:nth-child(index/even/odd/equation)");

如:

$("ul li:nth-child(4)").css("color", "red");//将ul元素下的第5个元素的文本颜色设置为红色,即该li元素的索引值为4

4. :only-chilid选择器

用于选择某元素的惟一选择器

格式:

$("selector:only-chilid")

简单示例:

<!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() {  

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

           $("table tr:last-child").css("background", "yellow");  

           $("tr td:nth-child(even)").css("border", "1px solid red");  

           $("div h3:only-child").css("color", "#999");  

         });  

</script>  

</head>  

  

<body>  

<div align="center">子元素过滤器应用实例</div>  

<table width="462" height="152" 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>  

    <tr>  

      <td> </td>  

      <td> </td>  

      <td> </td>  

      <td> </td>  

      <td> </td>  

    </tr>  

    <tr>  

      <td> </td>  

      <td> </td>  

      <td> </td>  

      <td> </td>  

      <td> </td>  

    </tr>  

</table>  

</body>  

</html>

效果图如下所示:

jQuery子属性过滤选择器用法分析

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

Javascript 相关文章推荐
javascript FormatNumber函数实现方法
Dec 30 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
jQuery内容过滤选择器用法分析
Feb 10 #Javascript
jQuery过滤选择器用法分析
Feb 10 #Javascript
jQuery表单域选择器用法分析
Feb 10 #Javascript
jQuery层级选择器用法分析
Feb 10 #Javascript
Jquery中CSS选择器用法分析
Feb 10 #Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 #Javascript
Js为表单动态添加节点内容的方法
Feb 10 #Javascript
You might like
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php入门教程 精简版
2009/12/13 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
Python实现的快速排序算法详解
2017/08/01 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Django使用rest_framework写出API
2020/05/21 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python 实现超级玛丽游戏
2020/11/25 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
鱼油专家:Omegavia
2016/10/10 全球购物
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
园林资料员岗位职责
2013/12/30 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
开业庆典策划方案
2014/02/18 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
入党团支部推荐意见
2015/06/02 职场文书
工作证明书
2015/06/15 职场文书
python实现监听键盘
2021/04/26 Python