使用jQuery查找元素的方法

比眉伴天荒 2022-07-14 05:12 337阅读 0赞

在这里大概列出几种用于查找元素的方法。

先给出文档的大概内容：

<body>
    <div class="c1">
    <p class="p1">欢迎到来</p>
    <p>Welcome</p>
    <p class="p1">欢迎到来</p>
    <p>Welcome</p>
    <p>欢迎到来</p>
    <p>Welcome</p>
    <p>欢迎到来</p>
    <p>Welcome</p>
    </div>
    </body>

1.利用find()的方法，根据当前集合及其后代的上下文创建一个新的元素包装器集。

$(document).ready(function(){
     alert($("div").find("p").length);
    });

这里我们说一下关于find()与filter()的方法。find()是根据当前的DOM元素及其子元素的上下文创建新的元素集。将操作当前集合的子元素，例如以上的代码中在<div>下的<p>元素,我们使用的是find()方法。

但是如果我们只想操作当前的元素集，那么我们就可以使用filter()方法，它只是过滤当前包装集的元素。例如：

<script src="/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
    $(document).ready(function(){
     alert($("p").filter(".p1").text());
    });
    </script>
    
    
    
       
        欢迎到来 Welcome 欢迎到来 Welcome 欢迎到来 Welcome 欢迎到来 Welcome

2.利用children()返回被选元素的所有直接的子元素，不过这个方法是可以进行过滤的，从子元素中查询特定的元素。

$(document).ready(function(){
     alert($("div").children("p").length);
    });

3.同时还可以利用以下的方法

$(document).ready(function(){
     alert($("p","div").length);
    });

$(document).ready(function(){
     alert($("p",$("div")).length);
    });

$(document).ready(function(){
     alert($("div p").length);
    });

4.用:eq()索引自定义选择器第2个<p>元素，但是由于索引是从0开始的，所以第二个相当于p:eq(1);

$(document).ready(function(){
     alert($("p:eq(1)",$("div")).text());
    });

以上只是大概地列出来，还不完全，有兴趣的话可以自己总结一下哦。

发表评论取消回复

表情：

评论列表（有 0 条评论，337人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery基础2 —— 元素查找与事件

写在前面 > jQuery可以进行链式操作，但最多3-4个链，尽量避免多链 $("ul").css().attr().addClass(); $("ul

淩亂°似流年/ 2023年08月17日 16:07/ 0 赞/ 124 阅读

相关 jQuery-jQuery对象的查找

children():查找子元素 find():查找后代元素 parent():查找父元素 prevAll():查找某元素前面的所有元素 siblings():

太过爱你忘了你带给我的痛/ 2022年12月02日 12:26/ 0 赞/ 152 阅读

相关 jQuery：按文本查找元素

本文翻译自：[jQuery: find element by text][jQuery_ find element by text] Can anyone tell me i

短命女/ 2022年11月29日 05:35/ 0 赞/ 201 阅读

相关 JQuery中的遍历-元素查找

JQuery遍历概念 jQuery 遍历，可以理解为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。废话不多说先上方法 <table

╰半夏微凉°/ 2022年11月26日 15:58/ 0 赞/ 207 阅读

相关 jQuery中常用的元素查找方法总结

[https://www.cnblogs.com/songjn/p/8889747.html][https_www.cnblogs.com_songjn_p_8889747.

水深无声/ 2022年11月26日 14:00/ 0 赞/ 145 阅读

相关 jquery使用each方法遍历元素

<!DOCTYPE html> <html> <meta charset="UTF-8"> <head> <

港控/mmm°/ 2022年08月12日 01:07/ 0 赞/ 212 阅读

相关使用jQuery查找元素的方法

在这里大概列出几种用于查找元素的方法。先给出文档的大概内容： <body> <div class="c1"> <p class="p1">欢迎到来

比眉伴天荒/ 2022年07月14日 05:12/ 0 赞/ 338 阅读

相关 jQuery常用的元素查找方法大全

jQuery常用的元素查找方法大全 $("\myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myE

た入场券/ 2022年06月17日 08:41/ 0 赞/ 227 阅读

相关 JQuery为元素扩展方法

> 作者：西岭老湿 -------------------- 问题及效果: 想实现商城购物车中全选与反选功能，发现jq中并没有提供相应功能；类似这种jq中没有的功

╰+哭是因爲堅強的太久メ/ 2022年05月18日 02:51/ 0 赞/ 236 阅读

相关 selenium 查找元素方法的总结

一次查找多个元素 find_element_by_id find_element_by_name find_element_by_xpath

迷南。/ 2021年09月13日 23:48/ 0 赞/ 349 阅读