jQuery三——篩選方法、事件
阿新 • • 發佈：2018-06-16
類名 dom對象 doc 應用 百度 class bottom 代碼示例 ron
目錄
| 一、jquery常用篩選方法 |
以下為jquery的常用篩選方法：
代碼示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>篩選方法</title>
<style type="text/css">
li.active {
font-size: 50px;
}
</style>
</head>
<body>
<ul>
<li class="danger">1</li>
<li><a href="#">luffy</a></li>
<li class="danger">3</li>
<li>4</li>
<a href="#"> 百度</a>
<a href="#" id="anchor">百度</a>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
console.log($(‘li‘)); // 輸出：jQuery.fn.init(4) 類似數組的索引
// jQuery的遍歷方法：.each()
// $(‘li‘).each(function (index,ele) { // 索引，對象
$(‘ul‘).children().each(function (index, ele) {
console.log(ele); // <li class="danger">1</li> ： js的dom對象
console.log(index); // 0 ： index
// 判斷當前匹配元素裏是否有這個類名
var isDanger = $(this).hasClass(‘danger‘);
if (isDanger) {
$(this).css(‘color‘,‘red‘);
} else {
$(this).css(‘font-size‘,‘20px‘);
}
})
// children()
console.log($(‘ul‘).children());
console.log($(‘li‘)); // 同上
console.log($(‘ul‘).children(‘.danger‘));
// parent()
console.log($(‘li‘).parent()); // jQuery.fn.init [ul, prevObject:...
// last() 最後一個元素 prev：前一個元素
console.log($(‘li‘).last().prev()); // jQuery.fn.init [li.danger
console.log($(‘li‘).last().prevAll());
// silbings：篩選給定的同胞同類元素（不包括給定元素本身）
console.log($(‘li‘).siblings(‘li‘));
console.log($(‘#anchor‘).siblings(‘a‘)); // jQuery.fn.init [a, prevObject..
// 鼠標指向的li標簽變大，移走後變小的選項卡效果
$(‘li‘).hover(function () {
$(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);
})
})
</script>
</html>
| 二、應用篩選方法實現選項卡 |
選項卡這種效果在網頁中應用非常多，效果如下圖所示：
示例代碼如下所示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} ul{ list-style選項卡代碼示例: none; } /*清除浮動產生的問題 浮動產生的原因：父級元素沒有填充高度以及填充的時候父級撐不開，導致子級元素浮動*/ #box:after{ /*偽類選擇器*/ content: ""; display: block; clear: both; /* 盒子左右兩邊都不浮動 */ } #box{width: 800px;border: 1px solid black;margin: 20px auto;background: blue;} #leftBox{width: 200px;float: left;} #leftBox li{width: 200px;height: 89px;background: red;margin-bottom: 2px;color: white;font: 50px/89px "黑體"; text-align: center;} #rightBox div{display: none;float: left; width: 600px;} #rightBox p{width:100%;height: 325px;font: 100px/325px "黑體";text-align: center;background: greenyellow } /* font:100px/325px; 代表font-size:100px;line-height:325px; 垂直居中*/ /*text-align:center; 代表中心對齊*/ /*父元素設置display：table使它成為一個塊級表格元素 * 子元素設置display：table-cell使子元素成為表格單元格，就好比是在表格中一樣*/ #rightBox ul{width: 600px;display: table;} #rightBox li{display: table-cell;background: purple;height: 40px;border-right: 2px solid blue;font: 30px/40px "黑體";text-align: center;color: white;} #leftBox .active{background: yellow;color: black;} #rightBox .active{background: white;color: black;} </style> </head> <body> <div id="box"> <ul id="leftBox"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> <div id="rightBox"> <div style="display: block"> <p>a1</p> <ul> <li class="active">a1</li> <li>a2</li> <li>a3</li> <li>a4</li> </ul> </div> <div> <p>b1</p> <ul> <li class="active">b1</li> <li>b2</li> <li>b3</li> <li>b4</li> </ul> </div> <div> <p>c1</p> <ul> <li class="active">c1</li> <li>c2</li> <li>c3</li> <li>c4</li> <li>c5</li> <li>c6</li> </ul> </div> <div> <p>d1</p> <ul> <li class="active">d1</li> <li>d2</li> <li>d3</li> <li>d4</li> </ul> </div> </div> </div> </body> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //鼠標移入的時候 $(‘#leftBox li‘).mouseover(function(){ //修改自己的樣式 siblings：選到本身以外其他兄弟元素,去除active類對應的樣式 $(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘); //修改右邊的div console.log($(this).index()); // 利用$(this).index()取當前對象的索引，輸出：0\1\2\3 // eq(index)：獲取第N個元素的篩選方法 show\hide方法控制元素顯示隱藏 $(‘#rightBox div‘).eq($(this).index()).show().siblings(‘div‘).hide(); }) $(‘#rightBox li‘).click(function(){ $(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘); var liValue = $(this).html(); // 得到對應<li>標簽的值 // 找到li元素的父元素的前一個元素————<p> 給<p>設置html值 $(this).parent().prev().html(liValue); }) }) </script> </html>
1、使用:after偽元素解決經典清除浮動的問題
浮動產生的原因：父級元素沒有填充高度以及填充的時候父級撐不開，導致子級元素浮動
#box:after{ /*偽類選擇器*/
content: "";
display: block;
clear: both; /* 盒子左右兩邊都不浮動 */
}
2、註意font:100px/325px; 這種特殊寫法
#rightBox p{width:100%;height: 325px;font: 100px/325px "黑體";text-align: center;background: greenyellow }
/* font:100px/325px;代表 font-size:100px; line-height:325px; 垂直居中*/
/*text-align:center; 代表中心對齊*/
3、display: table; 和 display: table-cell;
/*父元素設置display：table使它成為一個塊級表格元素
* 子元素設置display：table-cell使子元素成為表格單元格，就好比是在表格中一樣*/
#rightBox ul{width: 600px;display: table;}
#rightBox li{display: table-cell;background: purple;height: 40px;border-right: 2px solid blue;font: 30px/40px "黑體";text-align: center;color: white;}
4、$(this).index()可以得到當前對象的索引。兩邊的元素可以通過索引和eq()方法進行聯動：
// eq(index)：獲取第N個元素的篩選方法 show\hide方法控制元素顯示隱藏 $(‘#rightBox div‘).eq($(this).index()).show().siblings(‘div‘).hide();
5、選項卡實現原理：監聽鼠標移入事件，觸發事件後選到當前被移入的元素，用addClass添加類以此來添加樣式，再用siblings選到其他兄弟元素，去除類以此來去除樣式。
$(function(){
//鼠標移入的時候
$(‘#leftBox li‘).mouseover(function(){
//修改自己的樣式 siblings：選到本身以外其他兄弟元素,去除active類對應的樣式
$(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);
//修改右邊的div
console.log($(this).index()); // 利用$(this).index()取當前對象的索引，輸出：0\1\2\3
// eq(index)：獲取第N個元素的篩選方法 show\hide方法控制元素顯示隱藏
$(‘#rightBox div‘).eq($(this).index()).show().siblings(‘div‘).hide();
})
$(‘#rightBox li‘).click(function(){
$(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);
var liValue = $(this).html(); // 得到對應<li>標簽的值
// 找到li元素的父元素的前一個元素————<p> 給<p>設置html值
$(this).parent().prev().html(liValue);
})
})
6、類似的點擊右下方按鈕，切換顯示內容。是通過parent()方法找到當前元素的父級元素ul，再通過prev()方法定位到元素p，再通過html()方法賦值，修改顯示內容。
var liValue = $(this).html(); // 得到對應<li>標簽的值 // 找到li元素的父元素的前一個元素————<p> 給<p>設置html值 $(this).parent().prev().html(liValue);
jQuery三——篩選方法、事件