Python學習 Day 049 - jQUery -DOM操作
阿新 • • 發佈：2018-11-14
主要內容:
1.jQuery的文件操作
2.
1.jQuery的文件操作
1.1插入操作
//語法: 父元素.append(子元素) //解釋:追加某元素,在父元素中新增的子元素.子元素可以為: stirng | element（js物件） | jquery元素
程式碼示例
<title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">
<li>倚天屠龍記</li>
</ul>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(
(1) 前置插入
// 語法: 父.prepend(子) 子.prepenTo(父)
<script src="./libs/jquery-3.3.1.js"></script> <script> $(function(){ //前置追加 $("#prepend").click(function(){ //獲取content值 let content = $('input[type=text]').val(); $('.comment').prepend(`<li>${content}</li>`); //兩種新增方式 //$(`<li>${content}</li>`).prependTo('.comment'); }) }) </script>
(2)後置追加
<script src="./libs/jquery-3.3.1.js"></script>
<script>
//後置追加
$("#append").click(function(){
let content = $("input[type=Text]").val();
if(!content){
return;
}
$('.comment').append(`<li>${content}</li>`);
})
</script>
(3)兄弟追加(後)
目標兄弟.after(要插入的兄弟)
要插入的兄弟.inertAfter(目標兄弟)
<script src="./libs/jquery-3.3.1.js"></script> <script> $("#after").click(function(){ let content = $('input[type=text]').val(); //第一種寫法 $("#item").after(`<li>${content}</li>`); //第二種寫法 $(`<li>${content}</li>`).insertAfter("#item") }) </script>
(4)兄弟追加(前)
//語法 目標兄弟.before(要插入的兄弟) 要插入的兄弟.inertBefore(目標兄弟)
1.2刪除和清空
//刪除 $(seletor).remove();//刪除整個標籤 事件也刪除 $(seletor).detach()//刪除整個標籤 事件保留 //清空 $(seletor).empty(); $(seletor).html(''); $(seletor).text('');
刪除程式碼
<script src="./libs/jquery-3.3.1.js"></script> <script> $("#del").click(function(){ alert(1); //remove()刪除,表示整個標籤都刪除(事件也刪除) // $("ul").remove(); var jbtn = $(this).remove(); $(".comment #item").append(jbtn) }); //detach 刪除標籤,事件不刪除 $("#detach").click(function(){ alert(1); var jbtn = $(this).detach(); console.log(jbtn); $('.comment #item').append(jbtn) })
清空程式碼
<script src="./libs/jquery-3.3.1.js"></script> <script> $(function(){ //清空父級元素的子內容 $('#empty').click(function(){ // $(".comment").empty(); // $(".comment").html(""); $(".comment").text(""); }) }) </script>
1.3 替換
<script src="./libs/jquery-3.3.1.js"></script> <script> $(function(){ $("#replace").click(function(){ $(".comment li a ").replaceWith('<span>1</span>') }) }) </script>
2.事件
(1)常見事件
- ondblclick
- onmouseover
- onmouseout
- onmouseenter
- onmouseleave
- onload
- onresize
- onscroll
- onfocus
- onblur
- oninput
(2)事件監聽
- 事件捕獲
- 處於目標階段
- 事件冒泡階段
oDiv.onclick = function(){}; 等價於 //false 表示沒有捕獲階段 處於目標 冒泡 oDiv.addEventLister('click',function(){},false);
事件流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn');
//1
document.addEventListener('click', function () {
console.log('document處於事件捕獲階段');
}, true);
//2
document.documentElement.addEventListener('click', function () {
console.log('html處於事件捕獲階段');
}, true);
//3
document.body.addEventListener('click', function () {
console.log('body處於事件捕獲階段');
}, true);
//4
oBtn.addEventListener('click', function () {
console.log('btn處於事件捕獲階段');
}, true);
//4
oBtn.addEventListener('click', function () {
console.log('btn處於事件冒泡階段');
}, false);
//5 false 表示冒泡
document.body.addEventListener('click', function () {
console.log('body處於事件冒泡階段');
}, false);
// //6
document.documentElement.addEventListener('click', function () {
console.log('html處於事件冒泡階段');
}, false);
//7
document.addEventListener('click', function () {
console.log('document處於事件冒泡階段');
}, false);
};
</script>
</head>
<body>
<a href="javascript:void(0);" id="btn">按鈕</a>
</body>
</html>
事件流
(3)資料驅動檢視
(4)事件物件
每個事件都會預設有個event物件
e.target 事件目標物件 e.keycode 鍵碼 e.stopPropogation();//阻止預設事件
-
-
dblclick 雙擊事件
-
mouseover 滑鼠移入事件(滑鼠穿過被選元素或被選元素的子元素會觸發)
-
mouseout
-
mouseenter(常用)進入事件(滑鼠只穿過被選元素會觸發事件)
-
mouseleave
-
mousedown 滑鼠按下
-
mouseup 滑鼠彈起