day45 jQuery

時間 2019-11-24

標籤 day45 day jquery 欄目 JQuery 简体版

原文原文鏈接

在用js寫代碼時，會遇到一些問題：javascript

window.onload 事件有事件覆蓋的問題，所以只能寫一個事件。css
代碼容錯性差。html
瀏覽器兼容性問題。java
書寫很繁瑣，代碼量多。jquery
代碼很亂，各個頁面處處都是。編程
動畫效果很難實現。json

jQuery的出現，能夠解決以上問題api

關於jQuery的相關資料：數組

官網：http://jquery.com/瀏覽器
官網API文檔：http://api.jquery.com/
漢化API文檔：http://www.css88.com/jqapi-1.9/

jQuery 的兩大特色

鏈式編程：好比.show()和.html()能夠連寫成.show().html()。
隱式迭代：隱式對應的是顯式。隱式迭代的意思是：在方法的內部進行循環遍歷，而不用咱們本身再進行循環，簡化咱們的操做，方便咱們調用。

jQuery 的使用

使用 jQuery 的基本步驟

（1）引包

（2）入口函數

（3）功能實現代碼（事件處理）

如圖：

主要：導包的代碼必定要放在js代碼的最上面。

下載jQuery包以後裏面會有兩個文件，一個是jquery-3.3.1.js，一個是jquery-3.3.1.min.js

它們的區別是：

第一個是未壓縮版，第二個是壓縮版。
平時開發過程當中，可使用任意一個版本；可是，項目上線的時候，推薦使用壓縮版。

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

入口函數（重要）

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

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

View Code

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

寫法一：

 //1.文檔加載完畢，圖片不加載的時候，就能夠執行這個函數。
       $(document).ready(function () {
           alert(1);
       })

寫法二：（寫法一的簡潔版）

//2.文檔加載完畢，圖片不加載的時候，就能夠執行這個函數。
       $(function () {
           alert(1);
       });

