二十五、python学习之前端(七): JQuery高级
一、事假冒泡:
1. 什么是事件冒泡 :
- 事件是可以传播的;
- 事件冒泡不仅存在于JQ,原生JS也是存在事件冒泡的;
- 事件冒泡就是传播的一种形式;
- 事件的传播形式: 冒泡和捕获 ;
- 事件冒泡:子元素的时间被处罚, 父盒子元素的同类事件也会被触发。大多数情况下,冒泡是要被取消的;
2.事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
3.阻止事件冒泡:
- 方法一: return flase;
- 方法二:阻止事件传播:event.stopPropagation();
既可以阻止冒泡也可以阻止捕获
3.1 浏览器默认行为:
- 表单的提交
- a链接点击后的跳转
- 按键盘后，浏览器能够输入内容。
- 获取焦点事件后，input能够获取焦点。
3.2 案例2: 弹窗
强行来一波事件冒泡:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例_事件冒泡实现弹窗</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
// 需求1: 点击按钮显示盒子，点击X号隐藏盒子。
// 点击按钮,显示弹窗
$("#btn01").click(function() {
$("#pop").show(400)
return false
})
// 点击关闭按钮,隐藏
$("#shutoff").click(function() {
$("#pop").hide(200)
})
// 需求2:强行使用一波冒泡,实现点击mask遮罩,完成对弹窗的隐藏
$(document).click(function() {
$("#pop").hide(200)
})
// 提示框中的所有内容不应该有冒泡
$(".pop_con").click(function() {
return false;
})
})
</script>
</head>
<body>
<!-- 按钮 -->
<input type="button" value="弹出弹框" id="btn01">
<!-- 整个显示隐藏的大盒子 -->
<div class="pop_main" id="pop">
<!-- 部分一: 登录框 -->
<div class="pop_con">
<div class="pop_title">
<h3>系统提示</h3>
<!-- 用于隐藏的X号 -->
<a href="#" id="shutoff">×</a>
</div>
<div class="pop_detail">
<p class="pop_text">亲！请关注近期的优惠活动！</p>
</div>
<div class="pop_footer">
</div>
</div>
<!-- 部分二: 遮罩层 -->
<div class="mask"></div>
</div>
</body>
</html>
二、事件委托:
1.什么是事件委托:
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
2.一般绑定事件的写法:
问题:新创建出来的元素,没有老事件
解决:可以使用createElement()创建新的标签,以保证原来的标签的事件不丢失,但是,新建的元素依然没有老事件。
3.事件委托的写法:
让新创建出来的标签也有事件,就是事件委托
- 方法一:(事件委托):
$('ul').delegate('li', 'click', function(){事件逻辑;}) - 方法二:(事件委托):
('ul').on('li', 'click', function(){事件逻辑;}) - 事件不委托:
('li').on('click', function(){事件逻辑;})
4.总结:
- 以后如果出现创建新元素,name绑定事件的时候最好用事件委托;
- 冒泡:
-
- 出问题了的时候能够回取消冒泡;
-
- 知道事件委托的底层原理就是冒泡;
三、DOM操作:
1.DOM操作:
Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：
- 移动现有标签的位置;
- 将新创建的标签插入到现有的标签中;
2. 创建,添加,删除,复制,替换:
(参考代码06)
创建元素:
创建元素的格式 var $newEel = $(’’); 一定要有尖括号(<>)
var $newLi = $(‘
子元素添加:
- append():向父标签的最末行条件
- appendTo():
$('ul').append($newLi)
$newLi.appendTo($('ul')) // 将newLi添加到ul后边
- prepend():向父标签的最前端添加
- prependTo():
// 子元素添加: 添加到ul子元素的最前边
$('ul').prepend($newLi)
$newLi.prependTo($('ul'))
兄弟元素之后添加:
- after():放在兄弟元素之后;
- insertAfter()：
// 兄弟元素添加:添加在"#box"之后
$("#box").after($newLi)
$newLi.insertAfter($('#box')
兄弟元素之前添加:
- before():
- insertBefore()
// 兄弟元素添加:添加到"#box"之前
$("#box").before($newLi)
$newLi.insertBefore($("#box"))
删除元素:
- $(’#div1’).remove();
复制:
- clone():参数传true,保存元素事件
3.案例:to do list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToDoList</title>
<link rel="stylesheet" href="css/todolist.css">
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
// 需求:添加,删除,向上,向下移动
// 添加
$("#btn1").click(function() {
// 判断是否为空字符串
if($('#txt1').val() == ""){
alert("内容为空,不能添加...")
return;
}
// 创建li标签
var $newLi = $('<li>'+
'<span>'+ $("#txt1").val() +'</span>'+
'<a href="javascript:;" class="up"> ↑ </a>'+
'<a href="javascript:;" class="down"> ↓ </a>'+
'<a href="javascript:;" class="del">删除</a>'+
'</li>')
// 放入ul中
$('#list').prepend($newLi)
// 清空输入框,获取插入条光标
$("#txt1").val("").focus()
})
// 删除,向上,向下移动:使用事件委托实现
$("#list").delegate('a', 'click',function() {
// 判断点击了那一个a标签
if($(this).attr('class') == "del") {
// 删除
$(this).parent().remove()
} else if($(this).attr('class') == "down") {
// 向下
// 判断已经是最下边的了
var currentLi = $(this).parent()
if(currentLi.next().length == 0){
alert("已经是最后一个了")
return;
}
currentLi.next().after(currentLi)
}else if($(this).attr('class') == "up") {
// 向上
var currentLi = $(this).parent()
// 判断已经是第一个了
if(currentLi.index() == 0) {
alert("已经是第一个了")
return;
}
currentLi.prev().before(currentLi)
}
})
})
</script>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<!-- 添加内容区域 -->
<input type="text" name="" id="txt1" class="inputtxt">
<!-- 添加按钮 -->
<input type="button" name="" value="增加" id="btn1" class="inputbtn">
<!-- 将来放入这个ul标签中 -->
<ul id="list" class="list">
<!-- 一条信息的构成 -->
<li>
<span>学习html</span>
<a href="javascript:;" class="up"> ↑ </a>
<a href="javascript:;" class="down"> ↓ </a>
<a href="javascript:;" class="del">删除</a>
</li>
<li>
<span>学习css</span>
<a href="javascript:;" class="up"> ↑ </a>
<a href="javascript:;" class="down"> ↓ </a>
<a href="javascript:;" class="del">删除</a>
</li>
<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
</ul>
</div>
</body>
</html>