jQuery3

最新推荐文章于 2024-05-15 20:34:42 发布

陈峰806

最新推荐文章于 2024-05-15 20:34:42 发布

阅读量1.2k

点赞数 1

文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_65768991/article/details/123625578

版权

jQuery3(筛选&&文档处理

筛选：
- 过滤
- 查找：
文档处理：

筛选：

过滤

first() :获取匹配的第一个元素
last():获得匹配的最后- -个元素
eq(N) :获取匹配的第N或-N个元素
filter(selector) :筛选出与指定表达式匹配的元素集合
has(selector) :筛选出包含特定特点的元素的集合
not(selector) :筛选出不包含特定特点的元素的集合

查找：

children() :子标签中找
find() :后代标签中找
parent() :父标签
prevAll() :前面所有的兄弟标签
nextAII() :后面所有的兄弟标签
siblings() :前后所有的兄弟标签

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li class="aa">哈哈哈</li>
    <li class="aa">哈哈哈</li>
    <li>哈哈哈</li>
    <li><p class="bb">哈哈</p></li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
</ul>
<script src="js/jquery-3.5.1.js"></script>
<script>

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

    // gt 大于
    // lt 小于

    console.log($("li").eq(0)); //$对象
    console.log($("li").get(0)); //js对象

    //只要aa的li
    console.log($("li").filter(".aa"));

    //只要p标签的父元素li
    // has 判断子元素
    $("li").has("p")
    console.log($("li").has(".bb"));

    $("li").not(".aa")

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

    //那父元素
    console.log($(".aa").parent());
    //通过一个按钮删除一个行
    console.log($(".aa").parents("body"));
</script>

</body>
</html>

文档处理：

增

内部插入

后面
append() :将内容添加到指定的元素后面
appendTo():和append()颠倒
前面
prepend() :将内容添加到指定元素前面
prependTo():和prepend()颠倒

    $("p").append(j) //后面

    $("p").prepend(j.get(0).cloneNode(true)) //前面

外部插入

after0 :在匹配元素之后插入内容
before0 :在匹配元素之前插入内容

内部插入
插入到最后面(给ul中最后-个Ii中插入- -个a)
插入到最后面(给ul中最后一-个Ii中插入- 个a)，使用appendTo()
插入到最前面(给uI中第一个Ii中插入- 个a)
插入到最前面(给u|中第一-个Ii中插入- 一个a),使用prependTo

外部插入
在属性title为b前面添加一个li
在属性title为b后面添加一个li

册

empty() :删除匹配的元素集合中所有的子节点(不包含匹配的元素)
remove() :删除匹配的元素集合中所有的子节点(包含匹配的元素)

改

replaceWith():将所有匹配的元素替换成指定的内容

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            border: 10px solid red;
        }
    </style>
</head>
<body>
<p></p>
<script src="js/jquery-3.5.1.js"></script>
<script>
    $("p").append("Hello World")
    $("p").append("<b>你好 世界</b>")

    //创建标签
    let i=document.createElement("i")
    //给i标签设置内容
    i.textContent="哈哈哈"
    //将i标签加入到p标签中
    $("p").append(i)

    //jquery
    let j=$("<u>")
    j.text("哈哈ha")
    $("p").append(j) //后面

    $("p").prepend(j.get(0).cloneNode(true)) //前面

    let u=document.getElementsByTagName("u")[0]
    $(u).text("123")

    // $("p").empty()
    $("p").remove()

</script>
</body>
</html>

运用以上做下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            /*去除选项前面的点点*/
            list-style: none;
        }

        ul{
            /*调整了内边距*/
            padding: 0px;
        }

        p{
            background: #27d4b7;
        }

        ol{
            /*当前是不显示*/
            display: none;
        }

        /*激活的样式*/
        .active{
            background: blue;
            color: red;
        }

        /*激活的时候  它地下的ol*/
        .active ol{
            display: block;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <p>纯纯的大无语事件</p>
        <ol>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
        </ol>
    </li>
    <li>
        <p>纯纯的315事件</p>
        <ol>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
        </ol>
    </li>
    <li>
        <p>纯纯的饿吴事件</p>
        <ol>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
        </ol>
    </li>
    <li>
        <p>纯纯的社死事件</p>
        <ol>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
            <li>AAAAAAAAAAA</li>
        </ol>
    </li>
</ul>
<script src="js/jquery-3.5.1.js"></script>
<script>
    //给所有的菜单设置点击事件
    $("p").click(function (){
        //this是js对象
        let li=$(this).parents("li")
        //移除其他(兄弟)菜单的激活样式
        li.siblings().removeClass("active")
        //给菜单添加激活的样式
        if(li.hasClass("active")){
            return li.removeClass("active")
        }
        li.addClass("active")
    })

    //使用jquery完成上课代码
</script>
</body>
</html>

在这里插入图片描述

陈峰806

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery3

jQuery3(筛选&&文档处理筛选：过滤查找：文档处理：增内部插入外部插入册改筛选：过滤first() :获取匹配的第一个元素last():获得匹配的最后- -个元素eq(N) :获取匹配的第N或-N个元素filter(selector) :筛选出与指定表达式匹配的元素集合has(selector) :筛选出包含特定特点的元素的集合not(selector) :筛选出不包含特定特点的元素的集合查找：children() :子标签中找find() :后代标签中找par
复制链接

扫一扫