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 相关文章推荐
为指定元素增加样式的js代码
Dec 09 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
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
php生成图形验证码几种方法小结
2013/08/15 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
学生会招新策划书
2014/02/14 职场文书
高校教师岗位职责
2014/03/18 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
2014年教师节活动总结
2014/08/29 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
文艺演出主持词
2015/07/01 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
总结Python使用过程中的bug
2021/06/18 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js