jquery常用的元素获取方式

最新推荐文章于 2024-07-19 03:18:56 发布

peppacatt

最新推荐文章于 2024-07-19 03:18:56 发布

阅读量834

点赞数

分类专栏：前端文章标签： jquery dom

本文链接：https://blog.csdn.net/weixin_46349544/article/details/118356475

版权

前端专栏收录该内容

8 篇文章 4 订阅

订阅专栏

1.子元素和后代元素:find和children

区别:
children函数只获取其满足条件的第一层子节点
find函数则获取所有下级子节点

<div id="mydiv">
    <p id="pid"></p>
    <span class="aspan">hello</span>
    <div>
        <a id="aid"></a>
        <span class="aspan">test</span>
    </div>
</div>

js代码如下：
var obj = $("#mydiv");
//获取到obj元素下的 div标签下的样式为aspan下的元素
var child = obj.find("div .aspan");
alert(child.html());

children方法
obj.children() 获取obj的第一层所有子节点
obj.children("span") 获取obj的第一层所有标签为span子节点
obj.children("a") 返回为空，因为a标签不是obj的直接子节点，这时应该用find方法

2.父元素

$(selector).parent(filter)方法返回被选元素的直接父元素。
$(selector).parents(filter)

parents() 方法返回被选元素的所有祖先元素。

祖先是父、祖父、曾祖父，依此类推。

DOM 树：该方法从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径（<html>）。

注意：如果 filter 参数为空，该方法将从直接父元素直至 <body> 和 <html> 的所有路径中选取元素集合中的所有祖先。因此传递一个缩小搜索结果范围的选择器表达式是非常有用的。

该方法与 closest() 都是向上遍历 DOM 树，不同点是：

parents()
从父元素开始
沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先
返回包含零个、一个或多个元素的 jQuery 对象

closest()
从当前元素开始
沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个祖先
返回包含零个或一个元素的 jQuery 对象

parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
可以看出parent取的很明确，就是当前元素的父元素；parents则是当前元素的祖先元素。下面列出例子说明：
<div id='div1'>
<div id='div2'><p></p></div>
<div id='div3' class='a'><p></p></div>
<div id='div4'><p></p></div>
</div>

$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1，这点比较奇特；不过Jquery对象本身的特点决定了这是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3

3.兄弟元素

$('#id').siblings() 当前元素所有的兄弟节点

$('#id').prev() 当前元素前一个兄弟节点

$('#id').prevaAll() 当前元素之前所有的兄弟节点

$('#id').next() 当前元素之后第一个兄弟节点

$('#id').nextAll() 当前元素之后所有的兄弟节点

这三个方法都可以添加选择器，给出选择条件，就能找到你指定的兄弟节点了。

4.eq(x)

eq() 方法返回带有被选元素的指定索引号的元素。

索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。

            <div id="coborrower_div" style="background-color:palegreen">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <span style="margin-left: 25px;">借款人姓名:
                            <b>滴滴滴</b>
                        </span>

                        <span style="margin-left: 50px;">性别:
                            <b>中</b>
                        </span>

                        <span style="margin-left: 50px;">联系电话:
                            <b>99999999999</b>
                        </span>

                        <span style="margin-left: 50px;">身份证号:
                            <b>999999999999999999</b>
                        </span>
                    </div>

                    <button onclick="deleteCoborrower(this)" type="button"
                        class="deleteCb_btn layui-btn layui-btn-sm layui-btn-danger" style="margin-left: 60px;">
                        <i class="layui-icon">&#xe640;</i>删除该条
                    </button>
                </div>
            </div>



    function deleteCoborrower(thisT) {
        let temp = {}
        let name = $(thisT).prev().find("b").eq(0).html().trim()
        let gender = $(thisT).prev().find("b").eq(1).html().trim()
        let tel = $(thisT).prev().find("b").eq(2).html().trim()
        let idCard = $(thisT).prev().find("b").eq(3).html().trim()
        $(thisT).parent("div").remove()
        .....................
    }

peppacatt

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery常用的元素获取方式

1.子元素和后代元素选择器:find和children区别:children函数只获取其满足条件的第一层子节点find函数则获取所有下级子节点<div id="mydiv"> <p id="pid"></p> <span class="aspan">hello</span> <div> <a id="aid"></a> <span class=
复制链接

扫一扫

专栏目录