jquery

本文轉載自查看原文 2019-08-03 01:17 1459

楔子

需求一：有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>

原生js實現

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

jqeury實現

需求二：將上面的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'
        }
    }

原生js實現

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

jquery實現

需求三：點擊按鈕，顯示頁面中的三個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>

原生js實現

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

jquery實現

盡管，你現在啥也不知道，你就知道用上了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);
       }

原聲js入口函數

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>

jquery選擇器示例代碼

效果如下：

層級選擇器

$("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插件效果和實現代碼，大家可以好好的玩一下了！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery jQuery 什么是jQuery？ jQuery之on jQuery之jQuery擴展和事件【jQuery】jquery插件封裝 JQuery：JQuery刪除元素 jQuery從小白開始---初始jQuery jQuery(二) jQuery對Ajax的使用 jQuery學習之七-----jQuery效果

jquery

楔子

jqeury介紹

為什么要使用jQuery

jQuery 的兩大特點

什么是 jQuery

版本說明

jQuery的使用

使用 jQuery 的基本步驟

jQuery 的入口函數和 $ 符號

入口函數（重要）

jQuery的$符號

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

二者的區別

二者的相互轉換

jQuery查找標簽

選擇器

基本選擇器

層級選擇器

屬性選擇器

篩選器

基本篩選器

表單篩選器

篩選器方法

jQuery綁定事件(更多)

jQuery操作標簽

標簽內文本操作

html 標簽元素中所有的內容

text 標簽元素的文本內容

文檔標簽操作

插入標簽

append和appendTo

prepend和prependTo

after和insertAfter

before和insertBefore

刪除標簽 remove、detach和empty

修改標簽 replaceWith和replaceAll

克隆標簽 clone

屬性操作

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

removeAttr() 移除屬性

prop()

class類屬性

addClass添加類名

removeClass移除類名

toggleClass類的切換

val 表單控件value屬性

css樣式

盒子樣式屬性

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

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

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

滾動條距離屬性

jQuery動畫效果

顯示動畫

隱藏動畫

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

開關式顯示隱藏動畫

滑入和滑出

淡入淡出動畫

自定義動畫

停止動畫

jQuery的事件操作

1、綁定事件

2、解綁事件

3.補充 一次性事件

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

示例

補充內容：

免責聲明！

jQuery 的入口函數和 `$` 符號

jQuery的`$`符號

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

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

3.補充一次性事件