14-1 jquery的dom操做和事件對象

時間 2021-04-13

標籤 html jquery 瀏覽器 app dom ide 函數 this orm htm 欄目 JQuery 简体版

原文原文鏈接

一 jquery的操做有，插入，修改，刪除，克隆。具體見下方代碼實例：html

  1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4     <meta charset="UTF-8">  5     <title>文檔操做</title>  6 </head>  7 <style>  8     div {  9         background-color: green; 10         height: 200px; 11  12     } 13  14     .active { 15         font-size: 20px; 16     } 17 </style> 18 <body> 19 <ul> 20  21 </ul> 22 <p class="app">風調雨順</p> 23  24 <button> 25     <!--<input type="submit" value="克隆按鈕">--> 26     <input type="submit" value="克隆"> 27 </button> 28  29 <!--導入js--> 30 <script src="jquery-3.3.1.min.js"></script> 31 <!--插入操做  --> 32 <!--語法：父元素.append(子元素)--> 33 <script> 34  35  36     //jquery操做文檔的方式,注意到導入jquery包 37     var oli = document.createElement('li'); 38     oli.innerHTML = '哈哈哈';//字符串 39     $("ul").append('<li>1233</li>');//js對象 40     $('ul').append(oli); 41     $('ul').append($('.app'));//jquery對象 42     // 注意若是追加的是jquery對象那麼這些元素將從原位置上消失。簡言之，就是一個移動操做。app這個p標籤原本是在外面的，追加 43     // 以後就移動到了ul標籤裏面 44 </script> 45  46 <!--知識點2，--> 47 <!--子元素.appendTo(父元素)--> 48 <script> 49     $('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active')//追加子元素li到父元素ul裏面而且添加class=active 50 </script> 51  52 <!--知識點3;語法：父元素.prepend(子元素) 解釋：前置添加， 添加到父元素的第一個位置--> 53 <script> 54     $('ul').prepend('<li>我是第一個</li>') 55 </script> 56  57 <!--知識點4 語法：父元素.prependTo(子元素)解釋後置添加， 添加到父元素的最後一個位置--> 58 <!--<script>--> 59 <!--$('<li>我是最後一個</li>').prependTo($('ul'))--> 60  61 <!--</script>--> 62 <!--知識點5語法：父元素.after(子元素)； 子元素.inserAfter(父元素)；解釋：在匹配的元素以後插入內容 --> 63  64 <script> 65     $('ul').after('<h4>我是一個h4標題</h4>'); 66     $('<h5>我是一個h5標題</h5>').insertAfter('ul'); 67 </script> 68 <!--知識點6 語法：父元素.before(子元素)；子元素.inserBefore(父元素)；解釋：在匹配的元素以前插入內容 --> 69 </body> 70 <script> 71     $('ul').before('<h3>我是一個h3標題</h3>') 72 $('<h2>我是一個h2標題</h2>').insertBefore('ul') 73 </script> 74 <!--二 克隆操做-------------------------------------------------------------------------語法：$(選擇器).clone();--> 75 <script> 76     $('button').click(function() { 77  78   // 1.clone()：克隆匹配的DOM元素 79  // 2.clone(true)：元素以及其全部的事件處理而且選中這些克隆的副本(簡言之，副本具備與真身同樣的事件處理能力)就是克隆以後的按鈕也具備克隆的功能 80   $(this).clone(true).insertAfter(this); 81 }) 82 </script> 83  84 <!--&lt;###############;三修改操做-######################################################################--> 85 <!--語法$(selector).replaceWith(content); 解釋：將全部匹配的元素替換成指定的string、js對象、jquery對象。--> 86 <script> 87     $('h5').replaceWith('<a href="#">hello world</a>');//將全部的h5標題替換爲a標籤 88     $('h2').replaceWith($('.app'));//將全部h2標題標籤替換成class爲app的dom元素,自身所在的位置也會消失 89     $('li').replaceWith($('h3')) 90 </script> 91 <!--知識點2 replaceaAll 替換全部--> 92 <script> 93     $('<p>哈哈哈</p>').replaceAll('h4');//將全部的h4標籤替換成p標籤 94 </script> 95 <!--###########################四刪除操做################################################--> 96 <!--知識點1 語法$(selector).remove(); 解釋：刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）--> 97 <script> 98     // $("button").remove(); 99 100 </script>101 <!--知識點2 語法：$(selector).detach();解釋：刪除原有的節點後，事件會保留-->102 <script>103      var $btn = $('button').detach();104     //此時按鈕能追加到ul中105      $('ul').append($btn)106 107 </script>108 <!--知識點3  語法：$(selector).empty(); 解釋：清空選中元素中的全部後代節點-->109 <script>110     $('ul').empty()111 </script>112 113 </html>

View Codejquery

二 jquery事件對象瀏覽器

1 解釋：2 3 Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。4 5 1  何時會產生Event 對象呢? 
6          例如: 當用戶單擊某個元素的時候,咱們給這個元素註冊的事件就會觸發,該事件的本質就是一個函數,而該函數的形參接收一個event對象7 8  2.事件一般與函數結合使用，函數不會在事件發生前被執行！

經常使用的是這三個：app

target 返回觸發此事件的元素（事件的目標節點）。
preventDefault() 通知瀏覽器不要執行與事件關聯的默認動做。
stopPropagation() 再也不派發事件。dom

例子：ide

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Title</title> 6 </head> 7 <body> 8 <form action=""> 9 10 </form>11 <a href="http://www.baidu.com" title="">百度</a>12 <script src="jquery-3.3.1.min.js"></script>13 <script>14     $(function () {15         formDom();16 17         function formDom(argument) {18             $('form').append(`19                 <label>用戶名</label>20                 <input type="text" id='user'>21                 <input type="submit">`);22         }23 24         // 點擊 type='submit'的按鈕 會觸發 form表單的submit事件25         $('form').submit(function (event) {26             // alert(event);27 28             //  阻止from表單的默認行爲29             event.preventDefault();30             console.log(event)31         });32 33 34         // 實時監聽input輸入框內的value 經過oninput事件35         $('#user')[0].oninput = function (event) {36             console.log(event.target.value);  //獲取最後一個值37         };38         //阻止a標籤的默認行爲39         $('a').click(function (event) {40             event.preventDefault();//阻止默認事件表明點擊以後不跳轉41             // console.log(event);42             event.stopPropagation();//阻止a標籤冒泡 就是當a標籤點擊完成以後，再也不往body，html,document下面關聯43             // //下面這三個返回的內容是同樣的，當結合冒泡使用的時候  event.target就是點擊的當前的對象（內層的標籤） / currentTarget指的是當前的標籤44 45             // console.log(event.target);46             // console.log(event.currentTarget);47             // console.log(this);48             console.log('a標籤點擊了')49         });50     })51 </script>52 </body>53 </html>