jquery

楔子

需求一：有html標簽關系如下，請找到所有的含有a標簽的li標簽

    <div>
        <ul>
            <li class="city">北京</li>
            <li class="city"><a href="">上海</a></li>
            <li class="city">天津</li>
        </ul>
    </div>

<script>
    var objs = document.getElementsByClassName('city')
    for(var i=0;i< objs.length;i++){
        arry_a = objs[i].getElementsByTagName('a')
        if(arry_a.length>0){
            console.log(objs[i]
            )
        }
    }
</script>

$('li').has('a')

需求二：將上面的li標簽實現隔行換色效果

    var objs = document.getElementsByClassName('city')
    for(var i=0;i< objs.length;i++){
        if(i%2==0){
            objs[i].style.backgroundColor = 'lightblue'
        }else{
            objs[i].style.backgroundColor = 'lightyellow'
        }
    }

    $('li:odd').css('background-color','lightblue')
    $('li:even').css('background-color','lightyellow')

需求三：點擊按鈕，顯示頁面中的三個div，並給div添加文本內容

    <!--樣式-->
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>

    <!--body標簽-->    
    <button>操作</button>
    <div></div>
    <div></div>
    <div></div>

<script>
    var oBtn = document.getElementsByTagName('button')[0];
    var divArr = document.getElementsByTagName('div');
    oBtn.onclick = function () {
        for (var i = 0; i < divArr.length; i++) {
            divArr[i].style.display = "block";
            divArr[i].innerHTML = "趙雲";
        }
    }
</script>

    <script src="jquery3.4.1.js"></script>
    <script>
            var oBtn = $('button'); //根據標簽名獲取元素
            var oDiv = $('div'); //根據標簽名獲取元素
            oBtn.click(function(){
                oDiv.show(2000).html('趙雲');//顯示盒子，設置內容
            })
    </script>

盡管，你現在啥也不知道，你就知道用上了jquery咱們寫代碼節省了很多操作，便利了很多就OK了～～～

jqeury介紹

為什么要使用jQuery

jQuery 的兩大特點

• 鏈式編程：比如.show()和.html()可以連寫成.show().html()。

• 隱式迭代：隱式 對應的是 顯式。隱式迭代的意思是：在方法的內部進行循環遍歷，而不用我們自己再進行循環，簡化我們的操作，方便我們調用。

什么是 jQuery

jQuery 是 js 的一個庫，封裝了我們開發過程中常用的一些功能，方便我們調用，提高開發效率。

js庫是把我們常用的復雜功能封裝到簡單的方法中，我們用的時候，將庫直接引入然后調用方法即可。

初期，主要學習如何使用jQuery操作DOM，其實就是學習jQuery封裝好的那些功能API。

這些API的共同特點是：幾乎全都是方法。所以，在使用jQuery的API時，都是方法調用，也就是說要加小括號()，小括號里面是相應的參數，參數不同，功能不同。

版本說明

jQuery 有三個大版本：

• 1.x版本：最新版為 v1.11.3。

• 2.x版本：最新版為 v2.1.4（不再支持IE6、7、8）。

• 3.x版本。

jQuery的使用

使用 jQuery 的基本步驟

下載 ：jQuery有兩個文件，一個是jquery-3.4.1.js(未壓縮版)，一個是jquery-3.4.1.min.js(壓縮版,推薦項目上線時使用)

關於jQuery的相關資料：

• 官網：http://jquery.com/

• 官網API文檔：http://api.jquery.com/

• 漢化API文檔：http://www.css88.com/jqapi-1.9/

• jquery 在線手冊 ：http://hemin.cn/jq/

注意：導包的代碼一定要放在js代碼的最上面。 

jQuery 的入口函數和 $ 符號

入口函數（重要）

原生 js 的入口函數指的是：window.onload = function() {}; 如下：

        //原生 js 的入口函數。頁面上所有內容加載完畢，才執行。
        //不僅要等文本加載完畢，而且要等圖片也要加載完畢，才執行函數。
       window.onload = function () {
           alert(1);
       }

jQuery的入口函數，有以下幾種寫法：

寫法一：文檔加載完畢，圖片不加載的時候，就可以執行這個函數。

$(document).ready(function () {
           alert(1);
       })

寫法二：文檔加載完畢，圖片不加載的時候，就可以執行這個函數。（寫法一的簡潔版）

$(function () {
           alert(1);
       });

寫法三：文檔加載完畢，圖片也加載完畢的時候，在執行這個函數。

$(window).ready(function () {
           alert(1);
       })

jQuery入口函數與js入口函數的區別：

區別一：書寫個數不同：

• Js 的入口函數只能出現一次，出現多次會存在事件覆蓋的問題。

• jQuery 的入口函數，可以出現任意多次，並不存在事件覆蓋問題。

區別二：執行時機不同：

• Js的入口函數是在所有的文件資源加載完成后，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。

• jQuery的入口函數，是在文檔加載完成后，就執行。文檔加載完成指的是：DOM樹加載完成后，就可以操作DOM了，不用等到所有的外部資源都加載完成。

