楔子

需求一：有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>
<span>&lt;!--</span><span>body標簽</span><span>--&gt;</span>    
<span>&lt;</span><span>button</span><span>&gt;</span>操作<span>&lt;/</span><span>button</span><span>&gt;</span>
<span>&lt;</span><span>div</span><span>&gt;&lt;/</span><span>div</span><span>&gt;</span>
<span>&lt;</span><span>div</span><span>&gt;&lt;/</span><span>div</span><span>&gt;</span>
<span>&lt;</span><span>div</span><span>&gt;&lt;/</span><span>div</span><span>&gt;</span></pre>




<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('哈哈哈')
                </span><span>//</span><span>操作id選擇器</span>
                jqBox1.css("background", "yellow"<span>);

    })
</span>&lt;/script&gt;

</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");
        </span><span>//</span><span>子代：親兒子</span>
        <span>var</span> jqOtherLi = $("ul&gt;li"<span>);
        jqOtherLi.css(</span>"background", "red"<span>);
    });
</span>&lt;/script&gt;

</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>
        &lt;/ul&gt;

        &lt;form action="" method="post"&gt;

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


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

</span>&lt;/script&gt;

</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>
    &lt;/ul&gt;
&lt;/body&gt;
&lt;script src="jquery-3.3.1.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;<span>
    
    $(</span><span>function</span><span>(){
        </span><span>//</span><span>獲取第一個 :first ,獲取最后一個 :last</span>
        
        <span>//</span><span>奇數</span>
        $('li:odd').css('color','red'<span>);
        </span><span>//</span><span>偶數</span>
        $('li:even').css('color','green'<span>);
        
        </span><span>//</span><span>選中索引值為1的元素 *</span>
        $('li:eq(1)').css('font-size','30px'<span>);
        
        </span><span>//</span><span>大于索引值1</span>
        $('li:gt(1)').css('font-size','50px'<span>);
        
        </span><span>//</span><span>小于索引值1</span>
        $('li:lt(1)').css('font-size','12px'<span>);    
        
    })    
</span>&lt;/script&gt;

</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">
    <span>//</span><span>獲取第n個元素 數值從0開始</span>
    $('span').eq(1).css('color','#FF0000'<span>);
    
    </span><span>//</span><span>獲取第一個元素 :first :last    點語法  ：get方法 和set方法</span>
    $('span').last().css('color','greenyellow'<span>);
    $(</span>'span').first().css('color','greenyellow'<span>);
    
    </span><span>//</span><span>查找span標簽的父元素（親的）</span>
    $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'<span>});
    
    </span><span>//</span><span>選擇所有的兄弟元素（不包括自己）</span>
              $('.list').siblings('li').css('color','red'<span>);

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

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

    
    
</span>&lt;/script&gt;

</html>

示例代碼
效果如下：

jQuery綁定事件(更多)
為button按鈕綁定單擊事件，單機按鈕彈出警告框
$('button').click(
        function () {
            alert('wahaha')
        }
)
jQuery操作標簽
標簽內文本操作
html標簽元素中所有的內容
//獲取值：獲取選中標簽元素中所有的內容
$('#box').html();  
//設置值：設置該元素的所有內容 會替換掉 標簽中原來的內容

$('#box').html('<a ); 

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

$('#box').text('<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);

//你會發現上面這么寫，不行，為什么呢？因為你做了第一步操作之后，再做第二步操作的時候，所有標簽就已經全部取消選中了，所以第二步就把所有標簽選中了
    <span>//</span><span> 方法1. for循環所有的checkbox,挨個判斷原來選中就取消選中，原來沒選中就選中</span>
    <span>var</span> $checkbox = $(":checkbox"<span>);
    </span><span>for</span> (<span>var</span> i=0;i&lt;$checkbox.length;i++<span>){
        </span><span>//</span><span> 獲取原來的選中與否的狀態</span>
        <span>var</span> status = $($checkbox[i]).prop('checked'<span>);
        $($checkbox[i]).prop(</span>'checked', !<span>status);
    }
    </span><span>//</span><span> 方法2. 先用變量把標簽原來的狀態保存下來</span>
<span>//</span><span>     var $unchecked =  $("input:not(:checked)");</span>
<span>//</span><span>     var $checked = $("input:checked");</span>
<span>//

    //     $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(){
         $(</span>'ul li').click(<span>function</span><span>(){
             </span><span>//</span><span> this指的是當前點擊的DOM對象 ,使用$(this)轉化jquery對象</span>
             $(<span>this</span>).addClass('active').siblings('li').removeClass('active'<span>);
         })
     })
 </span>&lt;/script&gt;

</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
        &lt;input type="checkbox" value="a" checked=""/&gt;吃飯
        &lt;input type="checkbox" value="b" /&gt;睡覺
        &lt;input type="checkbox" value="c" checked=""/&gt;打豆豆

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

</body>

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

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

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

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

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

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

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


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


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

    })

</span>&lt;/script&gt;