寫法三：

  //3.文檔加載完畢，圖片也加載完畢的時候，在執行這個函數。
       $(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。

那怎麼理解jQuery裏面的 $ 符號呢？

$ 實際上表示的是一個函數名 以下：

$(); // 調用上面咱們自定義的函數$

    $(document）.ready(function(){}); // 調用入口函數

    $(function(){}); // 調用入口函數

    $(「#btnShow」) // 獲取id屬性爲btnShow的元素

    $(「div」) // 獲取全部的div標籤元素

如上方所示，jQuery 裏面的 $ 函數，根據傳入參數的不一樣，進行不一樣的調用，實現不一樣的功能。返回的是jQuery對象。

jQuery這個js庫，除了$ 以外，還提供了另一個函數：jQuery。jQuery函數跟 $ 函數的關係：jQuery === $。

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

兩者的區別

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

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

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

經過原生 js 獲取這些元素節點的方式是(id,標籤,類選擇器)：

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

經過 jQuery 獲取這些元素節點的方式是：（id,標籤,類選擇器）

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

設置當前4個div的樣式(css操做)：

$('div').css({
                'width': '200px',
                'height': '200px',
                "background-color":'red',
                'margin-top':'20px'
            })

因爲JQuery 自帶了 css()方法，咱們還能夠直接在代碼中給 div 設置 css 屬性。

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

兩者的相互轉換

一、 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';

總結：若是想要用哪一種方式設置屬性或方法，必須轉換成該類型。

舉例：

隔行換色

代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函數
        jQuery(function () {
            var jqLi = $("li");
            for (var i = 0; i < jqLi.length; i++) {
                if (i % 2 === 0) {
                    //jquery對象，轉換成了js對象
                    jqLi[i].style.backgroundColor = "pink";
                } else {
                    jqLi[i].style.backgroundColor = "yellow";
                }
            }
        });
    </script>
</head>
<body>
<ul>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
</ul>
</body>
</html>

View Code

效果以下：

2、jQuery的選擇器

咱們之前在CSS中學習的選擇器有：

天來學習一下jQuery 選擇器。

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

一、jQuery 的基本選擇器

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.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>

View Code

效果以下：

二、層級選擇器

代碼以下：

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

View Code

效果以下：

三、基本過濾選擇器

基礎過濾器補充--->

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

View Code

效果以下：

表單篩選器(多用於找form表單裏面出現的input標籤)

表單對象屬性

:enabled      可用的
:disabled　　　禁止使用
:checked       默認被選中
:selected      select標籤中被選中

4.篩選器方法

　　① 下一個元素　

$("#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();// 兒子們
$("#id").siblings();// 兄弟們，不包含本身，.siblings('#id')，能夠在添加選擇器進行進一步篩選

　　⑤查找(搜索全部與指定表達式匹配的元素)

$("div").find("p")
　等價於
$("div p")

　　⑥篩選

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

$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的，從全部的div標籤中過濾出有class='c1'屬性的div，
　　　　　　　　　　　　　　　　和find不一樣，find是找div標籤的子子孫孫中找到一個符合條件的標籤
　等價於 
$("div.c1")

　　⑦補充

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

四、屬性選擇器

代碼以下：

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

View Code

效果以下：

樣式操做

　　1.樣式類

　　①添加刪除class類的值來修改樣式　　

addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，若是有就移除，若是沒有就添加。

　　②直接修改css的屬性來修改樣式　

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

示例：
$("p").css("color", "red"); //將全部p標籤的字體設置爲紅色

　　③位置操做

offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置
position()// 獲取匹配元素相對父元素的偏移，不能設置位置
$(window).scrollTop()  //滾輪向下移動的距離
$(window).scrollLeft() //滾輪向左移動的距離

offset  和  position　的區別
.offset()方法容許咱們檢索一個元素相對於文檔（document）的當前位置。

.position()獲取相對於它最近的具備相對位置(position:relative或position:absolute)的父級元素的距離，
　　　　若是找不到這樣的元素，則返回相對於瀏覽器的距離。

　　④ 尺寸

height() //盒子模型content的大小，就是咱們設置的標籤的高度和寬度
width()
innerHeight() //內容content高度 + 兩個padding的高度
innerWidth()
outerHeight() //內容高度 + 兩個padding的高度 + 兩個border的高度，
　　　　　　不包括margin的高度，由於margin不是標籤的，是標籤和標籤之間的距離
outerWidth()

文本操做

　　1.HTML代碼　

html()// 取得第一個匹配元素的html內容，包含標籤內容
html(val)// 設置全部匹配元素的html內容，識別標籤，可以表現出標籤的效果

　　2.文本值

text()// 取得全部匹配元素的內容，只有文本內容，沒有標籤
text(val)// 設置全部匹配元素的內容，不識別標籤，將標籤做爲文本插入進去

　　3.值

val()// 取得第一個匹配元素的當前值
val(val)// 設置全部匹配元素的值
val([val1, val2])// 設置多選的checkbox、多選select的值

　　①設置值

　　② 獲取被選中的checkbox 或 radio 的值

　　③注意事項

文檔處理

　　1.添加到指定元素內部的後面　

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

　　2.添加到指定元素內部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

　　3.添加到指定元素外部的後面

$(A).after(B)// 把B放到A的後面
$(A).insertAfter(B)// 把A放到B的後面

　　4.添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

　　5.移除和清空元素

remove()// 從DOM中刪除全部匹配的元素。
empty()// 刪除匹配的元素集合中全部的子節點，包括文本被所有刪除，可是匹配的元素還在

　　6.替換

replaceWith()
replaceAll()

　　7.克隆

clone()// 參數，看下面的示例
          參數爲true時 ,徹底克隆

<!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>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

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

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


點擊複製按鈕

事件

　　1.經常使用事件

click(function(){...})    點擊事件
hover(function(){...})　　　光標 移進 和 移出 (須要兩個function)
blur(function(){...})　　　　丟失光標
focus(function(){...})　　　　獲取光標
change(function(){...})   //內容發生變化，input，select等
keydown(function(){...})   按下某鍵
keyup(function(){...})  　　擡起某鍵　　
mouseover 和 mouseenter的區別是：mouseover事件只要你在綁定該事件的對象上移動就會一直觸發，
　　　　　　　　　　　　　　　　　　 mmouseenter事件只觸發一次，表示鼠標進入這個對象

綁定滾動事件

$(window).scroll(function(){})

綁定click事件

對象.click(function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: blue;

        }
        .c2{
            background-color: red;
        }
        .c1,.c2{
            width: 200px;
            height: 1000px;
        }
        .s1{
            background-color: #7fffd4;
            position: fixed;
            width: 80px;
            height: 40px;
            bottom: 20px;
            left: 20px;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
        }
        .s1 a{
            text-decoration: none;

        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<!--<a href="" name="top">頂部位置</a>-->
<p id="top"></p>

<div class="c1"></div>
<div class="c2"></div>

<span class="s1 hide">
    <a href="#top">返回頂部</a>
</span>

<script src="jquery.js"></script>
<script>
    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop()>200){
            $('.s1').removeClass('hide');
        }
        else {
            $('.s1').addClass('hide');
        }
    })

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

View Code

　　2.input 事件(只能用 on 綁定)

　　　實時監聽input輸入值的變化

　　3.事件綁定

　　　　① .click(function(){...})

　　　　② .on('click',function(){...})

　　　　③移除事件

　　　　　　$('li').off('' click");

　　　　④阻止後續事件執行

　　　　　常見阻止表單提交等，若是input標籤裏面的值爲空就組織它提交，就可使用這兩種方法

　　　　　　1). return false;

　　　　2). e.stopPropagation();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默認事件</title>
</head>
<body>

<form action="">  #action裏面若是沒寫url，默認是將內容提交到當前頁面的url處
    <button id="b1">點我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.stopPropagation();
    });