文檔加載的順序：從上往下，邊解析邊執行。

jQuery的$符號

jQuery 使用 $ 符號原因：書寫簡潔、相對於其他字符與眾不同、容易被記住。

jQuery占用了我們兩個變量：$ 和 jQuery。當我們在代碼中打印它們倆的時候：

<script src="jquery-3.3.1.js"></script>
<script>
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);
</script>

 

從打印結果可以看出，$ 代表的就是 jQuery。

js中的DOM對象 和 jQuery對象比較（重點，難點）

二者的區別

通過 jQuery 獲取的元素是一個jq對象數組，其中包含着原生JS中的DOM對象。舉例：

針對下面這樣一個div結構：

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>

通過原生 js 獲取這些元素節點的方式是：

    var myBox = document.getElementById("app");           //通過 id 獲取單個元素
    var boxArr = document.getElementsByClassName("box");  //通過 class 獲取的是偽數組
    var divArr = document.getElementsByTagName("div");    //通過標簽獲取的是偽數組

通過 jQuery 獲取這些元素節點的方式是：（獲取的都是數組）

   //獲取的是數組，里面包含着原生 JS 中的DOM對象。
　　console.log($('#app'));
　　console.log($('.box'));
　　console.log($('div'));

總結：jQuery 就是把 DOM 對象重新包裝了一下，讓其具有了 jQuery 方法。

二者的相互轉換

1、 DOM 對象 轉為 jQuery對象：

$(js對象);

2、jQuery對象 轉為 DOM 對象：

  jquery對象[index];      //方式1（推薦）
  jquery對象.get(index);  //方式2

jQuery對象轉換成了 DOM 對象之后，可以直接調用 DOM 提供的一些功能。如：

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

jQuery查找標簽

選擇器

基本選擇器、層級選擇器、屬性選擇器

今天來學習一下jQuery 選擇器。jQuery選擇器是jQuery強大的體現，它提供了一組方法，讓我們更加方便的獲取到頁面中的元素。

基本選擇器

$("#id")         //id選擇器
$("tagName")     //標簽選擇器
$(".className")  //class選擇器
$("*")           //通用選擇器

$("div.c1")      // 交集選擇器 找到有含有c1類的div標簽
$("#id, .className, tagName") //並集選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            float: left;
        }
    </style>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/javascript" src="jquery3.4.1.js"></script>
    <script type="text/javascript">
        //入口函數
        $(function(){
            //三種方式獲取jquery對象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $('div');
            //操作標簽選擇器
            jqBox3.css('width', '100');
            jqBox3.css('height', 100);
            jqBox3.css('background-color', 'red');
            jqBox3.css('margin-top', 10);
            //操作類選擇器(隱式迭代，不用一個一個設置)
                    jqBox2.css("background", "green");
                    jqBox2.text('哈哈哈')

                    //操作id選擇器
                    jqBox1.css("background", "yellow");

        })
    </script>

</body>
</html>

效果如下：

層級選擇器

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //獲取ul中的li設置為粉色
            //后代：兒孫重孫曾孫玄孫....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：親兒子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

效果如下：

屬性選擇器

$('[href]')       //找所有含href屬性的標簽
$('a[href]')      //找所有含href屬性的a標簽
$('a[title="luffy"]') //找所有title屬性是luffy的a標簽
$('a[title="baidu"]') //找所有title屬性不是百度的a標簽
$('a[href^="https"]') //找所有href屬性以https開頭的a標簽
$('a[href$="html"]')  //找所有href屬性以html結尾的a標簽
$('a[href*="i"]')  //找所有href屬性中含有i的a標簽
$('a[href][title="luffy"]') //找所有含有href屬性且title屬性=luffy的a標簽 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <h2 class="title">屬性元素器</h2>
            <!--<p class="p1">我是一個段落</p>-->
            <ul>
                <li id="li1">分手應該體面</li>
                <li class="what" id="li2">分手應該體面</li>
                <li class="what">分手應該體面</li>
                <li class="heihei">分手應該體面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked" />
                <input name="username1111" type='text' value="1" />
                <input name="username2222" type='text' value="1" />
                <input name="username3333" type='text' value="1" />
                <button class="btn-default">按鈕1</button>
                <button class="btn-info">按鈕1</button>
                <button class="btn-success">按鈕1</button>
                <button class="btn-danger">按鈕1</button>


            </form>
        </div>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //標簽名[屬性名] 查找所有含有id屬性的該標簽名的元素
            $('li[id]').css('color','red');
            
            //匹配給定的屬性是what值得元素
            $('li[class=what]').css('font-size','30px');
            //[attr!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素
            $('li[class!=what]').css('font-size','50px');
            
            //匹配給定的屬性是以某些值開始的元素
            $('input[name^=username]').css('background','gray');
            //匹配給定的屬性是以某些值結尾的元素
            $('input[name$=222]').css('background','greenyellow');
            
            //匹配給定的屬性是以包含某些值的元素
            $('button[class*=btn]').css('background','red')
        
            
        })
    
    </script>
