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> $(function(){ //追加字串 $('.comment').append('<li id="item">張無忌</li>') $("#item").click(function(){ alert($(this).text()); }); //追加js物件 var li = document.createElement("li") li.innerText = "謝遜"; $(".comment").append(li);//如果是jquery物件,相當於移動操作 setTimeout(function(){ $(".comment").append($("li").eq(0)); },2000); $("<li>周芷若</li>").appendTo(".comment").click(function(){ alert($(this).html()) }) }) </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 滑鼠彈起