一 Jquery簡介

1 什麼是Jquery

#1. jQuery 是一個高效、精簡併且功能豐富的JavaScript工具庫
#2. jQuery極大的簡化了JavaScript程式設計

2 為何要用Jquery

jQuery的優勢（jQuery的宗旨就是：“Write less, do more.“）
#1、開源 免費
#2、一款輕量級的JS框架。jQuery核心js檔案才幾十kb，不會影響頁面載入速度。
#3、便捷的選擇器與DOM操作，
#4、鏈式表示式。jQuery的鏈式操作可以把多個操作寫在一行程式碼裡，更加簡潔。
#5、事件、樣式、動畫支援。jQuery還簡化了js操作css的程式碼，並且程式碼的可讀性也比js要強。
#6、Ajax操作支援。jQuery簡化了AJAX操作，後端只需返回一個JSON格式的字串就能完成與前端的通訊。
#7、跨瀏覽器相容。jQuery基本相容了現在主流的瀏覽器，不用再為瀏覽器的相容問題而傷透腦筋。
#8、外掛擴充套件開發。jQuery有著豐富的第三方的外掛，例如：樹形選單、日期控制元件、圖片切換外掛、彈出視窗等等基本前端頁面上的元件都有對應外掛，並且用jQuery外掛做出來的效果很炫，並且可以根據自己需要去改寫和封裝外掛，簡單實用。
 

3 Jquery版本

#1.x：相容IE678,使用最為廣泛的，官方只做BUG維護，功能不再新增。因此一般專案來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
#2.x：不相容IE678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮相容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
#3.x：不相容IE678，只支援最新的瀏覽器。需要注意的是很多老的jQuery外掛不支援3.x版。目前該版本是官方主要更新維護的版本。

#ps：維護IE678是一件讓人頭疼的事情，一般我們都會額外載入一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減少，PC端使用者已經逐步被移動端使用者所取代，如果沒有特殊要求的話，一般都會選擇放棄對678的支援。
 

二 Jquery基本使用

1 引入

先下載到本地，然後引用，才能使用
下載地址：https://jquery.com/download/

#方式一：本地引入
<script src="jquery-3.3.1.min.js"></script>
<script>
    //注意，一定在引入jQuery之後，再使用jQuery提供的各種操作
</script>

#方式二：直接使用CDN
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    code...
</script>
 

2 Jquery物件

$是jQuery的別名

jQuery('.item').show()
//等同於
$('.item').show()

$物件可以用作選擇器獲取元素，還可以建立DOM物件

3 文件就緒時間

DOM文件載入的步驟

1. 解析HTML結構。
2. 載入外部指令碼和樣式表文件。
3. 解析並執行指令碼程式碼。
4. DOM樹構建完成。
5. 載入圖片等外部檔案。
6. 頁面載入完畢。

等待文件載入完畢後執行函式，有兩種方式

#1、執行時間不同
window.onload必須等到頁面內包括圖片的所有元素載入完畢後才能執行。 # BOM執行方式

