二十五、python學習之前端(八): JQuery高階
阿新 • • 發佈：2018-11-01
一、事假冒泡:
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>
