jquery 实现点自身以外元素隐藏

2024-10-29

jquery 点击元素以外任意地方隐藏该元素的方法

文章来源:百度知道我的思路是给body绑定一个click事件,然后判断当前鼠标点击的区域是当前元素还是元素以外区域,如果点击对象不是当前元素,则隐藏该元素. 假设对象的id为divBtn,则代码如下: $('body').bind('click', function(event) { // IE支持 event.srcElement , FF支持 event.target var evt = event.srcElement ? event.srcElement : e

jQuery控制元素隐藏和显示

1.jQuery隐藏和显示效果通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(function(){ $("p").hide(); }); //点击id="hide"元素时,隐藏所有<p>标签内容: $("#show").click(function(){ $("p").show(); }); //点击id=

jQuery 的选择器常用的元素查找方法

jQuery 的选择器常用的元素查找方法基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中

HTML元素隐藏和显示

在web前端开发过程中,经常会用到隐藏和显示元素的方法总结:1.通过JS或Jquery控制 2.通过CSS样式控制一.Js或jquery (jquery为例) 1.隐藏元素使用hide()方法,如下图: 方法:hide() 作用: 隐藏显示的元素示例: $(“p”).hide(); HTML 代码: <p>Hello word</p> 结果: <p style="display:none">Hello word</p&

jQuery--Dom元素隐藏和显示原理（源码2.0.3）

对于Dom元素显示和隐藏的操作,jQuery提供了比较方便的函数,我们也经常使用: 1. show() : 显示Dom元素2. hide() : 隐藏Dom元素3. toggle() : 改变Dom元素的显示状态,如果当前是显示状态函数运行后则会隐藏也曾想过这三个函数的实现原理,如果以为是简单的设置样式,改变display属性的值设置为block或是none.那就错了,看了下jQuery2.0.3的源码,了解了这三个函数的实现原理,其实实现的逻辑还有点小复杂,下面来介绍下具体实现: 1. 数据

您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

一.CSS元素隐藏在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolut

jQuery 效果 - toggle() 方法切换元素的可见状态。

定义和用法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法 $(selector).toggle(speed,callback,switch) 参数描述 speed 可选.规定元素从可见到隐藏的速度(或者相反).默认为 "0". 可能的值: 毫秒 (比如 1500) "slow" "normal" "fast" 在设置速度的情况下,元素从可见到隐藏的过程

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

转自:https://www.cnblogs.com/sosoft/p/3460556.html 这是一个示例: 1 <html> 2 <head> 3 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 4 <script type="tex

es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法响应式图像弹窗细节微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性参数传递的四种形式

es6 Object.assign 目录一.基本用法二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值三.浏览器支持 ES6 Object.assign 一.基本用法 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象.只要有一个参数不是对象,就会抛出TypeError错误. var target

吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：强制元素隐藏

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"

Js/Jquery获取iframe中的元素

转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素. js 在父窗口中获取iframe中的元素 1. 格式:window.frames["iframe的name值"].document.getElementById("iframe中控件

[转]jquery append 动态添加的元素事件on 不起作用的解决方案

用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 具体不多说了,请看下面的代码吧. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <h

CSS中如何让元素隐藏

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } { position: relative; top: -999em; /* 占据空

JQuery基础教程：选择元素（下）

DOM遍历方法利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样.如果只有这一种取得元素的方式,那我们选择的余地从某个角度讲也是很有限的.很多情况下,取得某个元素的父元素或者祖先元素都是基本的操作,而这正是jQuery的DOM遍历方法的用武之地.有了这些方法,我们可以轻而易举地在DOM树中上下左右地自由漫步.这行用于添加alt类的代码$('tr: even').addClass('alt');可以通过.filter()方法重写成这样 $(

Jquery 方式获取 iframe Dom元素

Jquery 方式获取 iframe Dom元素測试页面代码: <html> <head> <title>jquery方式,訪问iframe页面dom元素</title> <meta name="Author" content="孙勤波"> <meta http-equiv="Content-Type" content="text/html;charset

【CSS3】---元素隐藏（是否占据空间、是否可点击）

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } { position: relative; top: -999em; /* 占据空间,无法点击 */ } { p

JavaScript（20）jQuery HTML 加入和删除元素

jQuery - 加入元素通过 jQuery,能够非常easy地加入新元素/内容. 加入新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 jQuery append() 方法在被选元素的结尾插入内容. $("p").append("Some appended text."); j

jquery判断div是否显示或者隐藏

jquery判断div是否显示或者隐藏很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者用is(":visible")判断是否显示: 判断如果显示或不显示代码如: if($('#div').is(':hidden')){ //如果隐藏时... }else{ //如果显示时... } javarcript 方法: var o =document.getElementById(&

css元素隐藏（display:none和visibility:hidden）

在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css display:none 当使用该样式的时候,HTML元素的宽高等各种属性都将失效,其所占据的空间消失,可将该元素视作完全不存在. css visibility:hidden 当使用该样式的时候,HTML元素的宽高等各种属性不会失效,其所占据的空间也会被完全保留下来,可将该元素视作完全透明. *当然当某HTML元素具有样式display: none;visibi

jquery append 动态添加的元素事件on 不起作用的解决方案

用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 通俗的说就是在谁上面append就用谁做父级. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu

JavaScript、jQuery获取页面及个元素高度、宽度

Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.

jquery 实现点自身以外元素隐藏

热门专题