jQuery中show与hide方法用法示例
本文实例分析了jQuery中show与hide方法用法。分享给大家供大家参考,具体如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> *{font-size:12px;} div{width:600px;margin:auto;} #control{background-color:gold;padding:10px;} </style> <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnDisplay").click(function () { $("#message").show(3000); }); $("#btnHide").click(function () { $("#message").hide(3000); }); }); </script> </head> <body> <div id="control"> <input id="btnDisplay" type="button" value="显示div" /> <input id="btnHide" type="button" value="隐藏div" /> </div> <div id="message"> mouseover、mouseenter的区别:div里套div。见备注。和事件冒泡有关系。<br /> 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 <br /> 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件(穿过子元素不会触发) </div> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery链式调用与show知识浅析
上篇文章给大家介绍了jQuery的框架,有关jquery的基础知识可以参考下. jQuery使用许久了,但是有一些API的实现实在想不通.下面将使用简化的代码来介绍,主要关注jQuery的实现思想. 相较于上一篇,代码更新了:21~78 (function(window, undefined){ function jQuery(sel){ return new jQuery.prototype.init(sel); } jQuery.prototype = { constructor: jQue
-
jQuery焦点图轮播插件KinSlideshow用法分析
本文实例讲述了jQuery焦点图轮播插件KinSlideshow用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
本文实例为大家分享了jquery中show().hide()和toggle()用法实例,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>初识jQuery</title> <script src="http:/www.jb51.net/
-
jQuery的图片轮播插件PgwSlideshow使用详解
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides
-
Jquery中使用show()与hide()方法动画显示和隐藏图片
(1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
-
用js模拟JQuery的show与hide动画函数代码
复制代码 代码如下: //根据ID返回dom元素 var $ = function(id){return document.getElementById(id);} //返回dom元素的当前某css值 var getCss = function(obj,name){ //ie if(obj.currentStyle) { return obj.currentStyle[name]; } //ff else { var style = document.defaultView.getCompute
-
jquery中show()、hide()和toggle()用法实例
本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 复制代码 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javasc
-
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery的时候 会遇到这个问题 ,hide和 fadeOut都可以带有参数: $(selector).hide(speed,callback); $(selector).fadeOut(speed,callback); 首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出,当然名字不能看出具体的区别,只能体现他们是不同的而已.但是当我们把参数 speed 设置稍微长一些就可以看出
-
jquery (show,fadeOut,Animate)简单效果
jquery show移上去看看 hello fadeout淡出效果 淡出效果淡出效果淡出效果淡出效果淡出效果 淡出效果淡出效果淡出效果淡出效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
jQuery中show与hide方法用法示例
本文实例分析了jQuery中show与hide方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
jQuery中slidedown与slideup方法用法示例
这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
jQuery中fadein与fadeout方法用法示例
本文实例讲述了jQuery中fadein与fadeout方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g
-
jQuery中ajax的get()方法用法实例
本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri
-
jQuery中ajax的load()方法用法实例
本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素. 语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.
-
jQuery中ajax的post()方法用法实例
本文实例讲述了jQuery中ajax的post()方法用法.分享给大家供大家参考.具体分析如下: $.post() 方法通过HTTP POST请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.post(URL,data,callback); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,规定连同请求发送的数据. 3.callback:可选,规定请求成功后所执行的函数名. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&g
-
Jquery中find与each方法用法实例
本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id") $(this) $(element) 等等,只要灵活运用,就能爆发出强大的可造型. 但是在实际使用中,仍然觉得有些不足. 如果想要在某个元素下寻找特定的元素,仅仅依靠上面这个方法,就必须对 $("
-
JavaScript中set与get方法用法示例
本文实例分析了JavaScript中set与get方法用法.分享给大家供大家参考,具体如下: 1.get与set是方法,因为是方法,所以可以进行判断. 2.get是得到 一般是要返回的 set 是设置 不用返回 3.如果调用对象内部的属性约定的命名方式是_age 然后就是几个例子来简单说明一下: var person ={ _name : "chen", age:21, set name(name) {this._name = name;},get name() {return t
-
jQuery中hide()方法用法实例
本文实例讲述了jQuery中hide()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以将匹配元素隐藏. hide()方法的用法: 此方法如果没有对隐藏效果加以时间限定,那么匹配元素会被瞬间隐藏.例如: 复制代码 代码如下: $("div").hide() 以上代码可以将所有div元素瞬间隐藏. 如果方法对隐藏效果加以时间限定,那么匹配元素将会在限定的事件内以比较优雅的形式隐藏.例如: 复制代码 代码如下: $("div").hide(2000) 以上代码
随机推荐
- Ruby中proc和lambda的两个区别
- QQ聊天记录删除了怎么恢复 详细步骤教程
- 将DataTable中的一行复制到另一个DataTable的方法
- ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
- Symfony2函数用法实例分析
- 利用Psyco提升Python运行速度
- Java基础教程之继承详解
- 基于C语言实现的贪吃蛇游戏完整实例代码
- jQuery下通过replace字符串替换实现大小图片切换
- Jquery实现的一种常用高亮效果示例代码
- JavaScript开发人员的10个关键习惯小结
- Java集合之HashMap用法详解
- 利用Node.js检测端口是否被占用的方法
- 在vue项目中安装使用Mint-UI的方法
- python爬虫面试宝典(常见问题)
- python用户管理系统
- Javascript实现秒表倒计时功能
- Python爬虫框架scrapy实现的文件下载功能示例
- Java锁机制Lock用法示例
- Python3 使用selenium插件爬取苏宁商家联系电话