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 ...
随机推荐
- 怎样用redis实现分布式锁
引子 redis作为一个强大的key/value数据库.事实上还能够用来实现轻量级的分布式锁. 1.实现方案1 最早官方在SETNX命令页给了一个实现: acquire lock: SETNX loc ...
- CSS的导入方式：link与import方式的区别
在前端开发中,加载CSS样式文件有两种方式:link方式与import方式,它们之间的区别主要有以下几点: 1.兼容性不一样 link是一个HTML标签,所以它不存在兼容性问题,而import方式则具 ...
- CString与 char *之间的转换
http://www.cnblogs.com/watsonlong/archive/2011/04/15/2017086.html
- 【习题 8-3 UVA - 12545】Bits Equalizer
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果1的个数第一个串比第2个串多. 那么就无解. 否则. 找几个位置去凑1 优先找'?'然后才是0的位置 剩余的全都用swap操作就 ...
- 设计模式之禅——模板方法模式&钩子方法
** **板方法模式的定义: 定义一个操作的算法的框架,而将一些步骤延迟到子类中.使得子类可以不改变一个算法的框架即可重定义该算法的某些特定步骤. 例子:做一个简单的悍马车的模型 见UML图 一个抽象 ...
- [Express] Upload Files with Express
In this lesson we create a new Express web server app for handling file uploads and persisting them ...
- 为什么会出现NoSQL数据库
为什么会出现NoSQL数据库 一.总结 一句话总结:sql不支持分布式且且有性能瓶颈且不支持分布式,不同NoSQL适合不同的场景 1."不同的NoSQL数据库只适合不同的场景"这句 ...
- 11.Bean2Document-BEAN转document
1. package com.glodon.gspm.adapter.plugin.common; import com.glodon.cloudt.tenancy.context.TenantCon ...
- BZOJ3262: 陌上花开(三维偏序，CDQ分治)
Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),用三个整数表示. 现在要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量. 定义一朵花A比另一朵花B要美 ...
- 如何优雅的写UI——（1）MFC六大核心机制-程序初始化
很多做软件开发的人都有一种对事情刨根问底的精神,例如我们一直在用的MFC,很方便,不用学太多原理性的知识就可以做出各种窗口程序,但喜欢钻研的朋友肯定想知道,到底微软帮我们做了些什么,让我们在它的框架下 ...