</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(){});</pre>




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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                 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>
&lt;script type="text/javascript"&gt;
    
    <span>//</span><span>jquery 提供了一些方法 show() hide() 控制元素顯示隱藏</span>
    <span>var</span> isShow = <span>true</span><span>;
    $(</span>'#btn').click(<span>function</span><span>(){
        </span><span>if</span><span>(isShow){
            $(</span>'#box').show('slow',<span>function</span><span>(){
                $(</span><span>this</span>).text('盒子出來了'<span>);            
                $(</span>'#btn').text('顯示'<span>);
                isShow </span>= <span>false</span><span>;
            })
        }</span><span>else</span><span>{
            $(</span>'#box').hide(2000,<span>function</span><span>(){
                $(</span><span>this</span>).text(''<span>);    
                $(</span>'#btn').text('隱藏'<span>);
                isShow </span>= <span>true</span><span>;
                
            })
        }
    })

    
</span>&lt;/script&gt;

</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 {
             300px;
            height: 300px;
            display: none;
            background-color: green;
        }
    </style>
&lt;script src="jquery-3.3.1.js"&gt;&lt;/script&gt;
&lt;script&gt;<span>
    $(</span><span>function</span><span> () {
        </span><span>//</span><span>點擊按鈕后產生動畫</span>
        $("button:eq(0)").click(<span>function</span><span> () {

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

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

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

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

    })
</span>&lt;/script&gt;

</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 {
             300px;
            height: 300px;
            display: none;
            /*透明度*/
            opacity: 0.5;
            background-color: red;
        }
    </style>
&lt;script src="jquery-3.3.1.js"&gt;&lt;/script&gt;
&lt;script&gt;<span>
    $(</span><span>function</span><span> () {
        </span><span>//</span><span>點擊按鈕后產生動畫</span>
        $("button:eq(0)").click(<span>function</span><span> () {

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

$("div").fadeIn();
//                //淡入動畫用法2:   fadeIn(2000);   毫秒值

//                $("div").fadeIn(2000);

//                //通過控制  透明度和display
            <span>//</span><span>淡入動畫用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms</span><span>

//                $("div").fadeIn("slow");

//                $("div").fadeIn("fast");

//                $("div").fadeIn("normal");
            <span>//</span><span>淡入動畫用法4:   fadeIn(毫秒值，回調函數[顯示完畢執行什么]);</span><span>

//                $("div").fadeIn(5000,function () {

//                    alert("動畫執行完畢！");

//                });

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

//                //滑出動畫用法1:   fadeOut();   不加參數

$("div").fadeOut();
//                //滑出動畫用法2:   fadeOut(2000);   毫秒值

//                $("div").fadeOut(2000);  //通過這個方法實現的：display: none;

//                //通過控制  透明度和display
            <span>//</span><span>滑出動畫用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms</span><span>

//                $("div").fadeOut("slow");

//                $("div").fadeOut("fast");

//                $("div").fadeOut("normal");
            <span>//</span><span>滑出動畫用法1:   fadeOut(毫秒值，回調函數[顯示完畢執行什么]);</span><span>

//                $("div").fadeOut(2000,function () {

//                    alert("動畫執行完畢！");

//                });

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

        $(</span>"button:eq(3)").click(<span>function</span><span> () {
            </span><span>//</span><span>改透明度</span>
            <span>//</span><span>同樣有四種用法</span>
            $("div").fadeTo(1000, 0.5, <span>function</span><span> () {
                alert(</span>1<span>);
            });
        })
    })
</span>&lt;/script&gt;

</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;
             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"
                };
            </span><span>//</span><span>自定義動畫</span>
            $("div").animate(json, 1000, <span>function</span><span> () {
                $(</span>"div").animate(json2, 1000, <span>function</span><span> () {
                    alert(</span>"動畫執行完畢！"<span>);
                });
            });

        })
    })
</span>&lt;/script&gt;

</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</span>-<span>style: none;
    }

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

    .wrap li {
        background</span>-<span>color: green;
    }

    .wrap </span>&gt; ul &gt;<span> li {
        </span><span>float</span><span>: left;
        margin</span>-<span>right: 10px;
        position: relative;
    }

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

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

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

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

</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>
    &lt;/ul&gt;

</body>

<script src="jquery-3.2.1.js"></script>

<script type="text/javascript">

$(document).ready(function(){
</span><span>//</span><span>通過on()方法</span>
 $('ul').on('click','#namei,.luffy',<span>function</span><span>(){
    console.log(</span><span>this</span><span>);
   })

//未來追加的元素 

$('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 {
         300px;
        height: 200px;
        background</span>-<span>color: white;
        position: absolute;
        top: </span>50%<span>;
        left: </span>50%<span>;
        margin</span>-top: -<span>100px;
        margin</span>-left: -<span>150px;
        z</span>-index: 1000<span>;
    }
    .hide {
        display: none;
    }
</span>&lt;/style&gt;
&lt;script src="jquery3.4.1.js"&gt;&lt;/script&gt;

</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();

});
</span><span>//</span><span> 點擊modal中的submit按鈕</span>
$("#submit").click(<span>function</span><span> () {
    </span><span>//</span><span> 1. 獲取用戶輸入的值</span>
    <span>var</span> name = $("#name"<span>).val();
    </span><span>var</span> hobby = $("#hobby"<span>).val();
    </span><span>//</span><span> 2. 隱藏模態框，清空輸入框</span>

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

                            
總結
                            

                                以上是生活随笔為你收集整理的jquery的全部內容，希望文章能夠幫你解決所遇到的問題。
                            
                            

                                如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。