JQuery学习笔记 nt-child的使用

在使用JQuery的时候如果你想寻找某个容器（诸如div或者是table中的某些子元素），那么很容易就使用find方法。find将使用迭代的方式寻找所有符合条件的子元素，并且可以统一、批量的设置css等内容。
比如有这样一个table：


代码如下:

<table id="outer">
<tr>
<td>
<table id="nested">
<tr>
<td>
内嵌Table，行1列1
</td>
<td>
内嵌Table，行1列2
</td>
</tr>
<tr>
<td>
内嵌Table，行2列1
</td>
<td>
内嵌Table，行2列2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
第一个Table，行2列1
</td>
<td>
第一个Table，行2列2
</td>
</tr>
</table>

现在要求把所有的字体设置成蓝色，直接这样做即可。
$("table").css("color", "blue");
注意：$("table")表示页面上“每一个table“都这样设置。

下面看一个复杂的例子——
【把每个table的第二行第二列的字体设置成红色】

或许你可能为这样思考——因为$("table")表示“每一个table”，因此如果写成“$(table tr:eq(1) td:eq(1)).css("color","red");就可以大功告成（每一个table的第二行第二列）……
真的是这样吗？你如果运行一下结果，便大吃一惊——因为只有“内嵌Table，行1列1“变成了红色！这根本不是我们预期的结果。
为什么呢？道理很简单——因为JQuery如果通过空格分割html标签或者其它相关属性，意味着是从“父标签”中逐个寻找自标签，满足条件为止。结果就变成了“在父table中寻找所有的tr，找出满足条件的第二个tr，然后寻找第二个tr中的第一个td，并且染成红色！”

下面给出完整定义——
$("HTML标签，html子标签:eq(n) html子子标签:eq(n)……）：从HTML标签（父）寻找满足条件的第n+1个子标签，然后在第n+1个子标签中寻找第n+1个子标签……直到全部遍历为止。
因此这种方法是错误的，初学者尤其容易犯哦。

那么应该怎么办呢？有人想到了这个方法——


代码如下:

$("table").each(function () {
$(this).find("tr:eq(1) td:eq(1)").css("color", "red");
});

他的理由是：遍历每一个table，然后把每一个table的第二行第二列设置颜色。

相比第一个答案，第二个人似乎聪明了一点，他感悟到“table”父标签不会自行重复寻找（JQuery在前套标签的时候只会深度遍历最里边的那个标签，也就是蓝色定义的“……”那个无穷大的部分）。因此想到用each——诚然，each的确解决了深度遍历table的问题，但是第一个table的find依旧是按照蓝色部分思路执行（依旧寻找父table中第二个tr，第二个tr中的第二个td），所以find也是只有末尾HTML进行深度遍历。

此时我们只能使用这样的方法：
$("tr:nth-child(2) td:nth-child(2)").css("color", "red");

nth-child(n)是CSS伪类的一个方法，可以用于JQuery，这个代码的意思是：寻找离开第n个tr最近的容器元素，然后对自己进行设置。
这样一来，“tr:nth-child(2)”将分别对应两个<table>。从而可以设置样式了。

赞 (0)

相关推荐

  • jQuery学习笔记之回调函数

    1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法. 2.代码 JS代码 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1

  • jQuery学习笔记之Ajax用法实例详解

    本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.

  • 那些年，我还在学习jquery 学习笔记

    原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧一.$符号 1.选择器 可以选择html标签,也可选择ID,Class等 如下: 复制代码 代码如下: <script type="text/javascript"> $( function() { $("table.datalist tr:nth-child(odd)").ad

  • jquery学习笔记 用jquery实现无刷新登录

    好了,唠嗑就到这里,现在看如何用jquery实现无刷新登录. 首先先创建html的部分 复制代码 代码如下: <table> <tr> <td> 用户名: </td> <td> <input type="text" id="username" /> </td> </tr> <tr> <td> 密码: </td> <td> &

  • jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路

    jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路

    jQuery是时下比较流行的一个js库,能够用简单的代码做出理想的效果,就像官网上说的那样"write less ,do more".Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jquery的魅力. 首先你需要下载jquery的最新的js文件,并将其引入到文件中,你也可以在此下载:点我下载. 这次通信用的是jquery的jQuery.post(url,[data], [callback],[type

  • jQuery学习笔记之入门

    最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下: 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: $('#info').val('Hello World!'); 嗯,可以看

  • jQuery学习笔记之jQuery选择器的使用

    一.基本选择器: #id   :选择给定ID名的元素 如:$("#id1")为选择id为id1的元素 .class   :选择给定类名的元素 element   :选择给定元素名的所有原色 *  :匹配所有元素 selector1,selector2,......   :选择这些名称的元素,以逗号隔开,可以是类或id名 二.层次选择器: $("ancestor  descendant") :选择ancestor元素下的所有descendant(后代)元素 $(&qu

  • jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

    jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

    好久以来就想实现一个模态的框框,找了很多的jquery插件,都没有碰到自己满意的,这次碰到了一个,但是由于还处于开发阶段吧,连个文档API都没有,自己摸索了好长一段时间才搞定. 先来看看代码,本人看着源代码定制了自己想要的效果: 复制代码 代码如下: <%@ page language="java"contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DO

  • JQuery 学习笔记 选择器之一

    本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种文章,希望大家多多支持^^,有哪些方法不好可以跟贴指导指导^^ 现在,让我们一起开始在JQuery的世界里飞翔吧^^ 首先,本章先来学习JQuery最基本的选择器的使用咯 先声明下,使用JQuery最基本的规则 $(document).ready(function(){ //do so

  • jQuery学习笔记[1] jQuery中的DOM操作

    DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM. 1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()...等方法. 例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName("form"); 2,HTML-DOM. 在使用JavaScript和DOM为HTML

随机推荐