一、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. poj1067威佐夫博奕

    取石子游戏 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 31490   Accepted: 10374 Descripti ...

  2. FastDFS 分布式文件系统的安装与使用

    跟踪服务器:192.168.152.129 (centos1) 存储服务器:192.168.152.130 (centos2) 环境:CentOS 6.6 用户:root 数据目录:/fastdfs ...

  3. Java历程-初学篇 Day07 循环结构2 for循环

    一,格式 for(赋值语句//为循环变量赋初值;条件语句//循环结构的循环条件;赋值语句//迭代,修改循环变量的值){ //循环体; } 二,简单举例 for(int i=1;i<=10;i++ ...

  4. Python自学笔记-面向对象编程（Mr seven）

    类的成员可以分为三大类:字段.方法和属性. 一.字段 字段包括:普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同, 普通字段属于对象 静态字段属于类 二.方法 方法 ...

  5. spring <context:annotation-config> 跟 <context:component-scan>诠释及区别

    <context:annotation-config> 和 <context:component-scan>的区别 Difference between <context ...

  6. javascript数组的常用方法总结

    http://jingyan.baidu.com/album/86fae346bce16d3c49121af9.html?picindex=1 1. concat()方法 数组和数组的 粘结: var ...

  7. Android 性能测试之方向与框架篇

    假期结束,你的状态有没有回归?那么,放空脑袋后,先来学习学习,欢迎大家继续关注腾讯云技术社区. 作者:李帅 导语 借项目的开发周期,把思考了一段时间的场景化性能测试框架搭建起来,包括 耗电性能测试.内 ...

  8. asp.net mvc5中使用缓存依赖SqlCacheDependency

    缓存是用来提高应用性能,降低服务器压力.适用于数据不易变,数据易通用的情景, 对于动态查询数据,例如数据分析,最好放弃使用缓存.使用缓存最麻烦的就是保持源数据和缓存的中的数据一致. 缓存(Cache) ...

  9. win10 uwp 验证输入 自定义用户控件

    TextBox是给用户输入,我们有时要用户只输入数字,而用户输入汉字,我们就有提示用户,那么这东西用到次数很多,我们需要做成一个控件. 我们可以用别人的库,我找到一个大神写的库,很好用 我们使用这个库 ...

  10. PHP 页面静态化/纯静态化/伪静态化

    个人博客迁移至独立博客:https://blog.plcent.com/,欢迎大家访问 概念 PHP静态化分为:纯静态化 和 伪静态化:纯静态化又分为:局部静态化 和 完全静态化 纯静态化:是把PHP ...