</html>

效果如下：

 

篩選器

基本篩選器

:first // 第一個
:last // 最后一個
:eq(index)// 索引等於index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大於給定索引值的元素
:lt(index)// 匹配所有小於給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標簽
:has(元素選擇器)// 根據含有某個后代篩選

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本過濾選擇器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈，基本過濾選擇器</li>
            <li>嘿嘿嘿</li>
            <li>天王蓋地虎</li>
            <li>小雞燉蘑菇</li>
            
        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //獲取第一個 :first ,獲取最后一個 :last
            
            //奇數
            $('li:odd').css('color','red');
            //偶數
            $('li:even').css('color','green');
            
            //選中索引值為1的元素 *
            $('li:eq(1)').css('font-size','30px');
            
            //大於索引值1
            $('li:gt(1)').css('font-size','50px');
            
            //小於索引值1
            $('li:lt(1)').css('font-size','12px');    
            
        })    
    </script>
</html>

效果如下：

表單篩選器

type篩選器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

其他屬性篩選器
:enabled
:disabled
:checked
:selected

篩選器方法

//找兄弟
$("#id").siblings();// 兄弟們，不包含自己，.siblings('#id')，可以在添加選擇器進行進一步篩選

//找弟弟
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id為i2的標簽就結束查找，不包含它

//找哥哥
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

//找祖輩
$("#id").parent()
$("#id").parents()  // 查找當前元素的所有的父輩元素（爺爺輩、祖先輩都找到）
$("#id").parentsUntil('body') // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，這里直到body標簽，不包含body標簽，基本選擇器都可以放到這里面使用。

//找兒子
$("#id").children();// 兒子們

//過濾
$("div").first() // 獲取匹配的第一個元素
$("div").last() // 獲取匹配的最后一個元素
$("div").eq(n) // 索引值等於指定值的元素，n是索引
$("div").not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
$("div").find("p") //后代選擇器，在所有div標簽中找后代的p標簽
$("div").filter(".c1")  // 交集選擇器，從結果集中過濾出有c1樣式類的
$("div").has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <p class="p1">
                <span>我是第一個span標簽</span>
                <span>我是第二個span標簽</span>
                <span>我是第三個span標簽</span>
            </p>
            <button>按鈕</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        //獲取第n個元素 數值從0開始
        $('span').eq(1).css('color','#FF0000');
        
        //獲取第一個元素 :first :last    點語法  ：get方法 和set方法
        $('span').last().css('color','greenyellow');
        $('span').first().css('color','greenyellow');
        
        //查找span標簽的父元素（親的）
        $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
        
        //選擇所有的兄弟元素（不包括自己）
                  $('.list').siblings('li').css('color','red');

                  
                //查找所有的后代元素
                   $('div').find('button').css('background','yellow');

                
                //不寫參數代表獲取所有子元素。
                   $('ul').children().css("background", "green");
                   $('ul').children("li").css("margin-top", 10);
                   

        
        
    </script>
</html>

效果如下：

jQuery綁定事件(更多)

為button按鈕綁定單擊事件，單機按鈕彈出警告框
$('button').click(
        function () {
            alert('wahaha')
        }
)

jQuery操作標簽

標簽內文本操作

html 標簽元素中所有的內容

//獲取值：獲取選中標簽元素中所有的內容
$('#box').html();  

//設置值：設置該元素的所有內容 會替換掉 標簽中原來的內容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>'); 

text 標簽元素的文本內容

//獲取值：獲取選中標簽元素中的文本內容
$('#box').text();

//設置值：設置該所有的文本內容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

注意：text()方法接收的值為標簽的時候 不會被渲染為標簽元素 只會被當做值渲染到瀏覽器中 

文檔標簽操作

之前js中咱們學習了js的DOM操作,也就是所謂的增刪改查DOM操作。通過js的DOM的操作，大家也能發現，大量的繁瑣代碼實現我們想要的效果。那么jQuery的文檔操作的API提供了便利的方法供我們操作我們的文檔。

看一個之前我們js操作DOM的例子：

var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li'); oLi.innerHTML = '趙雲'; oUl.appendChild(oLi);

插入標簽

append和appendTo

//追加某元素，在父元素中添加新的子元素。子元素可以為：stirng | element（js對象） | jquery元素
父元素.append(子元素)

//追加到某元素，子元素添加到父元素
子元素.appendTo(父元素)

//append
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));

//appendTo
$('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active')

PS:如果追加的jquery對象原本在文檔樹中，那么這些元素將從原位置上消失。簡言之，就是移動操作。

prepend和prependTo

// 前置添加， 添加到父元素的第一個位置
父元素.prepend(子元素)；

// 前置添加， 添加到父元素的第一個位置
子元素.prependTo(父元素)；

// prepand
$('ul').prepend('<li>我是第一個</li>')
// prependTo
$('<a href="#">路飛學誠</a>').prependTo('ul')

