<!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. RabbitMQ权限
			
    RabbitMQ 引言 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队 ...
    
			
    2. 
						
  2. js 中的 for 循环。。。
			
    for (var i in data){ data[i] } 和for (var i=0;i< data.length; i++){ data[i] } 第一种可能会有bug...
    
			
    3. 
						
  3. 74th LeetCode Weekly Contest Valid Tic-Tac-Toe State
			
    A Tic-Tac-Toe board is given as a string array board. Return True if and only if it is possible to r ...
    
			
    4. 
						
  4. 一步一步在Windows中使用MyCat负载均衡
			
    一步一步在Windows中使用MyCat负载均衡 http://www.cnblogs.com/zhangs1986/p/6408981.html   mycat+sqlServer简单demo配置  ...
    
			
    5. 
						
  5. java CountDownLatch 等待多线程完成
			
    CountDownLatch允许一个或多个线程等待其他线程完成操作. package com.test; import java.util.concurrent.CountDownLatch; pub ...
    
			
    6. 
						
  6. D2 前端会议
			
    D2 前端会议 时间 2019年1月6日 图片
    
			
    7. 
						
  7. 【Java/Android性能优 7】Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类
			
    本文转自:http://www.trinea.cn/android/android-common-lib/ 介绍总结的一些android公共库,包含缓存(图片缓存.预取缓存.网络缓存).公共View( ...
    
			
    8. 
						
  8. Maven建立spring-web项目
			
    参考博客网址: https://blog.csdn.net/caoxuekun/article/details/77336444 1.eclipse集成maven 2.maven创建web项目 3.搭 ...
    
			
    9. 
						
  9. 【迷你微信】基于MINA、Hibernate、Spring、Protobuf的即时聊天系统：10.项目介绍之架构（2）
			
    欢迎阅读我的开源项目<迷你微信>服务器与<迷你微信>客户端 前言 前面我们讲到<迷你微信>服务器端的主架构,现在我们来描述一下它的模块详细信息. 网络模块 从上图我 ...
    
			
    10. 
						
  10. hadoop上传文件失败报错（put: Cannot create file/eclipse.desktop._COPYING_. Name node is in safe mode.）
			
    解决办法: 离开安全模式方法:执行以下命令即可 bin/hadoop  dfsadmin -safemode leave 若不处理安全模式的话,web服务无法启动,dfsadmin report结果异 ...
    
			
    11.