JavaScript進階內容——jQuery

我們在前面的文章中已經掌握了JavaScript的全部內容，現在讓我們了解一下JavaScript庫

這篇文章主要是為了為大家大致講解JavaScript庫以及使用方法，本篇不會完全講解jQuery的全部語法

如果希望完全掌握，可以參考網站jQuery API 中文檔案 | jQuery API 中文在線手冊 | jquery api 下載 | jquery api chm (cuishifeng.cn)

JavaScript庫

JavaScript庫：

即library，是一個封裝好的特定的集合（包括許多屬性和方法），
從封裝一大堆函式的角度來理解庫，就相比于Java的類，里面封裝了許多方法，我們可以直接匯入并且調入其方法
簡單理解：就是一個JS檔案，里面對我們的原生JS代碼進行了封裝，存放在里面，這樣我們就可以快速高效的使用這些封裝好的功能
比如jQuery，就是為了快速操作DOM物件，里面封裝的基本都是函式（方法）

常見的JavaScript庫：

jQuery
Prototype
YUI
Dojo
Ext JS
zepto

jQuery概述

jQuery概念：

jQuery是一個快速，簡潔的JavaScript庫，其設計的宗旨是：“Write Less，Do More”，即提倡更少的代碼做更多的事

jQuery優點：

輕量級，核心檔案只有不到100kb，不會影響頁面加載速度
跨瀏覽器兼容，基本兼容所有瀏覽器
鏈式編程，隱式迭代
對事件，樣式，影片，大大的簡化了DOM操作
支持插件開發拓展，支持第三方軟體
免費且開源

jQuery基本格式：

$(選擇器).action()

jQuery使用順序

jQuery是開源的JS檔案代碼，我們需要先獲得其JS檔案，才能夠使用

在官網中下載jQuery的JS檔案，或者復制其代碼，自定義一個jQuery代碼

在我們需要使用jQuery的檔案中匯入該JS檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 在開頭匯入jQuery檔案 -->
    <script src="https://www.cnblogs.com/qiuluoyuweiliang/p/jQuery.min.js"></script>
</head>
<body>
    
</body>
</html>

jQuery入口函式

jQuery的使用位置和JavaScript的使用位置一樣，都是在script中進行，同樣存放在body底部

$(function(){
	...//頁面DOM加載完成后進行
})

$(document),ready(function(){
	...//頁面DOM加載完成后進行
})

上述兩種方法可以使jQuery的書寫位置任意存放

等待DOM結構渲染完畢后即可執行內部代碼，不必等到所有外部資源加載完畢，jQuery幫我們完成了封裝
相當于原生JS中的DOMContentLoaded
更推薦第一種方法（簡單快捷）

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 我們需要先匯入jQuery的js檔案 -->
    <script src="https://www.cnblogs.com/qiuluoyuweiliang/p/jQuery.min.js"></script>

    <!-- 這里設定div樣式，我們希望將div的display設定為none -->
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <script>
        // 首先我們先來介紹一下入口函式，等同于DOMContentLoaded，可以將script寫于任意位置

        // 1.$(function() {})第一種入口函式
        $(function() {
            alert('1');
        })

        // 2.$(document).ready(function(){})第二種入口函式
        $(document).ready(function(){
            // 這個意思是隱藏div，暫時做個了解即可
            $('div').hide();
        })
    </script>


    <div></div>
</body>
</html>

jQuery的頂級物件$

我們在這里介紹一下jQuery出場率最高的$符號：

$是jQuery的別稱，在代碼中我們可以用$代替jQuery，但一般為了方便，我們習慣寫$
$是jQuery的頂級物件，類似于JavaScript中的window物件，把元素利用$包裝成jQuery物件，就可以呼叫jQuery的方法

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://www.cnblogs.com/qiuluoyuweiliang/p/jQuery.min.js"></script>
</head>
<body>
    <script>
        // 1.$是 jQuery的別稱 
        // 下面兩種代碼的運行結果是一致的：

        $(function(){
            console.log('1');
        })

        jQuery(function(){
            console.log('1');
        })

        // 2.$是jQuery的頂級物件，你可以從中呼叫任何函式，類似于window
        

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

jQuery物件和DOM物件以及互相轉換

我們需要注意jQuery物件和DOM物件是兩種完全不同的物件：

用原生JS獲得來的物件就是DOM物件
用jQuery獲得來的物件就是jQuery物件
jQuery物件的本質是：利用$對DOM物件包裝后產生的物件（偽陣列形式存盤）

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://www.cnblogs.com/qiuluoyuweiliang/p/jQuery.min.js"></script>
</head>
<body>
    <div></div>
    <span></span>

    <script>
        // 1.DOM物件，由原生JS獲得的物件
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        console.log(div);

        // 2.jQuery物件，由jQuery方法獲得的物件
        // $('標簽')創建物件
        $('div');
        $('span');
        // 注意：獲得的是一個偽陣列
        console.log($('div'));

        // 3.兩種物件，只能使用各自的方法，不能混合使用：
        div.style.display = 'none';
        $('div').hide();
    </script>
</body>
</html>

雖然兩種物件不盡相同，但我們仍舊可以進行轉換：

DOM物件 -> jQuery物件

$('選擇器') == $(DOM物件)

jQuery物件 -> DOM物件

$('選擇器')[index]
$('選擇器').get(index)

