<!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. ubuntu 的 python从2.* 升级到3.*
			
    1.在ubuntu 的终端中用代码下载最新的Python sudo apt-get install python3 2.用命令删除usr/bin/目录下的默认python link文件root@sal ...
    
			
    2. 
						
  2. Win10创建还原点
			
    Win + E打开任务管理器 右击此电脑,选择属性 单击高级系统设置 选择系统保护 单击系统还原 按照提示操作,OK.
    
			
    3. 
						
  3. Linux Bash 命令行快捷键小结
			
    编辑命令          光标移动                                                                        剪切.删除 Ctrl ...
    
			
    4. 
						
  4. 【Java密码学】XML签名
			
    http://www.oracle.com/technetwork/articles/javase/dig-signature-api-140772.html XML签名的结构和类型 基本上XML签名 ...
    
			
    5. 
						
  5. Hadoop源生实用工具之distcp
			
    1 概览 DistCp(Distributed Copy)是用于大规模集群内部或者集群之间的高性能拷贝工具. 它使用Map/Reduce实现文件分发,错误处理和恢复,以及报告生成. 它把文件和目录的列 ...
    
			
    6. 
						
  6. asp.net5开发中DNX SDK版本的影响
			
    某次asp.net5开发中遇到了一个很奇怪的问题,引用部分的nuget包没有显示任何错误,如下图: 但是编译时出现了几百个错误: 错误基本都是形如“CS0246 The type or namespa ...
    
			
    7. 
						
  7. Centos 6.5  修改默认分辨率
			
    需要两步: 第一步: 编辑/etc/grub.conf文件,删除“nomodeset” 单词 ,翻到该页最后一行,就可以看到该词: 第二步: 删除文件/etc/X11/xorg.conf , Inte ...
    
			
    8. 
						
  8. 记录下laravel 5.2的auth/logout路由工作不正常的问题
			
    
			
    9. 
						
  9. Table中采用JQuery slideToggle效果的问题
			
    需求:用JQuery实现,点击最上边的粗加号时,对所有含有子表的Tr进行展开,点击 + 号时,只对当前Tr的下一个tr内容的动态隐藏和显示: 问题:JQuery的slideToggle() slide ...
    
			
    10. 
						
  10. click事件的累加绑定
			
    click事件的累加绑定,绑定一次点击事件,执行多次. 在页面中为一个元素绑定事件,事件执行后页面未刷新且元素还在,然后你再次点击,元素又被绑定一个点击事件,这样第二次点击就会执行两次,以此类推. 如 ...
    
			
    11.