js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
一、总结
一句话总结：在button中阻止事件冒泡。
1、如何咋button中阻止事件冒泡（两种方法）？
event.stopPropagation()和return false
31 $("#btn").click(function(){
32 // alert('#btn')
33 $('ul').show()
34 //event.stopPropagation()
35 return false
36 })
return false不仅阻止冒泡，还阻止默认事件执行
2、下拉列表如何实现？
button+li列表，button控制li列表显示隐藏
10 *{padding: 0;margin: 0}
11 #btn{width:200px;height: 24px;line-height: 24px;text-align: center; }
12 ul{
13 width: 198px;list-style-type: none;border:1px solid;
14 display: none;
15 }
22 <input type="button" id="btn" value="选择城市">
23 <ul>
24 <li>北京</li>
25 <li>天津</li>
26 <li>上海</li>
27 <li>广州</li>
28 <li>......</li>
29 </ul>
3、document代表的区域是哪个（为什么很多事件都监听document）？
浏览器除上面菜单栏都是document。因为元素都放在这个区域，故监听document，那么这个区域的所有的东西都能被监听。
4、页面有一个button按钮，你同时给button和document添加点击事件，那么你点击button，document里面的事件会执行么？
因为事件冒泡，肯定会执行
5、事件对象e和event什么时候使用？
本事件中使用event，要传递事件对象参数的时候使用e
31 $("#btn").click(function(){
32 // alert('#btn')
33 $('ul').show()
34 //event.stopPropagation()
35 return false
36 })
25 $('#txt1').keydown(function(e){
26 if (e.which==13&&e.ctrlKey) {
27 var str1=$('#txt1').val()
28 var str2=$('#txt2').val()
29 str2+=str1+'\n'
30 $('#txt2').val(str2)
31 $('#txt1').val('')
32 }
33 })
二、jquery如何实现点击button显示列表，点击其它位置隐藏列表
1、相关知识
案例描述：点击选择城市按钮之后自动弹出一个内容选择页面，点击其他任意地方，该页面关闭。
案例重点：该案例非常简单，重点在于通过这个小例子加深对事件冒泡，阻止冒泡的理解。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0}
#btn{width:200px;height: 24px;line-height: 24px;text-align: center; }
ul{
width: 198px;list-style-type: none;border:1px solid;
display: none;
}
body{margin: 50px} </style>
</style>
</head>
<body>
<input type="button" id="btn" value="选择城市">
<ul>
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>广州</li>
<li>......</li>
</ul>
<script>
$("#btn").click(function(){
// alert('#btn')
$('ul').show()
//event.stopPropagation()
return false
})
$(document).click(function(){
// alert('document')
$('ul').hide()
})
</script>
</body>
</html>
js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表的更多相关文章
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
随机推荐
- 记真实自己，炫精彩人生---《爱记》app使用体验
真的有款神器吗,能找到合适的Ta,能秀出自己的新生活,能让自己的心情舒爽,有,体验了下.就是爱记.果粉的福利. [爱记]是集心情记录.分享.评价与交流于一体的工具,TA是你心灵休憩的港湾,也是你记忆放 ...
- 空间矢量数据（.shp文件）之JAVA操作
Shape文件由ESRI开发.一个ESRI(Environmental Systems Research Institute)的shape文件包含一个主文件,一个索引文件,和一个dBASE表. 当中主 ...
- HTTP/2 服务器推送（Server Push）教程（HTTP/2 协议的主要目的是提高网页性能，配置Nginx和Apache）
HTTP/2 协议的主要目的是提高网页性能. 头信息(header)原来是直接传输文本,现在是压缩后传输.原来是同一个 TCP 连接里面,上一个回应(response)发送完了,服务器才能发送下一个, ...
- Thinkphp5图片上传正常，音频和视频上传失败的原因及解决
Thinkphp5图片上传正常,音频和视频上传失败的原因及解决 一.总结 一句话总结:php中默认限制了上传文件的大小为2M,查找错误的时候百度,且根据错误提示来查找错误. 我的实际问题是: 我的表单 ...
- GridView1.DataKeys[e.RowIndex].Value 是什么含义？
https://zhidao.baidu.com/question/88518619.html举个例子来说吧 你将一个student表绑定到grid上 这个表里有一些字段 包括id 姓名 学号 等等等 ...
- telint---切换当前正在运行的Linux系统的运行等级
telint命令用于切换当前正在运行的Linux系统的运行等级 Send control commands to the init daemon. --help Show this help --no ...
- 【翻译自mos文章】OGG的集成捕捉模式支持Oracle database标准版么？
OGG的集成捕捉模式支持Oracle database标准版么? 来源于: Does OGG 11.2.1 Integrated Capture Work with Oracle Database S ...
- 修改android的wifi客户端名称的两种方法
修改android的wifi客户端名称的两种方法 手机连接到无线路由时,在dhcp的客户端列表里面是这样的名称"android-89425253e5de3a2",这就是安卓 ...
- 前6名免费DNS服务 - 公共DNS服务
前6名免费DNS服务 - 公共DNS服务 谷歌 8.8.8.8,8.8.4.4备份,用户将期望并获得高可用性,如DNSSEC等过滤和安全保护. OpenDNS 现在是Cisco帝国的一部分,主要是20 ...
- thinkphp事务处理以及无效时的解决方案（整理）
thinkphp事务处理以及无效时的解决方案(整理) 一.总结 一句话总结:要程序里面支持事务,首先连接的数据库和数据表必须支持事务 mysql 1.InnoDB和MyISAM对事务的支持怎么样? I ...