文档章节

jQuery常用的查找Dom元素方法

CodingNew
 CodingNew
发布于 2016/06/22 00:01
字数 551
阅读 1
收藏 0

废话不多说,先来个总结,然后下面是demo

一. 同级节点之间的检索(检索深度N=0)

next()是在兄弟节点中,往后匹配;

prev()是在兄弟节点中,往前匹配。

 

二. 父级/子级节点的检索(检索深度N=1)

children()是在子节点中,往后匹配。

parent()是在父节点中,往前匹配。

ps:请注意了---子节点和父节点都是相邻的,深度为1的节点,也就是标题提到的检索深度为1

 

三. 后代节点的检索(检索深度N>=1)

find()检索的是子代元素和后代元素,不会检索兄弟节点。

parents() 检索的是祖辈元素(包括父元素)的集合。

closest()检索的是最近的祖辈元素(一个)

ps:当往上级检索节点的时候,推荐使用closet,效率更高!

 

四. demo

HTML代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body>
<div class="out" id="t1">
    <div class="level1" id="t2">
        <span class="title1" id="t3"></span><span class="title2" id="t4"></span>
    </div>
    <ul class="menu" id="t6">
        <li class="item1" id="t7"></li>
        <span class="item2" id="t8"></span>
        <li class="item3" id="t9"></li>
    </ul>

    <div class="level1" id="t10">
        <span class="title1" id="t11"></span><span class="title2" id="t12"></span>
    </div>
    <ul class="menu" id="t14">
        <span class="item1" id="t15"></span>
        <li class="item2" id="t16"></li>
        <span class="item3" id="t17"></span>
    </ul>
</div>
</body>
</html>

 

JS测试代码如下:

<script type="text/javascript" src="../js/lib/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            testNext();
            testChildren();
            testFind();
            testPre();
            testParent();
        });

        //测试next。
        function testNext() {
            var $result = $(".level1").next("ul");
            console.info(getTagsInfo($result)); //结果是:["UL#t6", "UL#t14"]
        }

        //测试Children
        function testChildren() {
            var $result = $(".level1").children("span");
            console.info(getTagsInfo($result));//结果是:["SPAN#t3", "SPAN#t4", "SPAN#t11", "SPAN#t12"]
        }

        //测试Find
        function testFind() {
            var $result = $(".out").find("span");
            console.info(getTagsInfo($result));//结果是: ["SPAN#t3", "SPAN#t4", "SPAN#t8", "SPAN#t11", "SPAN#t12", "SPAN#t15", "SPAN#t17"]
        }

        //pre是next的方面,检索的是同级元素。
        function testPre() {
            var $result = $("#t12").prev("span");
            console.info(getTagsInfo($result));//结果是:["SPAN#t11"]
        }

        //parent是和children相对的,检索的上一级别的父元素
        function testParent() {
            var $result = $(".title1").parent("div");
            console.info(getTagsInfo($result));//结果是:["DIV#t2", "DIV#t10"]
        }

        //输出匹配到的元素的id
        function getTagsInfo($doms) {
            return $doms.map(function () {
                return this.nodeName + "#" + this.id;
            }).get();
        }
    </script>

相关源代码:http://yunpan.cn/c3eL2PdJiqMZ3  访问密码 47eb

本文转载自:http://www.cnblogs.com/LiuChunfu/p/5042851.html

CodingNew
粉丝 2
博文 76
码字总数 0
作品 0
成都
私信 提问
DOM对象与JQuery包装集

1.DOM对象与JQuery包装集 1.通过document.getElementById(),document.getElementsByName()等取的就是DOM对象或DOM对象集,前者取的是对象,后者取得DOM对象集 var text11dom=document.getEl...

jc56448903
2012/12/07
113
0
jQuery知识总结之DOM操作

本篇文章主要总结一下jQuery中DOM节点的创建、插入、删除与替换以及jQuery中丰富的遍历节点的方法。 jQueryDOM操作之节点创建与属性的处理 JavaScript原生接口创建节点,在处理上是非常复杂与...

03/23
0
0
jQuery常用知识点总结以及平时封装常用函数

jquery效果 隐藏/显示: 淡入/淡出: 滑动:slideDown/slideUp(speed,callback) 动画: jQuery DOM 获取文本值、属性值: js代码: 设置文本属性值: js代码: 添加元素: 删除元素: 查找元...

heartless01
2017/10/31
17
0
Java程序员从笨鸟到菜鸟之(八十六)跟我学jquery(二)大话jquery选择器

本篇博客我将带大家来学习一下jquery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquer...

长平狐
2012/11/12
185
1
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

32位与64位Linux系统下各类型长度对比

64 位的优点:64 位的应用程序可以直接访问 4EB 的内存和文件大小最大达到4 EB(2 的 63 次幂);可以访问大型数据库。本文介绍的是64位下C语言开发程序注意事项。 1. 32 位和 64 位C数据类型...

mskk
24分钟前
6
0
Vue 实现点击空白处隐藏某节点(三种方式:指令、普通、遮罩)

在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide。 针对此需求,整理了三种实现方式,大家按实际情况选择。 当然,我们做项目肯定会用到 UI 框架,常...

张兴华ZHero
30分钟前
7
0
SpringBoot激活profiles你知道几种方式?

多环境是最常见的配置隔离方式之一,可以根据不同的运行环境提供不同的配置信息来应对不同的业务场景,在SpringBoot内支持了多种配置隔离的方式,可以激活单个或者多个配置文件。 激活Profi...

恒宇少年
32分钟前
7
0
PDF修改文字的方法有哪些?怎么修改PDF文件中的文字

PDF修改文字一直以来都是一个难以解决的问题,很多的办公族在办公的时候会有修改PDF文件中的文字的需要,可是PDF文件一般是不能进行编辑和修改的,难道就没有什么办法解决这个问题了嘛?不要...

趣味办公社
35分钟前
5
0
企业组织中采用服务网格的挑战

作者:Christian Posta 译者:罗广明 原文:https://blog.christianposta.com/challenges-of-adopting-service-mesh-in-enterprise-organizations/ 编者按 本文作者介绍了企业组织采用服务网...

jimmysong
44分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部