jQuery的筛选和文档处理

今天带大家来学习一下jQuery的筛选和文档处理，还有一个侧边菜单的简易案例，都在下面了，拿走请留个赞吧！

一，过滤

1.css

<ul><li>哈哈哈</li><li>哈哈哈</li><li>哈哈哈</li><li>哈哈哈</li><li class="aa">哈哈哈</li><li class="aa">哈哈哈</li><li>哈哈哈</li><li><p> 哈哈哈</p></li><li>哈哈哈</li><li>哈哈哈</li><li>哈哈哈</li><li>哈哈哈</li><li>哈哈哈</li></ul>

2.script

     <script src="js/jquery-3.5.1.js"> </script><script type="text/javascript">// 获取匹配第一个元素两种方式console.log($("li").first())console.log($("li:first"))// 最后一个了元素console.log($("li").last())// 第N个元素eq(N)console.log($("li").eq(0))//$jQuery对象// filter筛选出与指定表达式匹配的元素集合// $("li.aa")console.log($("li").filter(".aa"))// has有 筛选出包含特定的元素集合// 判断子元素console.log($("li").has("p"))console.log($("li").has(".aa"))// not有 筛选出不包含特定的元素集合console.log($("li").not("p"))     </script>

二，查找

<script>
// ---------------------------------// 拿出li$("ul").children()// 拿出ul里的aa子元素console.log($("ul").children(".aa"))//拿出ul中的p标签console.log($("ul").find("p"))// 拿到父元素console.log($(".aa").parent())// parents拿到前面的所有父元素// $(".aa").parents("tr")
</script>

三，文档处理

1.增

// 增加标签r1$("p").append("你好 ，世界")$("p").append("<b>你好 ，世界</b>")// 追加let s=$("<u>")s.text("afdadfdafdag")$("p").append(s)//后面// appendTo()与append()颠倒// -----------------------$("p").prepend(s.get(0).cloneNode(true))//前面

2，删

 // 删除// 删除子节点但 不包括自己$("p").empty()// 删除子节点 包括自己$("p").remove()

3，改

// 所有匹配的元素替换成指定的HTML或DOM元素。$("p").replaceWith("<b>Paragraph. </b>");

四，侧边菜单案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Title</title><style type="text/css">li {/* 去除小点点 */list-style: none;}ul {padding: 0px;}p {background-color: aqua;}ol {/* 隐藏不显示 */display: none;}/* 激活样式 */.active {background: #ffcdf5;color: #FF0000;}/* 激活的时候 ol标签 */.active ol {display: block;}</style></head><body><script src="js/jquery-3.5.1.js"></script><!-- class="active" --><ul><li><p> 王者荣耀</p><ol><li> 赵云</li><li> 韩信</li><li>后羿</li><li>狄仁杰</li><li>李白</li></ol></li><li><p>穿越火线</p><ol><li>王者之翼</li><li>王者之影</li><li>王者之势</li><li>王者之怒</li><li>王者之戮</li><li>王者之力</li><li>王者之武</li><li>王者之心</li><li>王者之圣</li></ol></li><li><p>和平精英<ol><li>海岛</li><li>雪地</li><li>沙漠</li><li>度假岛</li><li>雨林</li><li>山谷</li><li>黄金岛</li></ol></p></li></ul><script type="text/javascript">// 给所有的菜单涉及点击事件$("p").click( function (){// this是js对象let li=$(this).parent("li") // console.log(li)// 移除其(兄弟)的激活样式li.siblings().removeClass("active")if(li.hasClass("active")){return li.removeClass("active")}// 给菜单添加激活样式li.addClass("active")})</script></body>
</html>

五，表格的行删除

<table border><tr><td>afsdfdfdsa</td><td>afsdfdfdsa</td><td>afsdfdfdsa</td><td>afsdfdfdsa</td><td><button onclick="$(this).parents('tr').remove()">删除</button></td></tr><tr><td>afsdfdfdsa</td><td>afsdfdfdsa</td><td>afsdfdfdsa</td><td>afsdfdfdsa</td><td><button onclick="$(this).parents('tr').remove()">删除</button></td></tr>

好了，以上就是今天我给大家所分享的内容了，都看到这了留个名字在走吧！有趣的陌生人！

jQuery的筛选和文档处理相关推荐

jQuery之筛选文档处理
目录回顾上一节: ??? $工具的类方法(类似java中的静态方法) ?? ??? ??? ??? jQuery控制属性设置以及css样式设置 ? 用jQuery实现全选框与复选框的事件: 本节内容 ...
Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
记录一下 Java 代码实现文件夹、文件的对比，主要包含 word、pdf、文本、图片等相关文件的对比计算，以及计算文本的相似率（重复率）、筛选出差异的文件、方便文件和文档的去重，并封装为jar包
记录一下 Java 代码实现文件夹.文件的对比,主要包含 word.pdf.文本.图片等相关文件的对比计算,以及计算文本的相似率(重复率).筛选出差异的文件.方便文件和文档的去重,并把所有的源码封装为 ...
jQuery (筛选文档处理)
大家好,我是小陽,我又来了,今天我给大家带来的是jQuery的筛选and文档处理,希望能给大家带来一些知识上的帮助! 目录一.思维导图二.jQuery的筛选三.jQuery的文档处理一.思维导 ...
IE的浏览器模式和文档模式
一.概念 1.浏览器模式(Browser Mode): 用于切换IE针对该网页的默认文本模式.对不同版本浏览器的条件注释解析.决定请求头里userAgent的值.它在浏览器发出请求之前就已经确定, ...
JavaWeb开发前端语言：jQuery（一） jQuery核心函数、jQuery对象、jQuery选择器、以及jQuery元素筛选
JavaWeb开发前端语言:jQuery 1.jQuery介绍 1.1 jQuery的初使用 1.2 使用jQuery的常用问题解析 2. jQuery核心函数介绍 3.区分jQuery对象与dom ...
day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）
今日内容 1. JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
快速启动程序和文档的好软件(初稿)
总结: 快速启动程序和文档的好软件(初稿) 作者: 善用佳软日期: 2008-05-28 分类: 系统工具标签: quick-launch 这是一篇关于快速启动常用(或不常用)程序和文档的方法.软 ...

jQuery的筛选和文档处理

jQuery的筛选和文档处理

目录

一，过滤

二，查找

三，文档处理

四，侧边菜单案例

五，表格的行删除

jQuery的筛选和文档处理相关推荐

最新文章

热门文章