jquery获取子元素的一些方法

最新推荐文章于 2023-05-24 20:36:29 发布
最新推荐文章于 2023-05-24 20:36:29 发布
阅读量3.3w 收藏 9
点赞数 3
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LPLIFE/article/details/80600123
版权

强制打酱油,不学习会使人落后

jquery获取子元素的一些方法

1.通过id,class等选择器

2.通过父元素进行find查找

3.通过父元素的children进行查找

注意:find和children的区别,代码已给出详细解释,想要真正理解,还是得靠代码.光看不练那都是纸上谈兵

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>jQuery获取子元素的一些方法</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script>
            $(function() {
                /* 1. 常用的 通过id,class选择器*/
                /* 
                 * 2. 使用遍历的方法,通过find,find会跨越层级查找,一直找到
                 * 没有为止,但是children只会查找直接子元素
                 * */
                $("button").on("click", function() {
                    var str = $(".div1").find("p").eq(0).html(); /*这里取到的是 <p>我是间接的p元素</p>*/
                    $(".s1").html(str);
                    /*
                     * 通过children,下标从0开始,是取直接子元素,间接元素并不会遍历,
                     * 也就是div1中的第一个p元素是间接子元素,并不会遍历到
                     * */
                    var str2 = $(".div1").children("p").eq(0).html(); /*这里取到的是 <p>上海<p/>*/
                    $(".s2").html(str2);
                })

            })
        </script>
    </head>

    <body>
        <div class="div1">
            <div>
                <p>我是间接的p元素</p>
            </div>
            <p>1.上海</p>
            <p>2.广州</p>
            <p>3.北京</p>
            <p>4.深圳</p>
            <p>5.中山</p>
            <hr />
            <span class="s1"></span><br/>
            <span class="s2"></span><br/>
            <span class="s3"></span><br/>
            <button>确定</button>
        </div>
    </body>

</html>

如下图:



