<!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. mycat分片规则之分片枚举（sharding-by-intinfile）
			
    mycat分片规则之分片枚举(sharding-by-intinfile) http://blog.51cto.com/goome/2058959 mycat安装及分片初体验 https://blog ...
    
			
    2. 
						
  2. 在SpringBoot中使用Docker（利用dockerfile-maven-plugin插件）
			
    周末在家做了一个实验: 将Docker通过插件的方式集成到SpringBoot中 然后通过Maven命令根据项目中的Dockerfile自动生成Docker镜像,同时将镜像推送到远程Linux服务器( ...
    
			
    3. 
						
  3. LeetCode 208 Implement Trie (Prefix Tree) 字典树（前缀树）
			
    Implement a trie with insert, search, and startsWith methods.Note:You may assume that all inputs are ...
    
			
    4. 
						
  4. Quartz.NET持久化
			
    Quartz.NET所用到的数据库表结构 官方提供的各种数据库脚本:https://github.com/quartznet/quartznet/tree/master/database/tables ...
    
			
    5. 
						
  5. 使用Kubernetes的java-client实现Deployment的部署及更新操作
			
    1. 背景介绍 需求: 针对多种协议SDK构造探针,测试公司接入机服务状况(每一个探针应对单一接入机,接入机数量可能会动态变化). 难点: 大多数协议SDK均不支持多实例运行,且部分SDK通过生成文件 ...
    
			
    6. 
						
  6. Spring cloud Eureka 服务治理(高可用服务中心)
			
    在微服务的架构中,我们考虑发生故障的情况,所以在生产环境中我们需要对服务中各个组件进行高可用部署. Eureka Server 的高可用实际上就是将自己作为服务想其它服务注册中心注册自己,这样就形成了 ...
    
			
    7. 
						
  7. servlet和jsp存值和取值的方式
			
    在servlet和jsp中存值和取值的方式由两种 1种是setAttribute和getAttribute 2种是c:forEach
    
			
    8. 
						
  8. Magento 中一个订单的“生命历程”
			
    当我们在网上愉快的买买买的时候, 你知道在这些屏幕“背后”正在进行着什么吗? 1. 当一个产品被加入到购物车后, 实际上发生了什么? 当第一个产品被加入到购物车, 系统首先会生成一个 quote (q ...
    
			
    9. 
						
  9. 零基础逆向工程24_C++_01_类_this指针_继承本质_多层继承
			
    1 类内的成员函数和普通函数的对比 1.1 主要是从参数传递.压栈顺序.堆栈平衡来总结. 1.参数传递:成员函数多传一个this指针 2.压栈顺序:成员函数会将this指针压栈,在函数调用取出 3.堆 ...
    
			
    10. 
						
  10. Eucalyptus管理页面密码设置
			
    桉树环境什么的都已经是配置好了的,但是过了一段时间不用,也不知道密码是什么了,看着下面的页面也不知道如何进去,这里我们通过命令行的方式重置用户名和密码信息. 登陆clc所在机器,输入下命令: euar ...
    
			
    11.