after和insertAfter

// 在匹配的元素之后插入內容 
兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；


$('ul').after('<h4>我是一個h3標題</h4>')
$('<h5>我是一個h2標題</h5>').insertAfter('ul')

before和insertBefore

// 在匹配的元素之前插入內容
兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；
 
//示例
$('ul').before('<h3>我是一個h3標題</h3>')
$('<h2>我是一個h2標題</h2>').insertBefore('ul')

刪除標簽 remove、detach和empty

//刪除節點后，事件也會刪除（簡言之，刪除了整個標簽）
$(selector).remove(); 

// 刪除節點后，事件會保留
$(selector).detach(); 

// 清空選中元素中的所有后代節點
$(selector).empty(); 

// remove
$('ul').remove();

// detach
var $btn = $('button').detach()
$('ul').append($btn) //此時按鈕能追加到ul中

//empty
$('ul').empty() //清空掉ul中的子元素，保留ul

修改標簽 replaceWith和replaceAll

// selector被替換：將所有匹配的元素替換成指定的string、js對象、jquery對象。
$(selector).replaceWith(content);

// selector被替換：將所有的匹配的元素替換成p標簽。
$('<p>哈哈哈</p>')replaceAll(selector);

// replaceWith 
$('h5').replaceWith('<a href="#">hello world</a>') //將所有的h5標題替換為a標簽
$('h5').replaceWith($('#app')); //將所有h5標題標簽替換成id為app的dom元素

// replaceAll
$('<br/><hr/><button>按鈕</button>').replaceAll('h4')

克隆標簽 clone

// 克隆匹配的DOM元素
$(選擇器).clone();

$('button').click(function() {

 // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其所有的事件處理並且選中這些克隆的副本(簡言之，副本具有與真身一樣的事件處理能力)
  $(this).clone(true).insertAfter(this);
})

屬性操作

attr() 設置屬性值、者獲取屬性值

//獲取值：attr()設置一個屬性值的時候 只是獲取值
$('div').attr('id')
$('div').attr('class')


//設置值
$('div').attr('class','box') //設置一個值
$('div').attr({name:'hahaha',class:'happy'}) //設置多個值

removeAttr() 移除屬性

//刪除單個屬性
$('#box').removeAttr('name');
$('#box').removeAttr('class');

//刪除多個屬性
$('#box').removeAttr('name class');

prop()

// 查看屬性
$(selector).prop(property)

// 設置屬性
$(selector).prop(property,value)

// 設置多個屬性
$(selector).prop({property:value, property:value,...})

$('input').attr('checked')
"checked"

$('input').prop('checked')
true

$('input').prop('cheched',false)  //設置取消選中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="all">全選</button>
<button id="reverse">反選</button>
<button id="cancel">取消</button>
<table border="1">
   <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>愛好</th>
    </tr>
   </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>開車</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>alex</td>
        <td>抽煙、喝酒、燙頭</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊（苑局）</td>
        <td>不洗頭、不翻車、不要臉</td>
    </tr>
    </tbody>
</table>

<script src="jquery3.4.1.js"></script>
<script>
    // 點擊全選按鈕 選中所有的checkbox
    // DOM綁定事件方法
    // $("#all")[0].onclick = function(){}
    // jQuery綁定事件方法
    $("#all").click(function () {
        $(":checkbox").prop('checked', true);
    });
    // 取消
    $("#cancel").on("click", function () {
         $(":checkbox").prop('checked', false);
    });
    // 反選
    $("#reverse").click(function () {
        // 1. 找到所有選中的checkbox取消選中
        // $("input:checked").prop('checked', false);
        // // 2. 找到沒有選中的checkbox選中
        // $("input:not(:checked)").prop('checked', true);
        //你會發現上面這么寫，不行，為什么呢？因為你做了第一步操作之后，再做第二步操作的時候，所有標簽就已經全部取消選中了，所以第二步就把所有標簽選中了

        // 方法1. for循環所有的checkbox,挨個判斷原來選中就取消選中，原來沒選中就選中
        var $checkbox = $(":checkbox");
        for (var i=0;i<$checkbox.length;i++){
            // 獲取原來的選中與否的狀態
            var status = $($checkbox[i]).prop('checked');
            $($checkbox[i]).prop('checked', !status);
        }
        // 方法2. 先用變量把標簽原來的狀態保存下來
    //     var $unchecked =  $("input:not(:checked)");
    //     var $checked = $("input:checked");
    //
    //     $unchecked.prop('checked', true);
    //     $checked.prop('checked', false);
    })

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

class類屬性

addClass添加類名

// 為每個匹配的元素添加指定的類名。
$('div').addClass("box");//追加一個
$('div').addClass("box box2");//追加多個

removeClass移除類名

// 從所有匹配的元素中刪除全部或者指定的類。
$('div').removeClass('box')；//移除box類
$('div').removeClass();//移除全部的類

