<!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页+常用筛选器总结的更多相关文章
	

    
								
  1. jQuery的链式编程风格
		
    jQuery的链式编程风格 首先本人通过一个案例来展示jQuery的链式编程风格.先写一个页面,展示一个列表,代码如下: <body> <div> <ul class=& ...
    
		
    2. 
						
  2. JQuery的链式编程，隐式迭代是啥意思？
		
    链式编程 1.好处 "一句话,链式编程可以省去很多重复的代码." 这话什么意思呢?举个例子. /*设置obj对象的两个属性*/ //普通做法是这样的 obj.name = '小明' ...
    
		
    3. 
						
  3. 原生JS实现jquery的链式编程。
		
    这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...
    
		
    4. 
						
  4. 模拟jquery底层链式编程
		
    //特点1:快级作用域,程序启动自动执行 //内部的成员变量,外部无法访问(除了var) //简单的函数链式调用 function Dog(){ this.run=function(){ alert( ...
    
		
    5. 
						
  5. JQuery的链式编程与隐式迭代
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    6. 
						
  6. jQuery 筛选器  链式编程操作
		
    $('#i1').next() 下一个标签$('#i1').nextAll() 兄弟标签中,所有下一个标签$('#i1').nextUntil('#ii1') 兄弟标签中,从下一个标签到id为ii1的 ...
    
		
    7. 
						
  7. jQuery插件编写及链式编程模型小结
		
    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
    
		
    8. 
						
  8. jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）
		
    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
    
		
    9. 
						
  9. jQuery插件编写及链式编程模型
		
    jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. tomcat内存配置
			
    -Xms521M-Xmx1024M-XX:PermSize=64M -Xms256m -Xmx1024m -XX:MaxPermSize=256m
    
			
    2. 
						
  2. Python 2.x和3.x不同点
			
    1.print和print() 2.yield 出现下面的错误Traceback (most recent call last): File “<pyshell#32>”, line 1, ...
    
			
    3. 
						
  3. (转)linux正则表达式详解
			
    linux正则表达式详解 http://blog.csdn.net/wuliowen/article/details/64131815 1:什么是正则表达式: 简单的说,正则表达式就是处理字符串的方法 ...
    
			
    4. 
						
  4. 【Unity3D】用继承EditorUpdater类来实现Editor模式下的后台处理
			
    EditorWindow类的OnGUI函数只会在窗口焦点处于Editor窗口上的时候才会运行.如果希望焦点不在Editor窗口上的时候,它也能实时更新,可以实现以下方法: OnDestroy OnDe ...
    
			
    5. 
						
  5. pat1097. Deduplication on a Linked List (25)
			
    1097. Deduplication on a Linked List (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者  ...
    
			
    6. 
						
  6. Json数组对象和对象数组
			
    Json的简单介绍 从结构上看,所有的数据最终都可以分成三种类型: 第一种类型是scalar(标量),也就是一个单独的string(字符串)或数字(numbers),比如“北京”这个单独的词. 第二种 ...
    
			
    7. 
						
  7. MySQL计算日期的函数DATE_SUB(d,INTERVAL expr type)
			
    MySQL计算日期的函数DATE_SUB(d,INTERVAL expr type) DATE_SUB(d,INTERVAL expr type)函数返回起始日期d减去一个时间段后的日期. expr是 ...
    
			
    8. 
						
  8. PC端下载图片
			
    PC端将图片下载到本地saveFile(imgdata,filename){ var save_link=document.createElementNS('http://www.w3.org/199 ...
    
			
    9. 
						
  9. NumPy(数组计算)
			
    一.介绍 NumPy是高性能科学计算和数据分析的基础包.它是pandas等其他各种工具的基础. 1.主要功能 1)ndarray,一个多维数组结构,高效且节省空间2)无需循环对整组数据进行快速运算的数 ...
    
			
    10. 
						
  10. mui的ajax例子2
			
    mui.post()方法 前端页面: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
    
			
    11.