$(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。

#2、編寫個數不同
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個 # BOM編寫方式

$(document).ready()可以同時編寫多個，並且都可以得到執行

#3、簡化寫法不同
window.onload沒有簡化寫法

$(document).ready(function(){})可以簡寫成$(function(){});

4 鏈式操作

#鏈式呼叫，原理就是 呼叫一個例項化方法返回的是當前的物件
$('.box1').css('color','red').next().css('width','200px').css('height','200px').css('background','green').removeAttr('class')

5 JqueryDom和jsDom

#1、通過原生js獲取的dom物件，我們稱之為jsDOM或者原生DOM

#2、通過jQuery選擇器獲取的dom物件，我們稱之為 jQuery DOM

#3、jQuery DOM本質上 是由 jsDOM組成的集合，是個類陣列物件。可以通過 [索引] 獲取其中的jsDOM，$(jsDOM) 可以轉為 jQuery DOM如下
var box = document.getElementsByClassName('box'); #獲取js DOM物件
Js DOM物件 ==> JQ DOM物件$(js DOM物件)  # 例如 $(box)
JQ DOM物件 ==> JS DOM物件
$("選擇器")[0] # 或者$("選擇器").get(0)

三 選擇器

id選擇器：

$("#id")

標籤選擇器：

$("tagName")

class選擇器：

$(".className")

所有元素選擇器：

$("*")

交集選擇器：

$("div.c1")  // 找到類為c1的div標籤

並集選擇器：

$("#id, .className, tagName")

層級選擇器：

x和y可以為任意選擇器

$("x y");   // x的所有後代y（子子孫孫）
$("x > y"); // x的所有兒子y（兒子）
$("x + y")  // 找到所有緊挨在x後面的y
$("x ~ y")  // x之後所有的兄弟y 

基本篩選器：

:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大於給定索引值的元素
:lt(index)// 匹配所有小於給定索引值的元素
:not(選擇器)// 過濾掉所有滿足not條件的標籤
:has(選擇器)// 過濾出所有後代中滿足has條件的標籤

#例如
$("div:has(h1)")// 找到所有後代中有h1標籤的div標籤
$("div:has(.c1)")// 找到所有後代中有c1樣式類的div標籤
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標籤
$("li:not(:has(a))")// 找到所有！！！後代中！！！不含a標籤的li標籤

屬性選擇器：

[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

例子：

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox型別的input標籤
$("input[type!='text']");// 取到型別不是text的input標籤

表單常用篩選：

:text
:password:file
:radio
:checkbox
:submit
:reset
:button

例子：

$(":checkbox")  // 找到所有的checkbox

表單物件屬性:

:enabled
:disabled
:checked
:selected

例子：

找到可用的input標籤

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input標籤 

找到被選中的option：

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">廣州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被選中的option

四 篩選器

下一個兄弟元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一個兄弟元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父親元素：

$("#id").parent()
$("#id").parents()  // 查詢當前元素的所有的父輩元素
$("#id").parentsUntil() // 查詢當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。

兒子和兄弟元素：

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

查詢

搜尋所有與指定表示式匹配的元素。這個函式是找出正在處理的元素的後代元素的好方法。

$("div").find("p")

等價於$("div p")

篩選

篩選出與指定表示式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表示式。

$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的

等價於 $("div.c1")

補充：

.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not() // 從匹配元素的集合中刪除與指定表示式匹配的元素
.has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq() // 索引值等於指定值的元素

五 標籤操作之樣式操作

樣式類

addClass();      // 新增指定的CSS類名。
removeClass(); // 移除指定的CSS類名。
hasClass();      // 判斷樣式存不存在
toggleClass();  // 切換CSS類名，如果有就移除，如果沒有就新增。

CSS

css("color","red")   //DOM操作：tag.style.color="red"

示例：

$("p").css("color", "red");     //將所有p標籤的字型設定為紅色

位置

offset()       // 獲取匹配元素在當前視窗的相對偏移或設定元素位置
position()    // 獲取匹配元素相對父元素的偏移
scrollTop()   // 獲取匹配元素相對滾動條頂部的偏移
scrollLeft()   // 獲取匹配元素相對滾動條左側的偏移例1$("#bb").offset({"left":100,"top":100}) 例2$(window).scrollTop(0);  // 跳到首頁

.offset()方法允許我們檢索一個元素相對於文件（document）的當前位置。

和 .position()的差別在於： .position()是相對於相對於父級元素的位移。

尺寸：

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

六 標籤操作之文字內容操作

html

html()是獲取選中標籤元素中所有的內容

html(val)設定值：設定該元素的所有內容 會替換掉 標籤中原來的內容

$('ul').html('<a href="#">百度一下</a>')
    //可以使用函式來設定所有匹配元素的內容
$('ul').html(function(){
    return '哈哈哈'
}) 

text

text() 獲取所有匹配元素包含的文字內容

text(val) 設定該所有匹配元素的文字內容

注意：值為標籤的時候 不會被渲染為標籤元素 只會被當做值渲染到瀏覽器中

val

// 用途：val()用於操作input的value值

// 示範一：
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
<input type="radio" name="sex" value="none">
$('input[type=radio]').val(['male',])

// 示範二：
<input type="checkbox" name="hobbies" value="111">
<input type="checkbox" name="hobbies" value="222">
<input type="checkbox" name="hobbies" value="333">
$('input[type=checkbox]').val(['111','222']) 

七 標籤操作之屬性操作

用於ID等或自定義屬性：

attr(attrName)                               // 返回第一個匹配元素的屬性值
$('.box2 img').attr('title','美女')          // 為所有匹配元素設定一個屬性值
attr({'title': '美女', 'alt':'圖片被狗吃了'}) // 為所有匹配元素設定多個屬性值
removeAttr('title')                        // 從每一個匹配的元素中刪除一個屬性

用於checkbox和radio

prop('value') // 獲取value屬性的值
prop('checked',true); // 設定屬性
removeProp('value') // 移除value屬性

注意：

在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題。為了相容性，我們在處理checkbox和radio的時候儘量使用特定的prop()，不要使用attr("checked", "checked")。

<h3>愛好</h3>
<input type="checkbox" name="hobbies" value="basketball">籃球
<input type="checkbox" name="hobbies" value="football">足球
<input type="checkbox" name="hobbies" value="coding">程式設計

<h3>性別</h3>
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
<input type="radio" name="sex" value="none">

<script>
    $(':checkbox[value=football]').prop('checked',true);
    $(':radio[value=male]').prop('checked',true);
</script>

例項：全選、反選、取消

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h3>選單</h3>
<input type="button" value="全選" id="all">
<input type="button" value="反選" id="reverse">
<input type="button" value="取消" id="cancel">
<p>
    蒸羊羔<input type="checkbox" name="menu">

</p>
<p>
    蒸鹿茸<input type="checkbox" name="menu">

</p>
<p>
    蒸熊掌<input type="checkbox" name="menu">

</p>
<p>
    燒花鴨<input type="checkbox" name="menu">

</p>
<p>
    燒雛雞<input type="checkbox" name="menu">

</p>
<p>
    燒子鵝<input type="checkbox" name="menu">

</p>


<script src="jquery-3.3.1.min.js"></script>
<script>
    $('#all').click(function () {
        $('p input').prop('checked', true);
    });

    $('#reverse').click(function () {
        $('p input').each(function () {
            $(this).prop('checked', !$(this).prop('checked'));
        })
    });

    $('#cancel').click(function () {
        $('p input').prop('checked', false);

    });


</script>
</body>
</html>

示例：全選、反選、取消

八 標籤操作之文件處理

//內部
$(A).appendTo(B)    // 把A追加到B內部的最後面
$(A).prependTo(B)   // 把A前置到B內部的最前面

//外部
$(A).insertAfter(B)    // 把A放到B外部的後面
$(A).insertBefore(B)    // 把A放到B外部的前面

移除和清空元素

$('.p1').remove()  // 從DOM中刪除所有匹配的元素。====>把元素本身刪掉
$('.p1').empty()   // 刪除匹配的元素集合中所有的子節點====》把元素的子元素都刪掉（包含文字內容）

替換

replaceWith()
replaceAll()

克隆

clone()
// clone方法不加引數true，克隆標籤但不克隆標籤帶的事件
// clone方法加引數true，克隆標籤並且克隆標籤帶的事件

案例：點選複製

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龍寶刀，點選就送</button>
<hr>
<button id="b2">屠龍寶刀，點選就送</button>

<script src="jquery-3.3.1.min.js"></script>
<script>
  // clone方法不加引數true，克隆標籤但不克隆標籤帶的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加引數true，克隆標籤並且克隆標籤帶的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

案例：點選複製

八 事件介紹

什麼是事件？

//什麼是事件？？？
滑鼠點選click、頁面滾動onscroll、滑鼠懸停mouseover等對元素的操作稱之為事件，對HTML元素產生的事件可以被繫結上具體的操作，稱之為事件繫結，比如在點選某一個元素時觸發某個功能的執行

// 注意：
首先我們要知道，瀏覽器中的各種操作不是因為我們繫結事件之後才存在，即便是我們不對任何元素繫結任何事件，我們仍然可以對元素進行各種如click、mouseover等等操作
只不過沒有為元素繫結事件時，觸發click或mouseover等操作將不會執行任何動作
總結下來，我們之所以繫結事件，就是因為想要在觸發某個操作時去執行一些動作/函式而非無所事事

什麼是事件流？

由於html是一個樹形巢狀結構，如下

html
    |
    |___body
             |
             |___div.box1
                        |
                        |____div.box2

以點選事件為例，當我們點選div.box2時，由於div.box2在div.box1裡,所以我們同時也在點選div.box1,同理，我們同時也在點選body、同時也在點選html

如果我們為div.box2、div.box1、body、html同時繫結點選事件，那在點選div.box2時，該元素他爹、爺爺、祖爺爺...的點選事件都會觸發，具體是誰先觸發，按照何種順序，我們必須瞭解一下js的事件流

//事件流描述的是從頁面中接收事件的順序，js事件流分為三個階段

① 事件捕獲階段；

② 處於目標階段；

③ 事件冒泡階段

// 強調：jQuery只有②③ 階段

以點選事件為例作出比喻：
整個螢幕相當於一片草地，點選一下螢幕中的某個位置，相當於在螢幕中埋了一顆地雷
事件捕獲就是掃雷的過程：從外向裡掃雷
處於目標階段就是找到了雷，然後嘣的一聲，雷爆炸了
事件冒泡階段就是雷爆炸了向外產生的衝擊波：從內向外擴散，以雷為中心方圓幾十裡地都給丫的炸死

可以通過向文件或者文件中的元素新增“事件偵聽器”（addEventListener）來驗證上述流程，

addEventListener這個方法接收3個引數：要處理的事件名、事件觸發時執行的函式、一個布林值。

布林值引數如果是true，表示在捕獲階段執行函式；如果是false，表示在冒泡階段執行函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

        window.onload = function () {

            // 1、事件捕獲階段：

            document.addEventListener('click', function () { // document代表的是整個html頁面；
                console.log('document處於事件捕獲階段');
            }, true);

            document.documentElement.addEventListener('click', function () { // document.documentElement代表的是<html>標籤；
                console.log('html處於事件捕獲階段');
            }, true);

            document.body.addEventListener('click', function () { // document.body代表的是<body>標籤；
                console.log('body處於事件捕獲階段');
            }, true);


            var oBtn = document.getElementById('btn');
            oBtn.addEventListener('click', function () { // btn標籤
                console.log('btn處於事件捕獲階段');
            }, true);


            // 2、處於目標階段


            // 3、事件冒泡階段
            document.addEventListener('click', function () { // document代表的是整個html頁面；
                console.log('document處於事件冒泡階段');
            }, false);

            document.documentElement.addEventListener('click', function () { // // document.documentElement代表的是<html>標籤；
                console.log('html處於事件冒泡階段');
            }, false);

            document.body.addEventListener('click', function () { // document.body代表的是<body>標籤；
                console.log('body處於事件冒泡階段');
            }, false);

            oBtn.addEventListener('click', function () { // btn
                console.log('btn處於事件冒泡階段');
            }, false);
        };

    </script>
</head>
<body>
<!--
href="javascript:;"代表阻止預設事件
-->
<a href="javascript:;" id="btn">按鈕</a>
</body>
</html>

當我們點選這個btn的時候，看看頁面都輸出了什麼：

總結事件捕獲與事件冒泡

// 1、事件捕獲指的是從document到觸發事件的那個元素：自上而下的去觸發事件
// 2、事件冒泡指的是從觸發事件的那個元素到document：自下而上的去觸發事件 

九 時間操作

1、常見事件

2、事件繫結與解除繫結的方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 500px;
            height: 500px;
            background-color: gray;
        }
    </style>
</head>
<body>
<div class="box1">
    div1
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 繫結方式一：
    $('.box1').click(function () {
        alert('繫結方式一')
    });

    // 繫結方式二：
    $('.box1').bind('click', function () {
        alert('繫結方式二')
    });

    $('.box1').bind('mouseover mouseout', function () { // 繫結多個事件做同一件事
        console.log('繫結多個事件做同一件事')
    });
    $('.box1').bind({
        'mouseup': function () {
            console.log('mouseover');
        },
        'mousedown': function () {
            console.log('mouseout');
        }
    });

    // 移除事件，unbind沒有引數則代表移除所有事件
    setTimeout(function () {
        alert('3s啦。。。mouseover失效');
        $('.box1').unbind('mouseover');
    }, 3000);

    setTimeout(function () {
        alert('10s啦。。。所有事件移除');
        $('.box1').unbind();
    }, 10000)
</script>
</body>
</html>

3、事件物件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 500px;
            height: 500px;
            background-color: gray;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box1">
    div1
    <div class="box2">div2</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>

    // this和event.target
    // 相同之處：
    //     1、this和event.target都是js dom物件
    // 不同之處：
    //     1、js中事件是會冒泡的，所以this是會變化的，但event.target不會變化，它永遠是直接接受事件的目標js DOM元素，這一點區別將在後續的事件委託的知識點中體現；
    $('.box2').bind('click',function (event) {
        console.log(event.type); // event.type事件的型別為：click
        console.log(event.target); // event.target指的是點選的那個元素
        console.log(event.pageX); // 點選事件/點選位置相對於視窗的X軸位置
        console.log(event.pageY);
    })
    
    // 常用的事件方法：1 阻止事件冒泡 2.阻止預設事件
    // ev.preventDefault() 阻止預設事件
    // ev.stopPropagation()阻止事件冒泡

    // return false 既阻止預設事件又阻止事件冒泡

</script>
</body>
</html>

4、繫結事件示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 800px;
            height: 800px;
            background-color: gray;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box1">
    div1
    <div class="box2">div2
        <input type="text" id="inp">
        <br>
        男<input type="radio" name="sex" value="male">
        女<input type="radio" name="sex" value="female">
        未解之謎<input type="radio" name="sex" value="none">

        <select name="city" id="select">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
        </select>

        <br>
        <input type="text" id="inp1" value="我就是我，一個憂鬱的美男子">
        <br>
        <textarea name="" id="inp2" cols="5" rows="5">
            你選中我，我就是觸發了
        </textarea>

        <form action="https://www.baidu.com" id="form">
            使用者名稱：<input type="text" name="user">
            <br>
            密碼：<input type="text" name="pwd">
            <br>
            <input type="submit" value="提交" id="submit">
        </form>
    </div>
</div>

<script src="jquery-3.3.1.min.js"></script>
<script>


    // 滑鼠事件

    // click與dblclick只應該存在一個，大多數都是單擊事件
    $('.box1').click(function (event) {
        // console.log(event.type); // event.type事件的型別為：click
        console.log(event.target); // event.target指的是點選的那個元素
    })

    $('.box1').dblclick(function (event) {
        console.log(event.target); // event.target指的是點選的那個元素
    })


    $('.box1').mousedown(function (event) {
        console.log('按照滑鼠左鍵不鬆手');
    });
    $('.box1').mouseup(function (event) {
        console.log('按照滑鼠左鍵鬆手');
    });


    $('.box1').mousemove(function (event) {
        console.log('移動滑鼠', event.pageX, event.pageY);
    });


    $('.box1').mouseover(function (event) {
        console.log('元素以及該元素的子元素在滑鼠移入時都會觸發,當前的div是：', event.target.innerText);
    });
    $('.box1').mouseout(function (event) {
        console.log('元素以及該元素的子元素在滑鼠離開時都會觸發，當前的div是：', event.target.innerText);
    });

    $('.box1').mouseenter(function (event) {
        console.log('元素以在滑鼠移入時都會觸發(與子元素無關),當前的div是：', event.target.innerText);
    });
    $('.box1').mouseleave(function (event) {
        console.log('元素以在滑鼠移入時都會觸發(與子元素無關)，當前的div是：', event.target.innerText);
    });

    $('#inp').focus(function (event) {
        console.log('滑鼠聚焦');
    });
    $('#inp').blur(function (event) {
        console.log('滑鼠失去焦點');
    });


    // 往輸入框內輸入內容時，鍵盤的任意鍵按下則觸發=》即先觸發，再出內容
    $('#inp').keydown(function (event) {
        console.log('鍵盤按鍵按下');
    });
    
    // 往輸入框內輸入內容時，鍵盤的任意鍵抬起則觸發=》即先出內容，再觸發
    $('#inp').keyup(function (event) {
        console.log('鍵盤按鍵彈起');
    });


    //表單事件change：當輸入框的內容改變，並且失去焦點時，就會觸發
    $('#inp').change(function () {
        console.log(this.value); 
    });

    $('input[name=sex]').change(function (event) {
        console.log(this.value);
    });

    $('#select').change(function () {
        console.log(this.value);
    });

    //表單事件select：當輸入框的內容被選中時就觸發
    $('#inp1').select(function () {
        console.log(this.value);
    });
    $('#inp2').select(function () {
        console.log(this.value);
    });

    //表單事件submit
    $('#form').submit(function (event) {
        console.log($('input[name=user]').val());
        console.log($('input[name=pwd]').val());
        event.preventDefault();

    });


</script>
</body>
</html>

5、事件冒泡的應用之事件委託

新增的事件不能用於未來動,例如之前我們在做表格的增刪改時，每新增一行內容都需要重新繫結事件，基於事件委託就可以解決該問題

事件委託是通過事件冒泡的原理，利用父標籤去捕獲子標籤的事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
            border: 1px solid #000;
        }
        .baba {
            border: 1px solid red;
        }
    </style>

</head>
<body>
<div class="baba">
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>

    $('ul').on('mouseover','li',function (e) {
        $(e.target).css('background-color','#ddd').siblings().css('background-color','white');
        // e.stopPropagation();
        // return false;
    })

    $(".baba").mouseover(function () {
        alert("你應該在我的兒子裡組織事件冒泡！！！")
    })
</script>
</body>
</html>

如果不基於事件冒泡，有的同學可以想這麼做

$("li").on("mouseover", function () {
        $(this).css("background-color", "#ddd").siblings().css("background-color", "white");
    })

這麼做看起來可以達到目標，但存在兩方面的問題

//1、比起事件委託，該方式需要遍歷所有li節點，效能較低。

//2、如果我們在繫結事件完成後，頁面又動態的載入了一些元素……
$("<li>item7</li>").appendTo("ul"); 該方式需要我們給新增的元素再繫結一次事件