day 30 jQuery

時間 2021-02-23

標籤 javascript css html java 程序員 ajax 編程瀏覽器框架 less 欄目 JQuery 简体版

原文原文鏈接

1. 簡介

jQuery是一個兼容多瀏覽器的javascript庫(函數庫)，核心理念是write less, do more(寫得更少，作的更多)。javascript

JQuery，顧名思義，就是JavaScript和查詢 (Query)，便是輔助JavaScript開發的庫。css

特色：

Query 是一個快速的簡潔的javascript框架，能夠簡化查詢DOM對象、處理事件、製做動畫、處理Ajax交互過程。html

提供了強大的功能函數
解決瀏覽器兼容性問題
糾正錯誤的腳本知識
體積小，使用靈巧(只需引入一個js文件)
易擴展、插件豐富

做用：

程序員的角度：簡化JavaScript和Ajax編程，可以使程序員從設計和書寫繁雜的JS應用中解脫出來，將關注點轉向功能需求而非實現細節上，從而提升項目的開發速度。java

用戶體驗的角度：改善了頁面視覺效果，加強了與頁面的交互性，體驗更絢麗的網頁物資。程序員

方便地選擇頁面元素(模仿CSS選擇器更精確、靈活)
動態更改頁面樣式/頁面內容(操做DOM，動態添加、移除樣式)
控制響應事件(動態添加響應事件)
提供基本網頁特效(提供已封裝的網頁特效方法)
快速實現通訊(ajax)ajax
如何引入jQuery包：

jQuery庫文件不須要安裝，只需使用 < script >標籤引入到HTML文件中，拿到jQuery的庫文件後，就跟本身寫的JS文件一樣的引入方式，便可，如下是幾種引入方式：編程

1）引入本地的Jquery瀏覽器

2）引入cdn在線提供的庫文件（穩定可靠高速）框架

2. 用法

$(function(){})

$是jQuery核心函數, 是jQuery的簡寫 jQuery == $
jQuery有本身的語法,它和原生是兩套語法
$方法:是一個工廠模式的函數
$()至關於頁面初始化函數，當頁面加載完畢，會執行$()，即jQuery()
$(function(){ }) 是$(document).ready(function(){});的簡寫
$(document).ready(function(){})和window.onload 的區別：less
- ready表示文檔已加載完成（不包含圖片等非文字媒體文件）
- onload 是指頁面包含圖片在內的全部元素都加載完成
- $(document).ready(function(){})要比 window.onload先執行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="box">123123</div>
    </body>
</html>
<script src="js/jQuery.js"></script>
<script type="text/javascript">
    // 相似於延遲加載
    $(function() {
        console.log("xixi");
    });

    //徹底體
    $(document).ready(function() {
        // 原生dom
        let oBox = document.getElementById("box");
        console.log(oBox.innerHTML);

        //jQueryDom
        console.log($("#box").html());
    });
</script>

包裝集

jQuery所獲取的全部dom元素不管是一個仍是一組，都封裝成一個jQuery包裝集，即集合。

jQuery包裝集與DOM 對象的互轉：

原生Dom -> jQueryDom
- 將原生對象放入 $(原生Dom) 如：document ---> $(document)
```
let oBox = document.getElementById("box");
console.log($(oBox).html());
```

jQueryDom -> 原生Dom

// 方法1:
let oBox = $("div").get(0);
// 方法2:
let oBox = $("div")[0];
console.log(oBox.innerHTML);

1) 基礎選擇器

id選擇器

// 方法1:
// $("#box1").css("backgroundColor", "red");
// 方法2: 相似css代碼
$("#box1").css({
    backgroundColor: "red"
});

類選擇器

$(".box").css({backgroundColor: "red"});

標籤選擇器

$("p").css({color: "red"});

羣組選擇器

$("p,span,strong").css({color: "red"});

通用選擇器

（這是選擇所有元素）

$("*").css({backgroundColor: "green"});

2) 層次選擇器

後代選擇器

空格

後代：不僅是子代

