<!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. 什么是obj文件？
			
    百度百科: 程序编译时生成的中间代码文件.目标文件,一般是程序编译后的二进制文件,再通过链接器(LINK.EXE)和资源文件链接就成可执行文件了.OBJ只给出了程序的相对地址,而可执行文件是绝对地址. ...
    
			
    2. 
						
  2. Python----Anaconda + PyCharm + Python  开发环境搭建（使用pip，安装selenium，使用IDLE）
			
    1.Python开发中会用到的工具下载地址 FireBug插件安装地址:https://addons.mozilla.org/en-US/firefox/addon/firebug/ FirePath ...
    
			
    3. 
						
  3. QQ的全国地址编码
			
    D:\Program Files (x86)\Tencent\QQ\I18N\2052\LocList.xml
    
			
    4. 
						
  4. Vim相关问题
			
    1.vim格式修改 进入配置文件: $ sudo vim /etc/vim/vimrc 在文件末尾添加: #默认查找忽略大小写 set ignorecase #如果有一个大写字母,则切换到大小姐敏感查 ...
    
			
    5. 
						
  5. 解决apache启动错误 AH00558: httpd: Could not reliably determine...
			
    [root@localhost httpd-2.4.7]# /usr/local/httpd/bin/apachectl start AH00558: httpd: Could not reliabl ...
    
			
    6. 
						
  6. Shell笔试题1
			
    1．用Shell编程,判断一文件是不是块或字符设备文件,如果是将其拷贝到 /dev 目录下. #!/bin/bash#1.sh#判断一文件是不是字符或块设备文件,如果是将其拷贝到 /dev 目录下#f ...
    
			
    7. 
						
  7. SpringBoot | 第三章：springboot配置详解
			
    基于springboot的约定优于配置的原则,在多数情况下,启动一个应用时,基本上无需做太多的配置,应用就能正常启动.但在大部分开发环境下,添加额外配置是无所避免的,比如自定义应用端口号(比较在机器比 ...
    
			
    8. 
						
  8. C#  EF 生成1-20随机数，生成10个，不能重复 LINQ写法
			
    , ).Select(x => ).ToList(); foreach (var i in num) { Console.WriteLine(i); } 上面的函数碉堡天了
    
			
    9. 
						
  9. c# 业务层事务
			
    步骤: 1.先添加System.Transactions.dll的引用 2.使用System.Transactions命名空间下的类 实例: using (TransactionScope scope ...
    
			
    10. 
						
  10. sublime 常用快捷键(转)
			
    Sublime text 3是码农最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键 ...
    
			
    11.