jQuery_03(筛选&文档处理)

清晨喂

已于 2022-03-20 03:31:29 修改

阅读量61

点赞数 1

文章标签： javascript

于 2022-03-19 23:46:59 首次发布

本文链接：https://blog.csdn.net/m0_63772104/article/details/123605421

版权

筛选

一.筛选-过滤
1.first()：获取匹配的第一个元素

    console.log($("li").first());
    console.log($("li:first"));

2.last()：获得匹配的最后一个元素

    console.log($("li").last());
    console.log($("li:last"));

3.eq(N)：获取匹配的第N或-N个元素

// eq(N) 找到指定的某一个元素，例如第3个
   $("#oul>li").eq(3).css("border","1px solid pink");

4.filter(selector)：筛选出与指定表达式匹配的元素集合

//--过滤出指定表达式匹配的元素集合
                // 找到属性title为a的元素
                    $("#oul>li").filter("[title = a]").css("background","pink");

5.has(selector)：筛选出包含特定特点的元素的集合

// 筛选出有<span>标签的元素集合
 $("#oul>li").has("span").css("background","pink");

6.not(selector)：筛选出不包含特定特点的元素的集合

// 筛选出没有title属性的元素集合
     $("#oul>li").not("[title]").css("background","pink");

二.筛选-查看
1.children()：子标签中找

//拿出ul里面的aa子元素
    console.log($("ul").children(".aa"));

2.find()：后代标签中找

//拿出ul里面的p标签（孙子  后代）
    console.log($("ul").find("p"));

3.parent()：父标签

  //拿父元素
    console.log($(".aa").parent());

4.prevAll()：前面所有的兄弟标签

 // 查找第三个li标签前面所有的兄弟标签
                $("#oul").children().eq(3).prevAll().css("background","gray");

5.nextAll()：后面所有的兄弟标签

 // 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
                $("#oul").children().eq(3).nextAll().css("background","gray");

6.siblings()：前后所有的兄弟标签

// 查找第三个li标签所有的兄弟标签
				$("#oul").children().eq(3).siblings().css("background","gray");

文档处理

一.增
1.内部插入
append()：将内容添加到指定的元素后面
appendTo()：和append()颠倒
prepend()：将内容添加到指定元素前面
prependTo():和prepend()颠倒
2.外部插入：
after()：在匹配元素之后插入内容
before()：在匹配元素之前插入内容
二.删
1.empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）

2.remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）
使用remove()删除案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<table border>
    <tr>
        <td>fdsfasfasfjkash</td>
        <td>fdsfasfasfjkash</td>
        <td>fdsfasfasfjkash</td>
        <td>fdsfasfasfjkash</td>
        <td>
            <p>
                <button onclick="$(this).parents('tr').remove()">删除</button>
            </p>
        </td>
    </tr>
    <tr>
        <td>fdsfasfasfjkash</td>
        <td>fdsfasfasfjkash</td>
        <td>fdsfasfasfjkash</td>
        <td>fdsfasfasfjkash</td>
        <td>
            <p>
                <button onclick="this.parentElement.parentElement.outerHTML=''">删除</button>
            </p>
        </td>
    </tr>
</table>
</body>
</html>

三.改
replaceWith()：将所有匹配的元素替换成指定的内容把li下面所有的span标签替换为标签

//改				
//把li下面所有的span标签替换为<a>标签
$("#oDiv").find('span').css("background","yellow").replaceWith("<a href='#'>超链接</a>");

以上就是本期的全部内容，下期见

清晨喂

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_03(筛选&文档处理)

筛选一.筛选-过滤1.first()：获取匹配的第一个元素 console.log($("li").first()); console.log($("li:first"));2.last()：获得匹配的最后一个元素 console.log($("li").last()); console.log($("li:last"));3.eq(N)：获取匹配的第N或-N个元素// eq(N) 找到指定的某一个元素，例如第3个 $("#oul>li").eq(3
复制链接

扫一扫