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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
js字符编码函数区别分析
Dec 28 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
js中call与apply的用法小结
Dec 28 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 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
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
js实现选项卡效果
2020/03/07 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
numpy中矩阵合并的实例
2018/06/15 Python
python处理csv中的空值方法
2018/06/22 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python反编译学习之字节码详解
2019/05/19 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
创业资金计划书
2014/02/06 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
兴趣小组活动总结
2014/05/05 职场文书
租房协议书范例
2014/10/14 职场文书
给客户的检讨书
2014/12/21 职场文书
公务员政审材料范文
2014/12/23 职场文书
优秀团队申报材料
2014/12/26 职场文书
交通事故案件代理词
2015/05/23 职场文书