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

時間 2019-11-29

標籤 jquery dom 事件對象欄目 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 Code

二 jquery事件對象jquery

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

經常使用的是這三個：瀏覽器

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

例子：dom

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。