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

本文实例讲述了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="http://www.jb51.net/" />
<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程序设计有所帮助。

赞 (0)

相关推荐

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

    本文实例讲述了jQuery中:first-child选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配父元素的第一个子元素. 语法结构: 复制代码 代码如下: $(":first-child") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $("ul li:first-child").css("color","blue") 以上代码能够将父元素下的第一个li

  • jQuery中:selected选择器用法实例

    本文实例讲述了jQuery中:selected选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配被选择的<option>元素. 语法结构: 复制代码 代码如下: $(":selected") 此选择器可以和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $(".myselect :selected").css("color","red") 以上代码能够将类名为myse

  • jQuery大于号(>)选择器的作用解释

    jQuery选择器中的大于号>作用是什么: jQuery灵活多样的选择器是jQuery的优点之一. 下面就介绍一下其中的一个选择器,用大于号表示. 代码示例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>蚂蚁部落</title> <style type="text/css">

  • NodeJS使用jQuery选择器操作DOM

    注* 这是一个两年多的"老"项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:   Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速,灵活,在服务器端使用的jQuery. 简介 测试你的服务器端HTML: 复制代码 代码如下: var cheerio = require('cheerio'), $

  • jQuery选择器querySelector的使用指南

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器.这使得在编写原生JavaScript代码时方便了许多. 用法 两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法. 复制代码 代码如下: element = document.querySelector('selectors'); elementList =

  • jQuery选择器总结之常用元素查找方法

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $

  • 浅析jQuery事件之on()方法绑定多个选择器,多个事件

    $(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function()

  • jquery通过closest选择器修改上级元素的方法

    本文实例讲述了jquery通过closest选择器修改上级元素的方法.分享给大家供大家参考.具体如下: 这段代码演示了jQuery通过closest选择器获取上一级的元素,然后修改其text()内容. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>

  • jQuery插件实现适用于移动端的地址选择器

    jQuery插件实现适用于移动端的地址选择器

    最近在工作中需要用到地址选择器,像下面这样的,本想在网上找一个,可是没找到,于是自己写了个jquery插件. 直接上代码吧: var provinces = { "A": { "安徽":["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市&qu

  • jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

    jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

    我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用. 在线演示       源码下载 日期选择器datedropper 使用非常简单,分三步, 1.引入相关js和css文件.注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件. <scr

  • JQuery选择器绑定事件及修改内容的方法

    本文实例讲述了JQuery选择器绑定事件及修改内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World jQuery!</title> <script type="text/javascript" src="jquery-1.3.2.min.js&

随机推荐