$("body div").css({backgroundColor: "red"});

子代選擇器

大於號

$("body>div").css({backgroundColor: "red"});

相鄰選擇器

加號

$("#box1+div").css({backgroundColor: "red"});

兄弟選擇器

波浪號~

$("#box2~div").css({backgroundColor: "red"});

3) 屬性選擇器

[屬性名/屬性名=屬性值...]

<script type="text/javascript">
    // div帶有class屬性的選擇器
    $("div[class]").css({backgroundColor:"red"});
    
    // div同時帶有多個屬性的選擇器
    $("div[class][id]").css({backgroundColor:"red"});
    
    // 經過指定的屬性值來獲取元素
    $("div[id='box1']").css({backgroundColor:"red"});
</script>

4) 僞類選擇器

:even 獲取全部偶數行的元素

// 注意:從第0行開始
$("div:even").css({backgroundColor:"red"});

:odd 獲取全部奇數行的元素

$("div:odd").css({backgroundColor:"red"});

:first 獲取第0個元素

$("div:first").css({backgroundColor: "red"});

:last 獲取最後一個元素

$("div:last").css({backgroundColor:"red"});

:eq(下標) 根據下標獲取某個特定的元素

//寫法1:
$("div:eq(2)").css({backgroundColor: "red"});
//寫法2:
let n = 3;
$("div").eq(n).css({backgroundColor: "red"});

:not(目標元素) 除了某個元素

//寫法1:
$("div:not('#box3')").css({backgroundColor: "red"});
//寫法2:
$("div").not("#box3").css({backgroundColor: "red"});

:gt(n) 獲取大於n的元素

$("div:gt(2)").css({backgroundColor:"skyblue"});

:lt(n) 獲取小於n的元素

$("div:lt(2)").css({backgroundColor:"red"});

5) 內容選擇器

:contains(內容) 根據元素的內容,獲取元素

$("div:contains('hello world')").css({backgroundColor: "red"});

:empty 選中內容爲空的元素,空格換行都不能有
```
$("div:empty").css({backgroundColor:"red"});
```
:has(選擇器) 根據包含的元素來進行選擇
```
$("div:has('span')").css({backgroundColor:"red"});
```

6) 可見性選擇器

:hidden 選中隱藏的元素

:visible 改變可見元素的樣式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table>
            <tr style="display:none">
                <td>Value 1</td>
            </tr>
            <tr>
                <td>Value 2</td>
            </tr>
        </table>
    </body>
</html>
<script class="lazy" data-src="js/jQuery.js"></script>
<script type="text/javascript">
    // :hidden 選中隱藏的元素
    $("tr:hidden").css({backgroundColor:"red"});
    // :visible 改變可見元素的樣式
    $("tr:visible").css({backgroundColor:"green"});
</script>

7) jQuery的遍歷

jQuery 遍歷，意爲「移動」，用於根據其相對於其餘元素的關係來「查找」（或選取）HTML 元素。以某項選擇開始，並沿着這個選擇移動，直到抵達您指望的元素爲止。

下圖展現了一個家族樹。經過 jQuery 遍歷，您可以從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱爲對 DOM 進行遍歷。

圖示解釋：

兄弟節點之間的遍歷

next() 下一個兄弟
nextAll() 下面全部兄弟
prev() 上一個兄弟
prevAll() 上面全部

$("#box1").next().css({backgroundColor: "red"});//連綴模式
$("#box1").nextAll().css({backgroundColor: "red"});

父子節點間的遍歷

parent() 找父節點

$("p").eq(1).parent().css({backgroundColor:"red"});

找子節點

find (必須寫參數)

children (能夠不寫參數)

$("body").find("span").css({backgroundColor: "red"});
$("body").children().css({backgroundColor: "red"});//body的孩子(父子關係)

3. 文本

jQuery特色:關於讀寫的函數,一般都是一個,無參爲讀,有參爲寫。

innerHTML == html()
value == val()

