一、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. 三分钟浅谈TT猫的前端优化

    首先看一张访问TT猫首页的截图: 测试环境为谷歌浏览器,暂且不讨论其它浏览器,截图下方我们可以观察到以下参数: DOMContentLoaded:1.42s | Load:2.31s 以上参数是在CT ...

  2. 实现mysql在windows server 2008下自动备份

    环境:MySQL   安装位置:D:\MySQL论坛数据库名称为:Db_Test数据库备份目的地:D:\db_bak\ 1.首先新建一个bat文件 rem ********************** ...

  3. 用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面（1）

    用$.getJSON() 和$.post()获取第三方数据做页面 首页 index.html 页面 需要jquery  和 template-web  js文件   可以直接在官网下载 中间导航条的固 ...

  4. python装饰器 & flask 通过装饰器 实现 单点登录验证

    首先介绍装饰器,以下是一段标注了特殊输出的代码.用于帮助理解装饰器的调用过程. import time def Decorator_one(arg1): info = "\033[1;31; ...

  5. 第九章 MySQL中LIMIT和NOT IN案例

    第九章 MySQL中LIMIT和NOT IN案例 一.案例的项目 1.创建数据库语句: #创建数据库 CREATE DATABASE `schoolDB`; USE `schoolDB`; #创建学生 ...

  6. oracle状态

    Oracle_四种状态 oracle四种状态 1.shutdown(完全关闭) 2.nomount(未加载) 3.mount(已加载) 4.open(完全打开) Shutdown状态 Shutdown ...

  7. 浅谈python 复制（深拷贝，浅拷贝）

    博客参考:点击这里 python中对象的复制以及浅拷贝,深拷贝是存在差异的,这儿我们主要以可变变量来演示,不可变变量则不存在赋值/拷贝上的问题(下文会有解释),具体差异如下文所示 1.赋值: a=[1 ...

  8. uva11584

    将课本上所述方法实现即可,代码如下: /* * Author: Bingo * Created Time: 2015/1/25 23:49:49 * File Name: uva11584.cpp * ...

  9. spring框架应用系列一：annotation-config自动装配

    本文系作者原创,转载请注明出处:http://www.cnblogs.com/further-further-further/p/7716678.html 解决问题 通过spring XML配置文件, ...

  10. Amaze UI 是一个移动优先的跨屏前端框架。 http://amazeui.org/

    http://amazeui.org/ Amaze UI 是一个移动优先的跨屏前端框架.... Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适 ...