注意：因為原生JS比jQuery更大，原生的一些屬性和方法jQuery并沒有封裝，所以如果想使用這些屬性和方法就需要把jQuer物件轉換為DOM物件才能使用

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <script src="https://www.cnblogs.com/qiuluoyuweiliang/p/jQuery.min.js"></script>
</head>
<body>
    <video src="https://www.cnblogs.com/qiuluoyuweiliang/p/#"></video>

    <script>
        // 1.DOM物件轉化為jQuery物件: $('標簽') == $(DOM物件)
        var myVideo = document.querySelector('video');

        $(myVideo);

        // 2.jQuery物件轉化為DOM物件: $('標簽')[索引號]  $('標簽').get(索引號)
        $('video');

        $('video')[0];
        $('video').get(0);
    </script>
</body>
</html>

jQuery選擇器

jQuery的選擇器與CSS的選擇器完全相同：

標簽選擇器
類選擇器
ID選擇器
層次選擇器
兄弟選擇器

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 我們來比較一下原生創建和jQuery創建

        // 原生選擇器相對繁瑣
        document.getElementsByTagName('div');
        document.getElementById('#id');
        document.getElementsByClassName('.class');
        
        // 在HTML5產生的document.querySelector('')便綜合了上述所有選擇器，類似于jQuery的創建
        document.querySelector('');

        // jQuery創建的格式：$(選擇器).action()
        // 這里的選擇器完全符合CSS選擇器的格式，action我們會在下一部分講到
        $('div').click();
        $('.class').click();
        $('#id').click();
    </script>
</body>
</html>

如果想要了解更多選擇器，可以訪問頁面：https://jquery.cuishifeng.cn/index.html

jQuery事件

jQuery的滑鼠事件和鍵盤事件與JavaScript原生代碼事件完全相同：

滑鼠事件	觸發條件
click	滑鼠點擊左鍵觸發
mouseover	滑鼠經過觸發
mouseout	滑鼠離開觸發
focus	獲得滑鼠焦點觸發
blur	失去滑鼠焦點觸發
mousemove	滑鼠移動觸發
mouseup	滑鼠彈起觸發
mousedown	滑鼠按下觸發

鍵盤事件	說明
keyup	某個鍵盤按鍵被松開時觸發
keydown	某個鍵盤按鍵被按下時觸發
keypress	某個鍵盤按鍵被按下時觸發（不能識別功能鍵，如ctrl，shift，左右箭頭）

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://www.cnblogs.com/qiuluoyuweiliang/p/jQuery.min.js"></script>

    <!-- 我們希望在盒子里移動滑鼠時，上面顯示滑鼠位置 -->
    <style>
        div {
            height: 400px;
            width: 400px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    mouse: <span></span>
    <div></div>

    <script>
        // 這里的滑鼠操作和JavaScript原生的addEventListener中的方法完全相同
        $('div').mousemove(function(e){
            // 這里的text改變其文本內容
            $('span').text("x:" + e.pageX + "y:" + e.pageY);
        })
    </script>
</body>
</html>

如果想要了解更多事件，可以訪問頁面：https://jquery.cuishifeng.cn/index.html

jQuery操作DOM元素

對于DOM元素的操作分為許多種，下面僅做出實體介紹：

節點文本操作：

// 這里獲得值
$('').text();
// 這里設定值
$('').text('');
// 這里獲得值
$('').html();
// 這里設定值
$('').html('');

CSS操作：

$('').css(''，'');
$('').css({'':'','':''});

元素的顯示和隱藏（本質是display：block/none）

//元素隱藏
$('').hide();
//元素顯示
$('').show();

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://www.cnblogs.com/qiuluoyuweiliang/p/jQuery.min.js"></script>
</head>
<body>
    <ul id="test-ul">
        <li name="java">Java</li>
        <li >JavaScript</li>
    </ul>

    <script>
        // 我們僅做出最簡單的入門演示

        // 1.節點文本操作：

        // 注意：這里的選擇器采用了層次選擇器，且在選擇的li中加入了判定條件，用[]包裹
        // 文本修改的兩種方法有text和html

        // 這里獲得值
        $('#test-ul li[name=java]').text();
        // 這里設定值
        $('#test-ul li[name=java]').text('JJJJava');
        // 這里獲得值
        $('#test-ul li[name=java]').html();
        // 這里設定值
        $('#test-ul li[name=java]').html('Java');

        // 2.css操作：

        // 這里css操作直接action為css，然后后面加入兩個字串，第一個是屬性，第二個是屬性值
        $('#test-ul li[class=javascript]').css("color","red");
        // 當需要修改多個屬性時，用{}包括起來,里面用“，”隔開，并且以“：”的形式賦值
        $('#test-ul li[class=javascript]').css({"color":"blue","backgroundColor":"yellow"});

        // 3.元素的顯示和隱藏

        // 元素顯示用show（），隱藏用hide（）
        $('ul').hide();
        $('ul').show();
        
    </script>
</body>
</html>

如果想要了解更多操作，可以訪問頁面：https://jquery.cuishifeng.cn/index.html

結束語

關于jQuery的內容我們僅做出相關介紹，后期我會出一期jQuery的常用操作，希望可以為你帶來幫助！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500128.html

標籤：jQuery

上一篇：常見加密演算法C#實作（一）

下一篇：模擬Vue實作回應式資料