var tag  = false;
$('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">張三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $('ul li').click(function(){
                 // this指的是當前點擊的DOM對象 ,使用$(this)轉化jquery對象
                 $(this).addClass('active').siblings('li').removeClass('active');
             })
         })
     </script>
    
</body>
</html>

toggleClass類的切換

// 如果存在（不存在）就刪除（添加）一個類。
$('div').toggleClass('box')

$('span').click(function(){
    //動態的切換class類名為active
    $(this).toggleClass('active')
})

val 表單控件value屬性

// 獲取值：用於表單控件中獲取值，比如input textarea select等等
$(selector).val()

// 設置值：
$('input').val('設置了表單控件中的值')；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
            <input type="radio" name="sex"  value="112" />男
            <!-- 設置cheked屬性表示選中當前選項 -->
            <input type="radio" name="sex"  value="11" checked="" />女
            <input type="radio" name="sex"  value="11" />gay

            <input type="checkbox" value="a" checked=""/>吃飯
            <input type="checkbox" value="b" />睡覺
            <input type="checkbox" value="c" checked=""/>打豆豆

    <!-- 下拉列表 option標簽內設置selected屬性 表示選中當前 -->
            <select name="timespan" id="timespan" class="Wdate"   >
                <option value="1">8:00-8:30</option>
                <option value="2" selected="">8:30-9:00</option>
                <option value="3">9:00-9:30</option>
            </select>
            <input type="text" name="" id="" value="111" />
    </form>

</body>
<script type="text/javascript" src="jquery3.4.1.js"></script>
    <script type="text/javascript">

        $(function(){
            // 一、獲取值
                //1.獲取單選框被選中的value值
                console.log($('input[type=radio]:checked').val())

                //2.復選框被選中的value,獲取的是第一個被選中的值
                console.log($('input[type=checkbox]:checked').val())

                //3.下拉列表被選中的值

                var obj = $("#timespan option:selected");
                // 獲取被選中的值
                var  time  = obj.val();
                console.log(time);
                // 獲取文本
                var  time_text  = obj.text();
                console.log("val:"+time+" text"+ time_text );

                //4.獲取文本框的value值
                console.log($("input[type=text]").val())//獲取文本框中的值

                // 二.設置值
                //1.設置單選按鈕和多選按鈕被選中項
                $('input[type=radio]').val(['112']);
                $('input[type=checkbox]').val(['a','b']);


                //2.設置下拉列表框的選中值，必須使用select
                /*因為option只能設置單個值，當給select標簽設置multiple。
                那么我們設置多個值,就沒有辦法了，但是使用select設置單個值和多個值都可以
                */
                $('select').val(['3','2'])


                //3.設置文本框的value值
                $('input[type=text]').val('試試就試試')

        })

    </script>

</html>

css樣式

// css(直接修改css的屬性來修改樣式)
$("div").css('color'); //獲取

$("p").css("color", "red"); //設置
$("p").css({"color":"red","background-color":"yello"}); // 設置多個

盒子樣式屬性

內容 : 寬度(width)和高度(height)

// 寬度
.width() //獲取寬度 返回匹配元素中第一個元素的寬，一個沒有單位的數值
.width( value ) //設置寬度

//高度
.height() //獲取高度 返回匹配元素中第一個元素的高，一個沒有單位的數值
.height( value ) //設置高度

內容+padding : 寬度(innerWidth)和高度(innerHeight)

// 內部寬
.innerWidth() // 獲取
.innerWidth(value);//設置

// 內部高
.innerHeight() // 獲取
.innerHeight(value); //設置

內容+padding+border : 寬度(outerWidth)和高度(outerHeight)

// 外部寬
 .outerWidth() //獲取第一個匹配元素 ：內容+padding+border的寬
 .outerWidth(true) //獲取第一個匹配元素：內容+padding+border+margin的寬

 .outerWidth(value) //設置多個，調整的是“內容”的寬

//外部高
 .outerHeight() //第一個匹配元素：獲取內容+padding+border的高
 .outerHeight(true) //第一個匹配元素：獲取內容+padding+border+margin的高

 .outerHeight( value ) //設置多個，調整的是“內容”的高

滾動條距離屬性

// 水平方向
.scrollLeft()      //獲取
.scrollLeft( value )//設置

// 垂直方向
.scrollTop() //獲取
.scrollTop( value ) //設置

jQuery動畫效果

jQuery提供的一組網頁中常見的動畫效果，這些動畫是標准的、有規律的效果；同時還提供給我們了自定義動畫的功能。

顯示動畫

方式一：無參數，表示讓指定的元素直接顯示出來。其實這個方法的底層就是通過display: block;實現的。

  $("div").show();

方式二：通過控制元素的寬高、透明度、display屬性，逐漸顯示，例如：3秒后顯示完畢。

$('div').show(3000);

方式三：和方式二類似，也是通過控制元素的寬高、透明度、display屬性，逐漸顯示。

 $("div").show("slow");

slow 慢：600ms
normal 正常：400ms
fast 快：200ms

