jQuery支持鏈式編程,一句話實現左側table頁+常用篩選器總結
阿新 • • 發佈：2018-06-22
charset tle har http children ID prev lin next()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
min-width: 150px;
background-color: black;
color: white;
}
.hide{
display: none;
}
.content{
min-height: 50px;
}
</style>
</head>
<body>
<div style="border: 1px solid silver;width: 200px;height: 600px">
<div class="item">
<div class="header">標題一</div>
<div class="content">內容</div>
</div>
<div class="item">
<div class="header">標題二</div>
<div class="content hide">內容</div>
</div>
<div class="item">
<div class="header">標題三</div>
<div class="content hide">內容</div>
</div>
<div class="item">
<div class="header">標題四</div>
<div class="content hide">內容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(‘.header‘).click(function () {
// 當前點擊的標簽$(this)
// 獲取某個一標簽的下個標簽
// 獲取某一個標簽的父標簽
// 獲取所有的兄弟標簽
// 添加和移除樣式
// removeClass(‘hide‘)移除樣式、addClass(‘hide‘)添加樣式
// var v = $(‘this + div‘)
// $(‘lable + input‘)
// console.log(v)
//篩選器
// $(this).next()下一個
// $(this).prev()上一個
// $(this).parents()父標簽
// $(this).children()子標簽
// $(this).siblings()兄弟標簽
// $(this).find(‘.XXXX或#XXXX‘) 在子子孫孫中查找
// $(this)也可以特指某一個如$(.XXXX或者#XXXX) .代表class #代表id
// jQuery支持鏈式編程如下
// console.log($(this).next().removeClass(‘hide‘).parents().siblings().find(‘content‘).addClass(‘hide‘))
$(this).next().removeClass(‘hide‘).parents().siblings().find(‘.content‘).addClass(‘hide‘)
// 上述面這句話的意思是：被點擊的對象下面一個標簽去掉hide樣式，
// 在去掉樣式的標簽的父標簽的兄弟中class=‘content’的標簽讓他再加上一個hide樣式
})
</script>
</body>
</html>
效果如下圖：
jQuery支持鏈式編程,一句話實現左側table頁+常用篩選器總結