jQuery基礎筆記（2）
阿新 • • 發佈：2019-01-05
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>
效果：