方式四：動畫執行完后，立即執行回調函數。

 //show(毫秒值，回調函數;
    $("div").show(5000,function () {
        alert("動畫執行完畢！");
    });

總結：上面的四種方式幾乎一致：參數可以有兩個，第一個是動畫的執行時長，第二個是動畫結束后執行的回調函數。

隱藏動畫

方式參照上面的show()方法的方式。如下：

    $(selector).hide();

    $(selector).hide(1000); 

    $(selector).hide("slow");

    $(selector).hide(1000, function(){});

練習 ： 實現點擊按鈕顯示盒子，再點擊按鈕隱藏盒子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: green;
                border: 1px solid red;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="box">        
        </div>
        <button id="btn">隱藏</button>    
    </body>
    <script src="jquery-3.3.1.js"></script>
    
    <script type="text/javascript">
        
        //jquery 提供了一些方法 show() hide() 控制元素顯示隱藏
        var isShow = true;
        $('#btn').click(function(){
            if(isShow){
                $('#box').show('slow',function(){
                    $(this).text('盒子出來了');            
                    $('#btn').text('顯示');
                    isShow = false;
                })
            }else{
                $('#box').hide(2000,function(){
                    $(this).text('');    
                    $('#btn').text('隱藏');
                    isShow = true;
                    
                })
            }
        })
    
        
    </script>
</html>

 

開關式顯示隱藏動畫

$('#box').toggle(3000,function(){});

顯示和隱藏的來回切換采用的是toggle()方法：就是先執行show()，再執行hide()。

代碼如下：

    $('#btn').click(function(){
            $('#box').toggle(3000,function(){
                $(this).text('盒子出來了');    
                if ($('#btn').text()=='隱藏') {
                    $('#btn').text('顯示');    
                }else{
                    $('#btn').text('隱藏');    
                }
            });
        })

滑入和滑出

1、滑入動畫效果：（類似於生活中的卷簾門）:下拉動畫，顯示元素。

$(selector).slideDown(speed, 回調函數);

注意：省略參數或者傳入不合法的字符串，那么則使用默認值：400毫秒（同樣適用於fadeIn/slideDown/slideUp）

2、滑出動畫效果： 上拉動畫，隱藏元素。

 $(selector).slideUp(speed, 回調函數);

3、滑入滑出切換動畫效果：

 $(selector).slideToggle(speed, 回調函數);

代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: green;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //點擊按鈕后產生動畫
            $("button:eq(0)").click(function () {

                //滑入動畫： slideDown(毫秒值，回調函數[顯示完畢執行什么]);
                $("div").slideDown(2000, function () {
                    alert("動畫執行完畢！");
                });
            })

            //滑出動畫
            $("button:eq(1)").click(function () {

                //滑出動畫：slideUp(毫秒值，回調函數[顯示完畢后執行什么]);
                $("div").slideUp(2000, function () {
                    alert("動畫執行完畢！");
                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換（同樣有四種用法）
                $("div").slideToggle(1000);
            })

        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切換</button>
<div></div>

</body>
</html>

淡入淡出動畫

1、淡入動畫效果：讓元素以淡淡的進入視線的方式展示出來。

 $(selector).fadeIn(speed, callback);

2、淡出動畫效果：讓元素以漸漸消失的方式隱藏起來

$(selector).fadeOut(1000);

3、淡入淡出切換動畫效果：通過改變透明度，切換匹配元素的顯示或隱藏狀態。

 $(selector).fadeToggle('fast', callback);

參數的含義同show()方法。

代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            /*透明度*/
            opacity: 0.5;
            background-color: red;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //點擊按鈕后產生動畫
            $("button:eq(0)").click(function () {

//                //淡入動畫用法1:   fadeIn();   不加參數
                $("div").fadeIn();

//                //淡入動畫用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //通過控制  透明度和display

                //淡入動畫用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                //淡入動畫用法4:   fadeIn(毫秒值，回調函數[顯示完畢執行什么]);
//                $("div").fadeIn(5000,function () {
//                    alert("動畫執行完畢！");
//                });
            })

            //滑出動畫
            $("button:eq(1)").click(function () {
//                //滑出動畫用法1:   fadeOut();   不加參數
               $("div").fadeOut();

//                //滑出動畫用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //通過這個方法實現的：display: none;
//                //通過控制  透明度和display

                //滑出動畫用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                //滑出動畫用法1:   fadeOut(毫秒值，回調函數[顯示完畢執行什么]);
//                $("div").fadeOut(2000,function () {
//                    alert("動畫執行完畢！");
//                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換
                //同樣有四種用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                //改透明度
                //同樣有四種用法
                $("div").fadeTo(1000, 0.5, function () {
                    alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切換</button>
<button>改透明度為0.5</button>
<div></div>

</body>
</html>

自定義動畫

語法：

 $(selector).animate({params}, speed, callback);

作用：執行一組CSS屬性的自定義動畫。

• 第一個參數表示：要執行動畫的CSS屬性（必選）

• 第二個參數表示：執行動畫時長（可選）

• 第三個參數表示：動畫執行完后，立即執行的回調函數（可選）

代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定義動畫
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("動畫執行完畢！");
                    });
                });

            })
        })
    </script>
