一、children()方法

例子：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <style>

    .fa{

    height:100px;

    width:300px;

    background:#b6b6b6;

    }

    .sss{

        border:1px solid #FF0;

    }

    </style>

   <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>children方法()</h2>

    <div class="fa">

        <div class="son">

            <div class="sss">sss</div>

        </div>

        <div class="son">son2</div>

        <div class="son">son3</div>

        <div class="son">son4</div>

    </div>

    <button id="bt1">children()无参数的用法</button>

    <button id="bt2">children()加参数的用法</button>

    <script type="text/javascript">

    $("#bt1").click(function() {

        $('.fa').children().css('border', '1px solid red')

    })

    </script>

    <script type="text/javascript">

    $("#bt2").click(function() {

        //找到所有class=fa的元素

        //只对符合条件的子元素加样式

        $('.fa').children(':eq(3)').css('border', '1px solid blue')

    })

    </script>

</body>

</html>

说明：

.children()无参数

XX节点.children()，不加参数的情况时。会定位到该节点的所子元素，从上面的例子看出.children()在遍历时只会选定到子元素不会对孙子元素进行选定

.children()有参数

如果只想要对某个节点的子节点中的其中某一个进行操作时，可以用.children(':eq(3)')有参数的形式来遍历

二、find()方法

find（）和children（）的区别：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <style>

    .fa{

    height:100px;

    width:300px;

    background:#b6b6b6;

    }

    .sss{

        border:1px solid #FF0;

    }

    </style>

   <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>children方法()</h2>

    <div class="fa">

        <div class="son">

            <div class="sss">sss</div>

        </div>

        <div class="son">son2</div>

        <div class="son">son3</div>

        <div class="son">son4</div>

    </div>

    <button id="bt1">.find()用法</button>

    <script type="text/javascript">

    $("#bt1").click(function() {

        $('.fa').find('div').css('border', '1px solid red')

    })

    </script>

</body>

</html>

三、parent()方法

遍历找到该节点的父节点：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <style>

    .fa{

    height:200px;

    width:300px;

    background:#b6b6b6;

    }

    .sss{

        border:1px solid #FF0;

    }

    .son{

        margin-top:20px;

         border:1px solid #F00;

    }

    </style>

   <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>children方法()</h2>

    <div class="fa">

        <div class="son">

            <div class="sss">sss</div>

        </div>

        <div class="son">son2</div>

        <div class="son">son3</div>

        <div class="son">son4</div>

    </div>

    <button id="bt1">parent()用法</button>

    <script type="text/javascript">

    $("#bt1").click(function() {

        $('.sss').parent().css('border', '1px solid blue')

    })

    </script>

</body>

</html>

jQuery_DOM学习之------遍历节点的更多相关文章

  1. jQuery_DOM学习之------创建节点及节点属性

    DOM创建节点及节点属性 一.创建新的节点并添加到dom中 dom 节点创建的过程(创建节点<元素.属性.文本等>.添加节点的属性.加入到文档中) jQuery创建元素节点的方法: 创建元 ...

  2. JS获取与遍历节点的兄弟父级

    发布:脚本学堂/JavaScript  编辑:JB01   2014-01-23 15:40:11  [大 中 小] 介绍下js获取节点的兄弟.父级与子元素的方法,学习下js遍历节点的操作方法,有需要 ...

  3. 关于each()、find()、filter()遍历节点的操作方法

    关于each().find().filter()遍历节点的操作方法 each语法: each(fn)  ; 返回值:jQuery fn:代表对于每个匹配元素所要执行的函数 each()方法共有三种形式 ...

  4. jQuery_DOM学习之------clone()

    jQuery_DOM学习之------clone() clone()---节点克隆: 方法: 1.clone()只克隆结构,事件将被丢弃 2.clone(true)结构和事件都将被克隆 例子: < ...

  5. jq的遍历节点

    1.child()方法 该方法用于取得匹配元素的子元素集合 2.next() 该方法用于取得匹配元素后面紧邻的同辈元素, 3.prev() 该方法用于取得匹配元素前面紧邻的同辈元素 4.sibling ...

  6. mysql7笔记----遍历节点所有子节点

    mysql遍历节点的所有子节点 DELIMITER // CREATE FUNCTION `getChildrenList`(rootId INT) ) BEGIN ); ); SET sTemp = ...

  7. jaxp的dom方式操作（查找、添加、修改、删除、遍历节点）

    package cn.itcast.jaxptest; import java.io.IOException; import javax.xml.parsers.DocumentBuilder;imp ...

  8. [ActionScript 3.0] as3处理xml的功能和遍历节点

    as3比as2处理xml的功能增强了N倍,获取或遍历节点非常之方便,类似于json对像的处理方式. XML 的一个强大功能是它能够通过文本字符的线性字符串提供复杂的嵌套数据.将数据加载到 XML 对象 ...

  9. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

随机推荐

  1. spring jar包

    org.springframework.aop- 3.0.0.RELEASE--------------------Spring的面向切面编程,提供AOP(面向切面编程)实现 org.springfr ...

  2. Divide Sum 比赛时竟然想不出。。。。。。。

    Divide Sum Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitSt ...

  3. S2_SQL_第四章

    1.使用EXISTS语句判断该数据库对象是否存在的语法: DROP TABLE IF EXISTS temp; 2. EXISTS作为WHERE语句的子查询: SELECT <字段>FRO ...

  4. 笨鸟先飞之ASP.NET MVC系列之过滤器(02授权过滤器)

    授权过滤器 概念介绍 在之前的文章中我们已经带大家简单的了解了下过滤器,本次我们开始介绍授权过滤器. 我们之前提到过授权过滤器在认证过滤器之后,其他过滤器和方法被调用之前运行,而授权过滤器和它名字的含 ...

  5. python---os模块使用详解

    os模块调用操作系统接口的模块 相关方法或属性: getcwd() --- 获取当前的操作目录,等同于linux中的pwd命令. 调用:os.getcwd() chdir() --- 改变python ...

  6. Angular JS中的路由

      前  言            本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页We ...

  7. 实现径向变换用于样本增强《Training Neural Networks with Very Little Data-A Draft》

    背景: 做大规模机器学习算法,特别是神经网络最怕什么--没有数据!!没有数据意味着,机器学不会,人工不智能!通常使用样本增强来扩充数据一直都是解决这个问题的一个好方法. 最近的一篇论文<Trai ...

  8. 初学者易上手的SSH-struts2 01环境搭建

    首先,SSH不是一个框架,而是多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框 ...

  9. Sql Server 数据库中调用dll文件

    1.首先新建一个空的解决方案,并添加一个类库,代码如下,编译并生产dll using System; using System.Collections.Generic; using System.Da ...

  10. C# 使用Parallel并行开发Parallel.For、Parallel.Foreach实例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...