jquery.筛选文档处理

我们今天来学习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有这个属性用作判断

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

jquery.筛选文档处理相关推荐

jQuery (筛选文档处理)
大家好,我是小陽,我又来了,今天我给大家带来的是jQuery的筛选and文档处理,希望能给大家带来一些知识上的帮助! 目录一.思维导图二.jQuery的筛选三.jQuery的文档处理一.思维导 ...
jQuery筛选-文档处理
1.过滤案例过滤:在jQuery对象数组中,过滤出一部分元素 : // 1).首先获取ul中所有的li子元素,即会产生一个li数组uls.然后://空格选择器在后台里面查找//>:在所有子标 ...
jquery获取文档高度和窗口高度的例子
jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
jQuery基础文档(持续更新)
文章目录 jQuery基础文档(持续更新) 1 jQuery入门仪式: jQuery基础文档(持续更新) 1 jQuery入门仪式: 还是先上一段代码吧,对照这看: <!DOCTYPE html ...
JQuery 查询文档元素
JQuery jQuery 为web脚本编程提供了通用的抽象层,使得它几乎用于任何脚本编程的情形. jQuery 能够满足如下功能: l 取得页面的元素 l 修改页 ...
jquery ui 文档使用总结
介绍jquery ui文档中的api如何使用 <!doctype html> <html lang="us"> <head> <meta ...
jQuery之筛选文档处理
目录回顾上一节: ??? $工具的类方法(类似java中的静态方法) ?? ??? ??? ??? jQuery控制属性设置以及css样式设置 ? 用jQuery实现全选框与复选框的事件: 本节内容 ...
jQuery的文档操作方法
jQuery 文档操作方法这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
Js和jQuery的文档就绪函数以及执行次数
https://www.cnblogs.com/yingyingh5/p/7786821.html 文档就绪函数的使用方法是: 完整方式: $(document).ready(fn) 或者jQuery ...
jQuery-03 (筛选文档处理)
1.筛选--过滤 1.1 first():获取匹配的第一个元素从元素数组中找到第一个元素 //--过滤出指定表达式匹配的元素// first() 获取id为oul下的所有li元素,然后找到第一个元素 ...

jquery.筛选文档处理

jquery.筛选文档处理相关推荐

最新文章

热门文章