</head>
<body>
<button>自定義動畫</button>
<div></div>
</body>
</html>

停止動畫

$(selector).stop(true, false);

第一個參數：
true：后續動畫不執行。
false：后續動畫會執行。

第二個參數：
true：立即執行完成當前動畫。
false：立即停止當前動畫。

PS：參數如果都不寫，默認兩個都是false。實際工作中，直接寫stop()用的多。

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

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

        .wrap li {
            background-color: green;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函數
        $(document).ready(function () {
            //需求：鼠標放入一級li中，讓他里面的ul顯示。移開隱藏。
            var jqli = $(".wrap>ul>li");

            //綁定事件
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(1000);
            });

            //綁定事件(移開隱藏)
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
                <li><a href="javascript:void(0);">二級菜單4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">二級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
                <li><a href="javascript:void(0);">二級菜單4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">三級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">三級菜單2</a></li>
                <li><a href="javascript:void(0);">三級菜單3</a></li>
                <li><a href="javascript:void(0);">三級菜單4</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

上方代碼中，關鍵的地方在於，用了stop函數，再執行動畫前，先停掉之前的動畫。

jQuery的事件操作

1、綁定事件

bind(type,data,fn)

描述：為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。

type (String) : 事件類型

data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象

fn ( Function) : 綁定到每個匹配元素的事件上面的處理函數

示例：當每個p標簽被點擊的時候，彈出其文本

$("p").bind("click", function(){
  alert( $(this).text() );
});

你可以在事件處理之前傳遞一些附加的數據。

function handler(event) {
//event.data 可以獲取bind()方法的第二個參數的數據
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

常見事件：

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...}) //內容發生變化，input，select等
keyup(function(){...})  
mouseover/mouseout
mouseenter/mouseleave
mouseover事件是如果該標簽有子標簽，那么移動到該標簽或者移動到子標簽時會連續觸發，mouseenter事件不管有沒有子標簽都只觸發一次，表示鼠標進入這個對象

通過返回false來取消默認的行為並阻止事件起泡。

$("form").bind("submit", function() { return false; })

或通過event.preventDefault() 方法阻止事件起泡

$("form").bind("submit", function(event){
  event.stopPropagation();
});

2、解綁事件

unbind(type,fn);

描述：bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。

　　如果沒有參數，則刪除所有綁定的事件。

　　如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除。

type (String) : (可選) 事件類型
fn(Function) : (可選) 要從每個匹配元素的事件中反綁定的事件處理函數

示例：把所有段落的所有事件取消綁定

$("p").unbind()

將段落的click事件取消綁定

$("p").unbind( "click" )

3.補充 一次性事件

one(type,data,fn)

描述：為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。在每個對象上，這個事件處理函數只會被執行一次。其他規則與bind()函數相同

type (String) : 事件類型
data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象
fn (Function) : 綁定到每個匹配元素的事件上面的處理函數

示例：當所有段落被第一次點擊的時候，顯示所有其文本。

$("p").one("click", function(){
//只有第一次點擊的時候才會觸發，再次點擊不會觸發了
  alert( $(this).text() );
});

4.事件委托（事件代理）

通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。
舉個列子：有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前台MM代為簽收。現實當中，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）。前台MM收到快遞后，她會判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個優勢，那就是即使公司里來了新員工（不管多少），前台MM也會在收到寄給新員工的快遞后核實並代為簽收。

原理：利用冒泡的原理，把事件加到父級上，觸發執行效果。

作用：

1.性能要好
2.針對新創建的元素，直接可以擁有事件

事件源 :

　　跟this作用一樣(他不用看指向問題，誰操作的就是誰),event對象下的

使用情景：

　　•為DOM中的很多元素綁定相同事件；
　　•為DOM中尚不存在的元素綁定事件；

<body>
        <ul>
            <li class="luffy">路飛</li>
            <li>路飛</li>
            <li>路飛</li>
            
        </ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    //通過on()方法
     $('ul').on('click','#namei,.luffy',function(){
        console.log(this);
       })
            
   //未來追加的元素 
    $('ul').append('<a id="namei">娜美</a>')

}
</script>

語法：在選定的元素上綁定一個或多個事件處理函數

on(type,selector,data,fn);

events( String) : 一個或多個空格分隔的事件類型
selector( String) : 一個選擇器字符串，用於過濾出被選中的元素中能觸發事件的后代元素
data: 當一個事件被觸發時，要傳遞給事件處理函數的event.data。
fn:回調函數

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>登錄注冊示例</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>

<form id="myForm">
  <label for="name">姓名</label>
  <input type="text" id="name">
  <span class="error"></span>
  <label for="passwd">密碼</label>
  <input type="password" id="passwd">
  <span class="error"></span>
  <input type="submit" id="modal-submit" value="登錄">
</form>