<script type="text/javascript">
    // 讀
    console.log($("div").html());
    // 寫
    $("div").html(567);
    
    // 讀
    console.log($("input").val());
    // 寫
    $("input").val(888);    
</script>

4. 事件

Query的事件：

事件不須要帶on;
能夠傳參數;
不用考慮兼容性;
this轉jQuery的this this==$(this)

$("#box").click(function(){
        //this要轉成jQueryDom的this
        $(this).css({backgroundColor: "red"});
    })

傳參：

$("#box").click({name:"小明",age:18},function(evt){
        console.log(evt.data);//{name:"小明",age:18}
    })

5. 動畫

jQueryDom對象.show([speed,[easing],[fn])；

等價於：jQueryDom對象.hide([時間]，[切換效果]，[回調函數]);

參數speed
- 即動畫所需時間；
- 三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)；
參數easing
- 用來指定切換效果，默認是"swing 搖擺"，可用參數"linear 線性"；
參數fn回調函數
- 在動畫完成後執行的函數，每一個元素執行一次；

舉例：

$('button').eq(0).click(function() {
        // 用1000毫秒將box元素隱藏，動畫完成後執行回調，打印heihei
        //注意：動畫須要時間，是異步，異步完成後再執行回調函數
        $("#box").hide(1000, function() {
            console.log('heihei');
        })
    });

//作一些奇奇怪怪的事情
    $("button").eq(2).click(function() {
        // 回調
        $("#box").fadeToggle(1000, arguments.callee);
    });

基本動畫：show hide toggle

滑塊：slideDown slideUp slideToggle

淡入淡出：fadeIn fadeOut fadeToggle

自定義動畫

animate(params,[speed],[easing],[fn]) 等價於animate（數據,時間,[切換效果],回調函數）
stop([clearQueue],[jumpToEnd])
- clearQueue: 若是設置成true，則清空隊列。能夠當即結束動畫
- jumpToEnd: 若是設置成true，則完成隊列。能夠當即完成動畫

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box {
                width: 200px;
                height: 200px;
                background-color: pink;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <button type="button">變形</button>
        <button type="button">中止</button>
        <div id="box">

        </div>
    </body>
</html>
<script class="lazy" data-src='jQuery.js'></script>
<script type="text/javascript">
    $("button").eq(0).click(function() {
        //連綴模式
        $("#box").animate({
            height: 100,
            width: "300px",
            left: 1000
        }, 1000, function() {
            console.log(1);
        }).animate({
            top: 600
        }, 2000, function() {
            console.log(2);
        }).animate({
            left: 0
        }, 2000, function() {
            console.log(3);
        }).animate({
            top: 50
        }, 2000, function() {
            console.log(4);
        });
    });

    $("button").eq(1).click(function() {
        // 結束當前動畫,其餘動畫正常執行 
        // $("#box").stop();//無參默認爲兩個false

        // 中止全部動畫隊列
        // $("#box").stop(true,false);

        //當即執行完當前動畫，其餘動畫正常執行 
        // $("#box").stop(false,true);

        //當即執行完當前動畫，並清空動畫隊列
        $("#box").stop(true, true);
    });
</script>

案例：手風琴

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

            ul {
                width: 500px;
                height: 150px;
                background-color: #FFC0CB;
                margin: auto;
                /* position: relative; */
            }

            li {
                list-style: none;
                float: left;
                width: 40px;
                height: 150px;
                overflow: hidden;
                border: 1px solid black;


            }

            img {
                height: 150px;
                width: 240px;
                background-size: 240px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                ![](img/1.jpg)
            </li>
            <li>
                ![](img/2.jpg)
            </li>
            <li>
                ![](img/3.jpg)
            </li>
            <li>
                ![](img/4.jpg)
            </li>
            <li>
                ![](img/5.jpg)
            </li>
        </ul>
    </body>
</html>
<script src="jQuery.js"></script>
<script type="text/javascript">
    $('li').mouseover(function() {
        $(this).stop().animate({
            width: 240
        }).siblings('li').stop().animate({
            width: 40
        });
    });
</script>