前端jQurey_ZenDei技術網路在線

[TOC] 1.楔子需求一：有html標簽關係如下，請找到所有的含有a標簽的li標簽原生js實現 jqeury實現需求二：將上面的li標簽實現隔行換色效果原生js實現原生js實現 jquery實現儘管，你現在啥也不知道，你就知道用上了jquery咱們寫代碼節省了很多操作，便利了很多就 ...

1.楔子
2.jqeury介紹
3.jQuery的使用
- 3.1使用 jQuery 的基本步驟
- 3.2jQuery 的入口函數和 $ 符號
4.js中的DOM對象和 jQuery對象比較（重點，難點）
- 4.1二者的區別
- 4.2二者的相互轉換
5.jQuery查找標簽
6.jQuery操作標簽
7.jQuery動畫效果
8.jQuery的事件操作
9.示例

1.楔子

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

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

原生js實現

<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>

jqeury實現

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

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

原生js實現

    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'
        }
    }

jquery實現

    $('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>

原生js實現

<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>

jquery實現

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

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

2.jqeury介紹

2.1為什麼要使用jQuery

2.2jQuery 的兩大特點

鏈式編程：比如.show()和.html()可以連寫成.show().html()。
隱式迭代：隱式對應的是顯式。隱式迭代的意思是：在方法的內部進行迴圈遍歷，而不用我們自己再進行迴圈，簡化我們的操作，方便我們調用。

2.3什麼是 jQuery

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

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

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

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

3.jQuery的使用

3.1使用 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代碼的最上面。

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

3.2.1入口函數（重要）

原生 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了，不用等到所有的外部資源都載入完成。

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

3.2.2jQuery的 `$` 符號

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

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

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

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

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

4.1二者的區別

通過 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 方法

4.2二者的相互轉換

DOM 對象轉為 jQuery對象：

$(js對象);

jQuery對象轉為 DOM 對象：

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

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

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

5.jQuery查找標簽

5.1基本選擇器

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

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

jquery選擇器示例代碼

<!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>

5.1.1層級選擇器

$("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>

5.1.2屬性選擇器

$('[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>

5.2篩選器

5.2.1基本篩選器

: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>

5.2.2表單篩選器

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

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

5.3篩選器方法

//找兄弟
$("#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>

6.jQuery操作標簽

6.1標簽內文本操作

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()方法接收的值為標簽的時候不會被渲染為標簽元素只會被當做值渲染到瀏覽器中

6.2文檔標簽操作

之前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);

6.2.1插入標簽

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')

如果追加的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')

6.2.2刪除標簽 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

6.2.3修改標簽 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')

6.2.4克隆標簽 clone

// 克隆匹配的DOM元素
$(選擇器).clone();
$('button').click(function() {

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

6.3屬性操作

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

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


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

6.3.2removeAttr() 移除屬性

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

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

6.3.3prop()

// 查看屬性
$(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>

6.4class類屬性

6.4.1addClass添加類名

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

6.4.2removeClass移除類名

// 從所有匹配的元素中刪除全部或者指定的類。
$('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>

6.4.3toggleClass類的切換

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

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

6.5val 表單控制項value屬性

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

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

取值:
    文本輸入框:$('#username').val();
    input,type=radio單選框: $('[type="radio"]:checked').val();,首先找到被選中的標簽,再進行取值
    input,type=checkbox多選框: 通過val方法不能直接獲取多選的值,只能拿到一個,想拿到多個項的值,需要迴圈取值
        var d = $('[type="checkbox"]:checked');
        for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
        }
    單選下拉框select: -- $('#s1').val();
    多選下拉框select: -- $('#s2').val(); -- ['1','2']

設置值
    文本輸入框: -- $('#username').val('xxx');
    input,type=radio單選框: -- $(':radio').val(['1']) 找到所有的radio,然後通過val設置值,達到一個選中的效果.
    給單選或者多選框設置值的時候,只要val方法中的值和標簽的value屬性對應的值相同時,那麼這個標簽就會被選中.
    此處有坑:$(':radio').val('1');這樣設置值,不帶中括弧的,意思是將所有的input,type=radio的標簽的value屬性的值設置為1.
    
    input,type=checkbox多選框: -- $(':checkbox').val(['1','2']);
    
    單選下拉框select: -- $('#s1').val(['3']);
    多選下拉框select: -- $('#s2').val(['1','2']);
    
    統一一個方法:
        選擇框都用中括弧設置值.

6.6css樣式

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

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

6.7盒子樣式屬性

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

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

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

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

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

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

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

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

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

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

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

6.8滾動條距離屬性

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

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

7.jQuery動畫效果

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

7.1顯示動畫

方式一：無參數，表示讓指定的元素直接顯示出來。其實這個方法的底層就是通過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("動畫執行完畢！");
});

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

7.2隱藏動畫

方式參照上面的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>

7.3開關式顯示隱藏動畫

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

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

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

7.4滑入和滑出

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

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

註意：省略參數或者傳入不合法的字元串，那麼則使用預設值：400毫秒（同樣適用於fadeIn/slideDown/slideUp）

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

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

7.4.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>

7.5淡入淡出動畫

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

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

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

$(selector).fadeOut(1000);

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

$(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>

7.6自定義動畫

7.6.1語法：

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

7.6.2作用：執行一組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>

7.7停止動畫

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

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

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

參數如果都不寫，預設兩個都是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函數，再執行動畫前，先停掉之前的動畫。

8.jQuery的事件操作

8.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();
});

8.2解綁事件

unbind(type,fn);

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

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

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

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

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

$("p").unbind()

將段落的click事件取消綁定

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

8.3補充一次性事件

one(type,data,fn)

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

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

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

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

8.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:回調函數

9.示例

表單驗證

<!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&q

前端jQurey

1.楔子

2.jqeury介紹

2.1為什麼要使用jQuery

2.2jQuery 的兩大特點

2.3什麼是 jQuery

3.jQuery的使用

3.1使用 jQuery 的基本步驟

3.2jQuery 的入口函數和 $ 符號

3.2.1入口函數（重要）

3.2.2jQuery的 $ 符號

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

4.1二者的區別

4.2二者的相互轉換

5.jQuery查找標簽

5.1基本選擇器

5.1.1層級選擇器

5.1.2屬性選擇器

5.2篩選器

5.2.1基本篩選器

5.2.2表單篩選器

5.3篩選器方法

6.jQuery操作標簽

6.1標簽內文本操作

6.2文檔標簽操作

6.2.1插入標簽

6.2.2刪除標簽 remove、detach和empty

6.2.3修改標簽 replaceWith和replaceAll

6.2.4克隆標簽 clone

6.3屬性操作

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

6.3.2removeAttr() 移除屬性

6.3.3prop()

6.4class類屬性

6.4.1addClass添加類名

6.4.2removeClass移除類名

6.4.3toggleClass類的切換

6.5val 表單控制項value屬性

6.6css樣式

6.7盒子樣式屬性

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

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

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

6.8滾動條距離屬性

7.jQuery動畫效果

7.1顯示動畫

7.2隱藏動畫

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

7.3開關式顯示隱藏動畫

7.4滑入和滑出

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

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

7.4.3滑入滑出切換動畫效果：

7.5淡入淡出動畫

7.6自定義動畫

7.6.1語法：

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

7.7停止動畫

8.jQuery的事件操作

8.1綁定事件

8.2解綁事件

8.3補充 一次性事件

8.4事件委托（事件代理）

9.示例

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

3.2.2jQuery的 `$` 符號

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

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

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

8.3補充一次性事件