LPLIFE
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery获取节点和子节点文本的方法
01-19
对于下面的html片段， <div id=text_test>test text<a>techbrood co.</a></div> 获取节点纯文本： var text = $('#text_test').text() 这个会得到“test text techbrood co.”，也就是会把当前元素的所有节点（包含子节点）的文本读取出来。 如果只想获取主节点的文本，方法复杂点： var text = $(#text_test).contents().filter(function() {
jQuery如何获取子元素
张志勇的博客
09-23 4254
jQuery获取子元素的方式有两种：find()和children()，但二者有差异，下面看看二者的差异： 1.children()方法：获取该元素下的直接子集元素 2.find()方法：获取该元素下的所有子集元素 <ul id="ul"> <li> list1 <ul> ...
jQuery获取this当前对象子元素对象的方法
12-29
如下所示： <select id=city> <option value=beijing>北京</option> <option value=shanghai>上海</option> <option value=shenzhen>深圳</option> </select> $(function(){ $(#city).change(function(){ ①// 已获取select为当前this元素 }) }) 如果想要在①获取选中option的值可以有如下方法 $(#city option:selected).val(); //
jQuery搜索子元素的方法
12-10
本文实例讲述了jQuery搜索子元素的方法。分享给大家供大家参考。具体分析如下： 1. children()方法 用于获取一个包含匹配的元素集合中每一个元素的所有子元素的元素集合，语法格式如下： 代码如下:children([selector]) $(“#menu_ul”).children().css(“color”, “blue”); 2. find()方法 用于从每个匹配元素中查找符合指定选择器表达式的后代元素，格式如下： 代码如下:find([selector]) $(“ul”).find(“span”).css(“color”, “blue”);//将ul元素下的span元素的文
Jquery实现获取子元素的方法分析
01-19
本文实例讲述了Jquery实现获取子元素的方法。分享给大家供大家参考，具体如下： Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。 1.children()方法：获取该元素下的直接子集元素 2.find()方法：获取该元素下的所有子集元素 分别以以下HTML代码为例： <ul> <li> list1 <ul> <li> list1-1 </li> <li> list1-2 </li> </ul>
JQuery学习笔记
墨笙弘一
02-18 611
一.jquery的优势 1.轻量级。采用了UglifyJS进行压缩，大小保持在30KB左右 2.强大的选择器。 3.出色的DOM操作的封装。 4.可靠的事件处理机制。 5.完善的AJAX。JQuery将所有的AJAX操作封装到了一个函数.ajax()中。6.不污染顶级变量。JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名.ajax()中。 6.不污
jQuery基础系列
weixin_33915554的博客
04-22 192
$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); 复制代码 jQuery 入口函数: $(document).ready(function(){ // 执行代码 }); 或者 $(function(){ // 执行代码 }); JavaScript 入...
jQuery基础
cqq00的博客
08-15 899
jQuery基础学习包括注入，jQuery选择器，jQuery事件处理，元素操作对节点的获取增加修改等等，以及简单的动画效果
jQuery中动态操作元素（新增，移除，判断一个元素是否有子元素）的方法
SunPeng的博客
10-31 733
jQuery中动态创建添加元素的方法
JS JQuery获取当前元素的上一个下一个兄弟级元素等元素的方法
热门推荐
qq_39479350的博客
04-18 2万+
jQuery.parent(expr)，找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")jQuery.parents(expr)，类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点，不会返回...
jquery 同级元素下的子元素_jQuery获取所有父级元素及同级元素及子元素实例详解...
weixin_39798943的博客
12-20 291
本文主要介绍了jQuery获取所有父级元素及同级元素及子元素的方法，本文给大家介绍的非常详细，具有参考借鉴价值 ,需要的朋友可以参考下，希望能帮助到大家。1.获取父级元素$("#id").parent()获取其父级元素$("#id").parents()获取其所有的祖先元素$("#id").closest()获取其最近的祖先元素，依次上溯------------------------------...
jquery遍历多个li_21个jQuery遍历节点方法详解
weixin_39912163的博客
12-19 550
本篇教程介绍了21个jQuery遍历节点方法详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。<1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点1Hello23HelloAgain4您好!56AndAgain789$('div').children();...
jQuery元素操作【重点】
世界和我们都不该止步于此
04-18 451
目录 一.jQuery遍历元素操作 二.jQuery遍历对象操作 三.创建元素 1.内部添加子元素 2.外部添加兄弟元素 四.删除元素 一.jQuery遍历元素操作 我们知道jQuery隐式迭代非常的方便，对同一类元素做出了相同的操作，如果想要给同一类元素做不同的操作的话，那么就需要用到遍历 $('element').each(function(index,$(documentElement)){xxx}) //回调函数中有俩个参数，分别为每个元素的索引号以及每个DOM元素对象..
jquery选择器 之 获取父级元素、同级元素、子元素
weixin_30247307的博客
12-15 660
一、获取父级元素 1、parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> ...
jquery选择器(2)
最新发布
qq_45466959的博客
05-24 906
​ 在程序开发中，无论是操作DOM还是为元素添加事件，都需要先获取到指定元素。为此，jQuery提供了选择器，通过选择器可以获取元素并对元素进行操作。​ 通过css选器获取元素的方式是非常灵活的，但是css选择器获取元素后只能操作该元素的样式，要想为元素添加行为(如处理单击事件)，还需要通过 JavaScript代码来实现。为此，jQuery模仿css选择器实现了 jQuery选择器，通过 jQuery选择器来获取元素，不仅让获取元素的方式更加多样化，而且可以在获取元素后为元素添加行为。
jquery 获取子元素
05-19
可以使用 jQuery 的 `children()` 方法来获取元素的直接子元素，例如： ```html <div class="parent"> <div class="child">Child 1</div> <div class="child">Child 2</div> <div class="child">Child 3</div> </div> ``` ```javascript // 获取 .parent 元素的所有直接子元素 $('.parent').children(); ``` 这将返回一个包含所有直接子元素的 jQuery 对象，即 `$('.child')`。如果你只想选择某个特定的子元素，可以给 `children()` 方法传递一个选择器参数，例如： ```javascript // 获取 .parent 元素中类名为 .child 的第一个子元素 $('.parent').children('.child:first-child'); ``` 这将返回 `.parent` 元素中类名为 `.child` 的第一个子元素，即 `$('.child:first-child')`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值