jQuery支持链式编程,一句话实现左侧table页+常用筛选器总结

Posted topzhao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery支持链式编程,一句话实现左侧table页+常用筛选器总结相关的知识,希望对你有一定的参考价值。

<!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页+常用筛选器总结的主要内容,如果未能解决你的问题,请参考以下文章

JQuery-- 链式编程静态函数,自己制作jQuery插件

链式编程思想

jQuery的链式编程和隐式迭代

jQuery 链式编程

[jQuery]jQuery链式编程

jQuery——链式编程与隐式迭代