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>
效果：