</script>
</body>
</html>

　　　　⑤注意

　像click、keydown等DOM中定義的事件，咱們均可以使用`.on()`方法來綁定事件，

可是`hover`這種jQuery中定義的事件就不能用`.on()`方法來綁定了。

　　　①阻止事件冒泡

　　子級標籤事件發生帶動父級標籤事件發生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>點我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    //冒泡的意思就是由於html能夠嵌套，若是你給兒子標籤綁定了點事件或者沒有綁定點擊事件，
　　　　父級標籤綁定了點擊事件，那麼你一點擊子標籤，無論子標籤
    有沒有綁定事件，都會觸發父級標籤的點擊事件，若是有，會先觸發子標籤的點擊事件，而後觸發父級標籤的點擊事件，　　
　　無論子標籤有沒有點擊事件，都會一級一級的還往上找點擊事件
    //因此咱們要阻止這種事件冒泡
    $("span").click(function (e) { //這個參數e(只是個形參，寫evt或者event名字的也不少)表示當前事件自己，這個事件也是一個對象
        alert("span");
        //return false；這個也能夠阻止
        e.stopPropagation(); 用事件對象的這個方法就能阻止冒泡 （Propagation：傳遞的意思）
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

　　②事件委託

　　經過事件冒泡的原理，利用父標籤去捕獲子標籤的事件，將將來添加進來的某些子標籤自動綁定上事件。

$("table").on("click", ".delete", function () { //中間的參數是個選擇器，前面這個$('table')是父級標籤選擇器，
　　　　　　　　　　　　選擇的是父級標籤，意思就是將子標籤（子子孫孫）的點擊事件委託給了父級標籤
  //可是這裏注意一點，你console.log(this)；你會發現this仍是觸發事件的那個子標籤，這個記住昂
  // 刪除按鈕綁定的事件 
})

頁面載入　

　　頁面加載完成以後要作的內容　

　　1.window.onload = funtion(){...}

缺點: ( 只能一個 , 慢 )
   1.若是你本身寫了兩個js文件，每一個js文件中都有一個window.onload的話，那麼後引入的文件會把前面引入
的文件的window.onload裏面的js代碼所有覆蓋掉，那麼第一個文件的js代碼就失去了效果，
   2.還有一個問題就是，window.onload會等到頁面上的文檔、圖片、視頻等全部資源都加載完才執行裏面的js代碼，
致使有些效果的加載比較慢，

　　2.①

$(document).ready(function(){
// 在這裏寫你的JS代碼...
})

　　② (上面的簡寫經常使用)

$(function(){
// 你在這裏寫你的代碼
})

補充

　　1. each 迭代函數,能夠迭代對象和數組

　　　①迭代數組

li =[10,20,30,40]
$.each(li,function(i, v){  
  console.log(i, v);//function裏面能夠接受兩個參數，i是索引，v是每次循環的具體元素。
})

　輸出：

　　　　 ②遍歷對象

// 爲每個li標籤添加foo
$("li").each(function(){
  $(this).addClass("c1");
})

# 方法用來迭代jQuery對象中的每個DOM元素。
　每次回調函數執行時，會傳遞當前循環次數做爲參數(從0開始計數)。
   因爲回調函數是在當前DOM元素爲上下文的語境中觸發的，
   因此關鍵字  老是指向這個元素。.each()this

　　可直接寫成

$("li").addClass("c1");  // 對全部標籤作統一操做

　　③ 終止遍歷

　　2. .data() 在標籤上儲存數據

　　① 設置值

　　　　　.data(key, value): 設置值

　　② 取值

　　　.data(key): 取值，沒有的話返回undefined

　　③刪除數據

　　3.插件

　　①. jQuery.extend(object)

　　　jQuery的命名空間下添加新的功能。多用於插件開發者向 jQuery 中添加新函數時使用。

<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定義了一個min和max方法，min和max做爲鍵，值是一個function
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

　　②.jQuery.fn.extend(object)

　　　　給任意的jQuery標籤對象添加一個方法

<script>
  jQuery.fn.extend({  //給任意的jQuery標籤對象添加一個方法
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery對象可使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

3、jquery動畫效果

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

顯示動畫

方式一：

 $("div").show();

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

方式二：

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

解釋：經過控制元素的寬高、透明度、display屬性，逐漸顯示，2秒後顯示完畢。

方式三：

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

參數能夠是：

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

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

方式四：

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

View Code

開關式顯示隱藏動畫

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

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

代碼以下：

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

滑入和滑出

一、滑入動畫效果：（相似於生活中的捲簾門）

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

解釋：下拉動畫，顯示元素。

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

二、滑出動畫效果：

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

解釋：上拉動畫，隱藏元素。

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

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

View Code

淡入淡出動畫

一、淡入動畫效果：

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

View Code

自定義動畫

語法：

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

View Code

中止動畫

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

View Code

ps:

javascript:void(0); //跟javascript:;效果同樣

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

4、jquery的屬性操做

04-jQuery的屬性操做

jquery的屬性操做模塊分爲四個部分：html屬性操做，dom屬性操做，類樣式操做和值操做

html屬性操做：是對html文檔中的屬性進行讀取，設置和移除操做。好比attr()、removeAttr()
DOM屬性操做：對DOM元素的屬性進行讀取，設置和移除操做。好比prop()、removeProp()
類樣式操做：是指對DOM屬性className進行添加，移除操做。好比addClass()、removeClass()、toggleClass()
值操做：是對DOM屬性value進行讀取和設置操做。好比html()、text()、val()

attr()

設置屬性值或者返回被選元素的屬性值

       //獲取值：attr()設置一個屬性值的時候 只是獲取值
        var id = $('div').attr('id')
        console.log(id)
        var cla = $('div').attr('class')
        console.log(cla)
        //設置值
        //1.設置一個值 設置div的class爲box
        $('div').attr('class','box')
        //2.設置多個值，參數爲對象，鍵值對存儲
        $('div').attr({name:'hahaha',class:'happy'})

removeAttr()

移除屬性

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

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

prop()

prop() 方法設置或返回被選元素的屬性和值。

當該方法用於返回屬性值時，則返回第一個匹配元素的值。

當該方法用於設置屬性值時，則爲匹配元素集合設置一個或多個屬性/值對。

語法：

返回屬性的值：

$(selector).prop(property)

設置屬性和值：

$(selector).prop(property,value)

設置多個屬性和值：

$(selector).prop({property:value, property:value,...})

關於attr()和prop()的區別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id='test' name="sex"  checked/>
    女<input type="radio" id='test2' name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //獲取第一個input
            var el = $('input').first();
            //undefined  由於attr是獲取的這個對象屬性節點的值，很顯然此時沒有這個屬性節點，天然輸出undefined
            console.log(el.attr('style'));
            // 輸出CSSStyleDeclaration對象，對於一個DOM對象，是具備原生的style對象屬性的，因此輸出了style對象
            console.log(el.prop('style'));
            console.log(document.getElementById('test').style);

            $('button').click(function(){
                alert(el.prop("checked") ? "男":"女");
            })
            


        })
    </script>
    
</body>
</html>

View Code

何時使用attr()，何時使用prop()？

1.是有true,false兩個屬性使用prop();

2.其餘則使用attr();

addClass（添加多個類名）

爲每一個匹配的元素添加指定的類名。

$('div').addClass("box");//追加一個類名到原有的類名

還能夠爲匹配的元素添加多個類名

$('div').addClass("box box2");//追加多個類名

removeClass

從全部匹配的元素中刪除所有或者指定的類。

移除指定的類（一個或多個）

$('div').removeClass('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>

View Code

toggleClass

若是存在（不存在）就刪除（添加）一個類。

語法：toggleClass('box')

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

html

獲取值：

語法;

html() 是獲取選中標籤元素中全部的內容

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

設置值：設置該元素的全部內容會替換掉標籤中原來的內容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

text

獲取值：

text() 獲取匹配元素包含的文本內容

語法：

$('#box').text();

設置值：
設置該全部的文本內容

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

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

val

獲取值：

val()用於表單控件中獲取值，好比input textarea select等等

設置值：

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

綁定滾動事件$(window).scroll(function(){})綁定click事件對象.click(function(){})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

day45 jQuery

jQuery 的兩大特色

jQuery 的使用

使用 jQuery 的基本步驟

jQuery 的入口函數和 $ 符號

入口函數（重要）

jQuery的$符號

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

兩者的區別

兩者的相互轉換

隔行換色

2、jQuery的選擇器

一、jQuery 的基本選擇器

二、層級選擇器

三、基本過濾選擇器

四、屬性選擇器

樣式操做

文本操做

文檔處理

頁面載入

補充

3、jquery動畫效果

顯示動畫

隱藏動畫

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

開關式顯示隱藏動畫

滑入和滑出

淡入淡出動畫

自定義動畫

中止動畫

4、jquery的屬性操做

04-jQuery的屬性操做

attr()

removeAttr()

prop()

關於attr()和prop()的區別

何時使用attr()，何時使用prop()？

addClass（添加多個類名）

removeClass

案例：

toggleClass

html

text

val

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

jQuery的`$`符號

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

頁面載入　