jquery.筛选&文档处理

liwangdeng

于 2022-03-20 16:48:03 发布

阅读量1k

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/liwangdeng/article/details/123564738

版权

我们今天来学习jquery的筛选和文档处理

一.了解今天所要学习的内容

筛选：包涵过滤和查找；过滤就是在jquery数组中过滤一部分元素，查找在jquery数组中根据选择器找孩子，父母，兄弟标签

文档处理：包涵增，删，改；增加有内部插入和外部插入

二.单词了解和用法代码展示

first()获得匹配的第一个元素

last()获得最后一个元素

eq()匹配第n个元素

filter筛选与指定表达式匹配的元素集合

has筛选包涵特定特点的元素

not筛选不包涵特定特点的元素

children()子标签查找

find()后代标签查找

parent父标签

prevAll前面所有的兄弟标签

nextAll后面所有的兄弟标签

siblings前后所有的兄弟标签

append将内容添加到指定元素后面

appendTo与append相反

prepend()将内容添加到指定元素前面

prependTo()与prepend相反

after匹配元素后插入内容

before匹配元素前插入内容

empty删除匹配的元素集合中所有的子节点（不包含匹配的元素）

remove删除匹配的元素集合中所有的子节点（包含匹配的元素）

parent拿父级

parents拿所有的父级

<body>
		<ul>
			<li class="a">aa1</li>
			<li>aa2</li>
			<li>aa3</li>
			<li>aa4</li>
			<li>aa5</li>
			<li>aa6</li>
		</ul>
		<div>
			<span></span>
			<i></i>
			<p>hello</p>
		</div>
		<div id="i">hi</div>
		<script src="./jquery-3.5.1.js"></script>
		<script>
			//first()获得匹配的第一个元素
			console.log($("li").first())
			//last()获得最后一个元素
			console.log($("li").last())
			//eq()匹配第n个元素
			console.log($("li").eq(0))
			//filter筛选与指定表达式匹配的元素集合
			console.log($("li").filter(".a"))
			//has筛选包涵特定特点的元素
			console.log($('li').has('ul').css('background-color', 'red'))
			//not筛选不包涵特定特点的元素
			console.log($("li").not($(".a")[0]))
			//children()子标签查找
			console.log($("div").children())
			//find()后代标签查找
			console.log($("div").find("p"))
			//parent父标签
			console.log($("p").parent())
			//prevAll前面所有的兄弟标签
			console.log($("p").prevAll())
			//nextAll后面所有的兄弟标签
			console.log($("span").nextAll())
			//siblings前后所有的兄弟标签
			console.log($("i").siblings())
			//append将内容添加到指定元素后面
			console.log($("p").append("<i>hi</i>"))
			//appendTo与append相反
			console.log($("p").appendTo("<i>"))
			//prepend()将内容添加到指定元素前面
			console.log($("p").prepend("<i>hi</i>"))
			//prependTo()与prepend相反
			console.log($("p").prependTo("#i"))
			//after匹配元素后插入内容
			console.log($("p").after("<b>hi</b>"))
			//before匹配元素前插入内容
			console.log($("p").after("<b>hi</b>"))
            //empty删除匹配的元素集合中所有的子节点（不包含匹配的元素）
			console.log($("p").empty())
			//remove删除匹配的元素集合中所有的子节点（包含匹配的元素）
			console.log($("p").remove())
            //parent拿父级
			console.log($("li").parent())
			//parents拿所有父级
			console.log($("li").parents())
		</script>
	</body>

注：在编写代码是在不经意的时候我往往会没注意将p标签中套i标签，这样是错误的，行级去套块级，还有p标签去套div标签，行级是不能套块级的，一定要注意。

三.案例展示

1.删除一行

<!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>

οnclick="$(this).parents('tr').temove()"

点击事件，将标签自己传入查找所有父级，找到tr标签，删除

οnclick="this.parentElement.parentElement.outerHTML=' ' "

点击事件，这个标签的父级元素的父级元素，替换成空字符串（注：outerHTML不含包括标签，innerHTML包括标签）

2.隔行换色

<!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")
    })

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

click是jquery的点击事件

hasClass有这个属性用作判断

今天的学习就到这了，单词较多，还是那句话换词不换方，勤记单词。

liwangdeng

关注

0
点赞
踩
0

收藏

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

我们今天来学习jquery的筛选和文档处理一.了解今天所要学习的内容筛选：包涵过滤和查找；过滤就是在jquery数组中过滤一部分元素，查找在jquery数组中根据选择器找孩子，父母，兄弟标签文档处理：包涵增，删，改；增加有内部插入和外部插入二.单词了解和用法代码展示first()获得匹配的第一个元素last()获得最后一个元素eq()匹配第n个元素filter筛选与指定表达式匹配的元素集合has筛选包涵特定特点的元素not筛选不包涵特定特点的元素childre
复制链接

扫一扫