<!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页+常用筛选器总结
原文地址：https://www.cnblogs.com/topzhao/p/9211216.html