初初认识jQuery的not选择器，想要实现的功能是，点击第一个div，显示第二个div，点击第一个div以外的地方，隐藏第二个div。

具体代码如下：

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#btn").click(function(){

   $("#holder").toggle();

  });

  $(":not(#btn)").mouseup(function(){

    $("#holder").hide();

  });

});

</script>

</head>

<body>

<h1>Welcome to My Homepage</h1>

<div id="btn" style="cursor: pointer;">我是按钮</div>

<div id="holder" style="background-color:lightblue;">

<p>I live in Duckburg.</p>

<p>My best friend is Mickey.</p>

</div>

</body>

</html>

需要注意的是，两个不能同时触发click事件;div1调用了toggle()方法不能隐藏，只能调用show()。

Jquery not选择器实现元素显示隐藏的更多相关文章

  1. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

  2. jQuery使用toggle()方法进行显示隐藏

    转自:https://www.cnblogs.com/sosoft/p/3460556.html 这是一个示例: 1 <html> 2 <head> 3 <script ...

  3. 基于jquery封装通用的控制显示隐藏的方法

    应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...

  4. jQuery Mobile 控制 select 的显示隐藏 display none

    如需要动态控制下拉选择菜单select的显隐,一般考虑使用display:none这个方法. 但在jQueryMobile中的select添加自定义的css,display:none 是无效的. 解决 ...

  5. jquery的toggle动画效果显示隐藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 利用JavaScript的if语句判断元素显示隐藏

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  7. jquery可见性选择器（匹配所有隐藏的元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JQuery 控制元素显示隐藏

    JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏, ...

  9. jQuery入门——实现列表的显示隐藏与实现轮播图

    列表的显示与隐藏 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

随机推荐

  1. 问题-[Delphi]断点后怎么设置条件

    1.设置一个断点(这时某行代码有个红点).2.在红点上右击->"Breakpoint properties..."->"Condition:"-&g ...

  2. POJ 2955 括号匹配，区间DP

    题意:给你一些括号,问匹配规则成立的括号的个数. 思路:这题lrj的黑书上有,不过他求的是添加最少的括号数,是的这些括号的匹配全部成立. 我想了下,其实这两个问题是一样的,我们可以先求出括号要匹配的最 ...

  3. 3.3FactoryMethod——工厂方法

    意图: 定义一个用于创建对象的接口,让子类决定实例化哪一个类.FactoryMethod使一个类的实例化延迟到其子类. 其实在抽象工厂模式中,经过改进后的模式就是工厂方法模式,所以不多说了,上UML图 ...

  4. java基础入门-arraylist存储开销

    今天我们来看一下arraylist的存储开销,由于在项目其中,我尝试了一个很大的arraylist.然后内存爆了 所以我看了下源代码.原来arraylist的存储开销是比較大的,先上代码 import ...

  5. 介绍 JSON

    出自官网:http://www.json.org/json-zh.html JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于 ...

  6. 一次向svn中增加所有新增文件 svn add all new files

    svn st | grep '^\?' | tr '^\?' ' ' | sed 's/[ ]*//' | sed 's/[ ]/\\ /g' | xargs svn add

  7. android线程与线程池-----线程池（二）《android开发艺术与探索》

    android 中的线程池 线程池的优点: 1 重用线程池中的线程,避免了线程的创建和销毁带来的性能开销 2 能有效的控制最大并发数,避免大量线程之间因为喜欢抢资源而导致阻塞 3 能够对线程进行简单的 ...

  8. CentOS 6.7下iPython提示“WARNING: Readline services not available or not loaded.”的解决办法

    yum install readline-devel 然后,使用pip或者easy_install安装readline即可 pip install readline

  9. Spring Mvc session拦截器实现

    Spring Mvc拦截器实现session过期跳转到登录页面 配置拦截器 <mvc:interceptors> <mvc:interceptor> <mvc:mappi ...

  10. javascript通过字典思想操作数据

    作为一名前端程序猿,相对于后端操作数据的机会较少.然而,有些时候因为一些特殊的原因(如:需要构造成对应插件需要的数据格式,需要返回特定的数据格式等)而不得不对数据进行筛选.重构.相对于后端语言,我们没 ...