jQuery中:nth-child选择器用法实例


Posted in Javascript onDecember 31, 2014

本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下:

此选择器匹配其父元素下的第N个子或奇偶元素。
:eq(index)选择器只匹配一个元素,而:nth-child选择器将为每一个父元素匹配子元素。
:nth-child从1开始的,而:eq()是从0开始。
语法结构:

$(":nth-child")

此选择器一般也要和其他选择器配合使用,比如类选择器、元素选择器等等。例如:

$("li:nth-child(2)").css("color","blue")

以上代码能够将父元素下第二个li元素中的字体颜色设置为蓝色。也可以计算父元素的奇偶子元素。例如:

$("li:nth-child(even)").css("color","blue")

以上代码能够将父元素下的排序为偶数的li元素中的字体颜色设置为蓝色。

注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是li,而是li的父元素。
很多人往往误以为是匹配li元素的子元素中的最后一个元素。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>:nth-child选择器-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("li:nth-child(2)").css("color","blue")

  })

}) 

</script>

</head>

<body>

<div>

  <ul>

    <li class="houtai" title="asp">ASP教程</li>

    <li class="houtai" title="net">ASP.NET教程</li>

    <li class="houtai" title="php">;PHP教程</li>

  </ul>

  <ul>

    <li class="qiantai" title="html">html教程</li>

    <li class="qiantai" title="div">DIV+CSS教程</li>

    <li class="qiantai" title="jquery">jQUERY教程</li>

    <li class="qiantai" title="js">jAVAScript教程</li>

  </ul>

</div>

<button>点击查看效果</button>

</body>

</html>

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

Javascript 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
JS如何判断json是否为空
Jul 06 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
js实现图片推拉门效果代码实例
May 18 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
jQuery中:first-child选择器用法实例
Dec 31 #Javascript
jQuery中复合属性选择器用法实例
Dec 31 #Javascript
javascript实现左右控制无缝滚动
Dec 31 #Javascript
javascript比较两个日期的先后示例代码
Dec 31 #Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 #Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 #Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 #Javascript
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP SQLite类
2009/05/07 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
javascript string字符串优化问题
2011/07/31 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
python 基于opencv去除图片阴影
2021/01/26 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
数学检讨书1000字
2014/02/24 职场文书
个人股份合作协议书
2014/10/24 职场文书
支教个人总结
2015/03/04 职场文书
二婚主持词
2015/06/30 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
Python中的 Set 与 dict
2022/03/13 Python
Python学习之时间包使用教程详解
2022/03/21 Python