一、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. 一个“.java”文件中是否可以包含多个类（不是内部类）？有什么限制？

    可以,若这个类的修饰符是public则,其类名须与文件名相同.

  2. Python-MongoDB的驱动安装、升级

    安装pip,并通过此来安装pymongo–Python mongodb驱动 1.下载pip安装包,下载地址:http://pypi.python.org/packages/source/p/pip/p ...

  3. PHP,Mysql根据经纬度计算距离并排序

    网上给出的计算公式是这样的: Lng1表示A点纬度和经度,Lat2 Lng2 表示B点纬度和经度 a = Lat1 – Lat2为两点纬度之差 b = Lng1 -Lng2 为两点经度之差 6378. ...

  4. vuejs2-生命周期

    https://segmentfault.com/a/1190000008879966 1 声明周期图示 2 过渡

  5. zoj3204 connect them 最小生成树 暴力

    Connect them Time Limit: 1 Second      Memory Limit:32768 KB You have n computers numbered from 1 to ...

  6. memcached讲解

    Memcached 最近空闲的是时候研究了一下缓存,根据公司环境对缓存进行了系统的了解,我们使用memcacheed进行缓存,下面结合我的 理解,以及网上的相关资料,memecached进行讲解. m ...

  7. [Python]Codecombat攻略之远边的森林Forest(1-40关）

    首页:https://cn.codecombat.com/play语言:Python 第二界面:远边的森林Forest(40关)时间:2-6小时内容:if/else.关系操作符.对象属性.处理输入网页 ...

  8. Mac使用nginx+rtmp服务器

    一.安装Homebrow 已经安装了brow的可以直接跳过这一步.执行命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/H ...

  9. 前端笔记----jquery入门知识点总结

    一.jquery的加载方法 $(document).ready(function(){js代码}); $(function(){js代码});(一般使用这个); 注意点1:使用jquery必须先导入函 ...

  10. javaScript 设计模式系列之四：组合模式

    介绍 组合模式(Composite Pattern):组合多个对象形成树形结构以表示具有"整体-部分"关系的层次结构.组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用 ...