<script src="jquery3.4.1.js"></script>
<script>
  function myValidation() {
    // 多次用到的jQuery對象存儲到一個變量，避免重復查詢文檔樹
    var $myForm = $("#myForm");
    $myForm.find(":submit").on("click", function () {
      // 定義一個標志位，記錄表單填寫是否正常
      var flag = true;
      $myForm.find(":text, :password").each(function () {
        var val = $(this).val();
        if (val.length <= 0 ){
          var labelName = $(this).prev("label").text();
          $(this).next("span").text(labelName + "不能為空");
          flag = false;
        }
      });
      return flag;
    });
    // input輸入框獲取焦點后移除之前的錯誤提示信息
    $myForm.find("input[type!='submit']").on("blur", function () {
      $(this).next(".error").text("");
    })
  }
  myValidation()
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }

        .modal {
            width: 300px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
    <script src="jquery3.4.1.js"></script>
</head>
<body>

<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>愛好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>開車</td>
        <td>
            <button class="fire">開除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>alex</td>
        <td>抽煙、喝酒、燙頭</td>
        <td>
            <button class="fire">開除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊（苑局）</td>
        <td>不洗頭、不翻車、不要臉</td>
        <td>
            <button class="fire">開除</button>
        </td>
    </tr>
    </tbody>
</table>

<div class="cover hide"></div>
<div class="modal hide">
    <div>
        <label>姓名：
            <input type="text" id="name">
        </label>
    </div>
    <div>
        <label>愛好：
            <input type="text" id="hobby">
        </label>
    </div>
    <button id="cancel" type="button">取消</button>
    <button id="submit" type="button">提交</button>

</div>

<script>
    // 定義一個清空輸入框並且隱藏模態框的方法
    function hideModal(){
         // 1. 清空input的值
        $("#name,#hobby").val('');
        // 2. 隱藏起來
        $(".cover,.modal").addClass('hide');
    }
    // 開除按鈕的功能
    $("table").on('click', '.fire', function () { //我們先去學冒泡事件、事件委托然后再回來學這個例子，事件里面都是用的匿名函數，這里用on是因為我們要將新添加進來的每行里面的button標簽能夠繼承這個點擊刪除的事件
        // 點擊開除按鈕要做的事兒————把當前行移除掉
        //this  --> 觸發當前點擊事件的DOM對象
        $(this).parent().parent().remove();  // 鏈式操作
    });
    // 新增按鈕的功能
    $("#add").click(function () {
        // 點擊新增按鈕要做的事兒
        // 1. 移除cover和modal的hide樣式
        $(".cover,.modal").removeClass('hide');
    });
    // 點擊modal中的cancel按鈕
    $("#cancel").click(function () {
       hideModal();
    });

    // 點擊modal中的submit按鈕
    $("#submit").click(function () {
        // 1. 獲取用戶輸入的值
        var name = $("#name").val();
        var hobby = $("#hobby").val();
        // 2. 隱藏模態框，清空輸入框
        hideModal();
        // 3. 創建一個tr標簽，把數據塞進去
        var trEle = document.createElement("tr");
        $(trEle).append('<td><input type="checkbox"></td>');
        $(trEle).append('<td>' + name + '</td>');
        var tdTmp = document.createElement('td');
        tdTmp.innerText = hobby;
        $(trEle).append(tdTmp);
        $(trEle).append('<td><button class="fire">開除</button></td>')
        // 4. 把上一步的tr追加到表格的tbody后面
        $('tbody').append(trEle);
    });
　　//先用下面這種方式寫，你會發現一些問題，我們新添加的每一行數據里面的那個button標簽點擊刪除的時候沒有效果
    //  // 點擊modal中的submit按鈕
    // $("#submit").on('click', function () { #這個和直接$('submit').click(function ...)是一樣的
    //     // 1. 獲取用戶輸入的值
    //     var name = $("#name").val();
    //     var hobby = $("#hobby").val();
    //     // 2. 隱藏模態框，清空輸入框
    //     hideModal();
    //     // 3. 創建一個tr標簽，把數據塞進去
    //     var trEle = document.createElement("tr");
    //     $(trEle).append('<td><input type="checkbox"></td>');
    //     $(trEle).append('<td>' + name + '</td>');
    //     var tdTmp = document.createElement('td');
    //     tdTmp.innerText = hobby;
    //     $(trEle).append(tdTmp);
    //     $(trEle).append('<td><button class="fire">開除</button></td>')
    //     // 4. 把上一步的tr追加到表格的tbody后面
    //     $('tbody').append(trEle);
    // })

</script>

</body>
</html>

 

補充內容：

jquery除了咱們上面講解的常用知識點之外，還有jquery 插件、jqueryUI知識點

jqueryUI 官網：

https://jqueryui.com/

jqueryUI 中文網：

http://www.jqueryui.org.cn/

jquery插件內容包含

官網demo：

https://www.oschina.net/project/tag/273/jquery

里面包含了jquery插件效果和實現代碼，大家可以好好的玩一下了！