day54
筛选器
参考：https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5
筛选器方法
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
举例：
<ul> <li id="l0">l0</li> <li>l1</li> <li>l2</li> <li id="l3">l3</li> <li>l4</li> <li>l5</li> </ul>
实践：
父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
找父标签
<!--父标签--> <div id="d1">div-1 <div id="d2">div-2 <div id="d3">div-3 <a href="">a标签</a> </div> </div> </div>
实践：
parents()、parentsUntil()作用看注释可知。
儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
示例：
<!--兄弟和儿子--> <div id="dd"> <p>p0</p> <p>p1</p> <p id="p2">p2</p> <p>p3</p> </div>
实践：
查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")
等价于$("div p")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")
操作标签
样式操作
样式类
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
示例：
<div id="dd"> <p>p0</p> <p>p1</p> <p id="p2">p2</p> <p>p3</p> </div>
实践：
应用toggleClass()：、
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>样式操作示例</title> <style> .c1 { height: 200px; width: 200px; border-radius: 50%; background-color: red; } .c2 { background-color: green; } </style> </head> <body> <div class="c1"></div> <script src="jquery-3.2.1.min.js"></script> <script> // 找标签 $("div.c1").click(function () { // console.log(this); // this是DOM对象,转为jQuery对象才能使用jQuery方法 $(this).toggleClass("c2"); // 有就删掉 没有就加上 }) </script> </body> </html>
divEle2.onclick=function () { this.innerText="呵呵"; } divEle2是DOM对象。
应用：
展开点击的栏目
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>左侧菜单作业分解</title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .hide { display: none; } </style> </head> <body> <div class="left-menu"> <div class="menu-title">菜单一</div> <div class="menu-items"> <ul> <li><a href="">111</a></li> <li><a href="">222</a></li> <li><a href="">333</a></li> </ul> </div> <div class="menu-title">菜单二</div> <div class="menu-items hide"> <ul> <li><a href="">111</a></li> <li><a href="">222</a></li> <li><a href="">333</a></li> </ul> </div> <div class="menu-title">菜单三</div> <div class="menu-items hide"> <ul> <li><a href="">111</a></li> <li><a href="">222</a></li> <li><a href="">333</a></li> </ul> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script> // 需求分析 // 找到所有的.menu-title标签,绑定点击事件 $(".menu-title").click(function () { // 点击事件具体要做的事儿 // 1. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类) // $(this).next().removeClass("hide"); $(this).next().toggleClass("hide"); // 2. 把其他的.menu-items隐藏,添加hide类 $(this).next().siblings(".menu-items").addClass("hide"); //把其他都隐藏 }) // $(".menu-title").click(function () { // // 1. 找到所有的.menu-items, 隐藏 // var $currMenuitem = $(this).next(); // $(".menu-items").not($currMenuitem).addClass("hide"); // 所有的二级菜单都是隐藏的 // // 2. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类) // $(this).next().toggleClass("hide"); // }) </script> </body> </html>
效果：
