JavaScript的常用庫 —— jQuery Detail - 前端,jQuery kitty又困了 Blog

Stories

Detail

Return

JavaScript的常用庫 —— jQuery - Stories Detail

01:59 PM · Nov 06 ,2025

jQuery

用來更加方便地去控制前端的HTML標籤和CSS屬性。

使用方式：

1. 直接在`<head>`元素中添加：

<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>

2. 按jQuery官網提示下載。

https://jquery.com/download/

選擇器：

`$(selector)`，`selector`類似於CSS選擇器。

$('div');
$('.big-div');
$('div > p')

例如：
test.js中的內容為：

let main = function() {
    let $div = $('.mydiv');
    console.log($div);
}

export {
    main
}

test.html中的內容為：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="/test/test.css">
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>  // jQuery
</head>

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div class="mydiv"></div>

</body>
</html>

test.css中的內容為：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

事件：

`$(selector).on(event, func)`綁定事件。

$('div').on('click', function (e) {
    console.log("click div");
})

簡寫：

$div.click(function() {
        console.log("click div");
    })

`$(selector).off(event, func)`刪除事件。

$('div').on('click', function (e) {
    console.log("click div");

    $('div').off('click');   // 刪除單擊事件
});

例如:
test.js中的內容為：

let main = function() {
    let $div = $('div');
    
    $div.on("click", function() {   // 綁定事件
        console.log("這是click div");

        //$div.off("click");  // 刪除（解綁）事件

    })
}

export {
    main
}

test.html中的內容為：

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div></div>

</body>

test.css中的內容為：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

當存在多個相同類型的事件觸發函數時，可以通過`click.name`來區分。

$('div').on('click.first', function (e) {
    console.log("click div");

    $('div').off('click.first');
});

例如:
test.js中的內容為：

let main = function() {
    let $div = $('div');
    
    $div.on("click.name1", function() {   // 綁定事件
        console.log("這是click div 1");
        $div.off("click.name2");  // 解綁click.name2事件
    })

    $div.on("click.name2", function() {   // 綁定事件
        console.log("這是click div 2");
    })
}

export {
    main
}

test.html中的內容為：

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div></div>

</body>

test.css中的內容為：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

在事件觸發的函數中的`return false`等價於同時執行以下兩個操作：

e.stopPropagation()：阻止事件向上傳遞
e.preventDefault()：阻止事件的默認行為

例如:
test.js中的內容為：

let main = function() {
    let $div = $('div');
    
    $div.on("click", function(e) {   // 給<div>綁定點擊事件
        console.log("這是click div 1");
    });

    $('a').on("click", function(e) {  // 給<a>綁定點擊事件
        console.log("click a");

        e.stopPropagation();  // 阻止向上傳遞，a事件觸發div事件不觸發
        e.preventDefault();  // 阻止當前點擊事件的操作，a事件不觸發div事件觸發

        //return false;  // 等同於e.stopPropagation(); e.preventDefault();  a事件不觸發div事件也不觸發

    })
}

export {
    main
}

test.html中的內容為：

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div>
        <a href="https://www.baidu.com" target="_blank">百度</a>
    </div>

</body>

test.css中的內容為：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

元素的隱藏、展現：

$A.hide()：隱藏，可以添加參數，表示消失時間
$A.show()：展現，可以添加參數，表示出現時間
$A.fadeOut()：慢慢消失，可以添加參數，表示消失時間
$A.fadeIn()：慢慢出現，可以添加參數，表示出現時間

例如:
test.js中的內容為：

let main = function() {
    let $div = $('div');
    let $btn_hide = $('#hide-btn');
    let $btn_show = $('#show-btn');

    $btn_hide.click(function() {
        $div.hide(3000);  // 花費3000毫秒(= 3秒)隱藏
        //$div.fadeOut(3000);  // 淡出
    });

    $btn_show.click(function() {
        $div.show(1000);  // 花費1秒展現
        //$div.fadeIn(1000);  // 淡入
    });
}

export {
    main
}

test.html中的內容為：

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div></div>

    <button id="hide-btn">隱藏</button>
    <button id="show-btn">展現</button>

</body>

test.css中的內容為：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

元素的添加、刪除：

$('<div class="mydiv"><span>Hello World</span></div>')：構造一個jQuery對象
$A.append($B)：將$B添加到$A的末尾
$A.prepend($B)：將$B添加到$A的開頭
$A.remove()：刪除元素$A
$A.empty()：清空元素$A的所有兒子

例如:
test.js中的內容為：

let main = function() {
    let $div = $('div');

    let $a = $(
        `<a id="" style="" href="https://www.baidu.com">
            百度
            <span>!!!</span>
        </a>`);

    $div.click(function() {  // 單擊
        $div.append($a);  // 將$a添加到$div
    });

    $div.dblclick(function() {  // 雙擊
        $a.remove();  // 刪除元素$a
        // $dic.empty()：清空元素$div裏的所有兒子
    });
}

export {
    main
}

test.html中的內容為：

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div></div>

</body>

test.css中的內容為：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

對類的操作：

$A.addClass(class_name)：添加某個類
$A.removeClass(class_name)：刪除某個類
$A.hasClass(class_name)：判斷某個類是否存在

例如:
test.js中的內容為：

let main = function() {
    let $div = $('div');

    $div.click(function() {  // 單擊
        $div.addClass('my-div');  // 添加my-div類
    });

    $div.dblclick(function() {  // 雙擊
        $div.removeClass('my-div');  // 刪除my-div類
    });
}

export {
    main
}

test.html中的內容為：

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div></div>

</body>

test.css中的內容為：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

.my-div {
    background-color: orange;
}

對CSS的操作：

$("div").css("background-color")：獲取某個CSS的屬性
$("div").css("background-color","yellow")：設置某個CSS的屬性
同時設置多個CSS的屬性：

$('div').css({
    width: "200px",
    height: "200px",
    "background-color": "orange",
});

例如:
test.js中的內容為：

let main = function() {
    let $div = $('div');

    $div.click(function() {  // 單擊
        console.log($div.css('background-color'));  // 獲取div的CSS屬性

        $div.css('background-color', 'orange');  // 將div的background-color屬性變為orange

        $div.css({   // 同時改變div多個CSS的屬性
            width: "200px",
            height: "200px",
            "background-color": "orange",
        });
    });
}

export {
    main
}

test.html中的內容為：

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div></div>

</body>

test.css中的內容為：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

對標籤屬性的操作：

$('div').attr('id')：獲取屬性
$('div').attr('id', 'ID')：設置屬性

例如:
test.js中的內容為：

let main = function() {
    let $div = $('div');

    $div.click(function() {  // 單擊
        console.log($div.attr('wzy'));  // 返回18

        $div.attr('id', 'ID');  // 把div的id屬性改成ID的屬性
    });
}

export {
    main
}

test.html中的內容為：

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div wzy="18"></div>

</body>

test.css中的內容為：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

#ID {
    background-color: orange;
}

對HTML內容、文本的操作：

不需要背每個標籤該用哪種，用到的時候Google或者百度即可。

$A.html()：獲取、修改HTML內容（標籤內容）
$A.text()：獲取、修改文本信息
$A.val()：獲取、修改文本的值

例如:
test.js中的內容為：

let main = function() {
    let $div = $('div');

    $div.click(function() {  // 單擊
        console.log($div.text());  // 獲取div的文本內容，返回 哈哈哈
        //$div.text("hello");  // 修改div的文本內容為hello

        console.log($div.html());  // 獲取標籤內容，返回<span>哈哈哈</span>
    });
}

export {
    main
}

test.html中的內容為：

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div wzy="18"><span>哈哈哈</span></div>

</body>

test.css中的內容為：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

查找：

$(selector).parent(filter)：查找父元素
$(selector).parents(filter)：查找所有祖先元素
$(selector).children(filter)：在所有子元素中查找
$(selector).find(filter)：在所有後代元素中查找

例如:
test.js中的內容為：

let main = function() {
    let $div3 = $('.div-3');

    console.log($div3.parents('.div-1'));
}

export {
    main
}

test.html中的內容為：

<body>
    <script type="module">
        import {main} from "/test/test.js";

        main();
    </script>

    <div class="div-1">
        <div class="div-2">
            <div class="div-3"></div>
        </div>
    </div>
</body>

ajax

用來跟後端通信。Ajax就是在不刷新頁面的情況下，對頁面的某部分進行更新，只從服務器端獲取某些數據，一般是獲取json數據。

所以Ajax最大的優點就是，發送請求的時候不會影響用户的操作，相當於兩條平行線一樣，“你忙你的，我忙我的”，不需要去等待頁面的跳轉而浪費時間。

GET方法：

從服務器獲取內容。

$.ajax({
    url: url,  // 後端的鏈接
    type: "GET", 
    data: {   // 往後端傳的參數
    },
    dataType: "json",
    success: function (resp) {  // 當後端成功返回內容後，從resp裏解析出來內容

    },
});

POST方法：

把內容提交給服務器。

$.ajax({
    url: url,
    type: "POST", 
    data: {
    },
    dataType: "json",
    success: function (resp) {

    },
});

jquery , 前端

kitty又困了 Blog

@kitty-38

Tags

前端 (1157)

jquery (39)

Stories

JavaScript的常用庫 —— jQuery - Stories Detail

jQuery

使用方式：

1. 直接在<head>元素中添加：

2. 按jQuery官網提示下載。

選擇器：

$(selector)，selector類似於CSS選擇器。

事件：

$(selector).on(event, func)綁定事件。

$(selector).off(event, func)刪除事件。

當存在多個相同類型的事件觸發函數時，可以通過click.name來區分。

在事件觸發的函數中的return false等價於同時執行以下兩個操作：

e.stopPropagation()：阻止事件向上傳遞

e.preventDefault()：阻止事件的默認行為

元素的隱藏、展現：

$A.hide()：隱藏，可以添加參數，表示消失時間

$A.show()：展現，可以添加參數，表示出現時間

$A.fadeOut()：慢慢消失，可以添加參數，表示消失時間

$A.fadeIn()：慢慢出現，可以添加參數，表示出現時間

元素的添加、刪除：

$('<div class="mydiv"><span>Hello World</span></div>')：構造一個jQuery對象

$A.append($B)：將$B添加到$A的末尾

$A.prepend($B)：將$B添加到$A的開頭

$A.remove()：刪除元素$A

$A.empty()：清空元素$A的所有兒子

對類的操作：

$A.addClass(class_name)：添加某個類

$A.removeClass(class_name)：刪除某個類

$A.hasClass(class_name)：判斷某個類是否存在

對CSS的操作：

$("div").css("background-color")：獲取某個CSS的屬性

$("div").css("background-color","yellow")：設置某個CSS的屬性

同時設置多個CSS的屬性：

對標籤屬性的操作：

$('div').attr('id')：獲取屬性

$('div').attr('id', 'ID')：設置屬性

對HTML內容、文本的操作：

$A.html()：獲取、修改HTML內容（標籤內容）

$A.text()：獲取、修改文本信息

$A.val()：獲取、修改文本的值

查找：

$(selector).parent(filter)：查找父元素

$(selector).parents(filter)：查找所有祖先元素

$(selector).children(filter)：在所有子元素中查找

$(selector).find(filter)：在所有後代元素中查找

ajax

用來跟後端通信。Ajax就是在不刷新頁面的情況下，對頁面的某部分進行更新，只從服務器端獲取某些數據，一般是獲取json數據。

所以Ajax最大的優點就是，發送請求的時候不會影響用户的操作，相當於兩條平行線一樣，“你忙你的，我忙我的”，不需要去等待頁面的跳轉而浪費時間。

GET方法：

POST方法：

Add a new Comments

1. 直接在`<head>`元素中添加：

`$(selector)`，`selector`類似於CSS選擇器。

`$(selector).on(event, func)`綁定事件。

`$(selector).off(event, func)`刪除事件。

當存在多個相同類型的事件觸發函數時，可以通過`click.name`來區分。

在事件觸發的函數中的`return false`等價於同時執行以下兩個操作：

`e.stopPropagation()`：阻止事件向上傳遞

`e.preventDefault()`：阻止事件的默認行為

`$A.hide()`：隱藏，可以添加參數，表示消失時間

`$A.show()`：展現，可以添加參數，表示出現時間

`$A.fadeOut()`：慢慢消失，可以添加參數，表示消失時間

`$A.fadeIn()`：慢慢出現，可以添加參數，表示出現時間

`$('<div class="mydiv"><span>Hello World</span></div>')`：構造一個jQuery對象

`$A.append($B)`：將$B添加到$A的末尾

`$A.prepend($B)`：將$B添加到$A的開頭

`$A.remove()`：刪除元素$A

`$A.empty()`：清空元素$A的所有兒子

`$A.addClass(class_name)`：添加某個類

`$A.removeClass(class_name)`：刪除某個類

`$A.hasClass(class_name)`：判斷某個類是否存在

`$("div").css("background-color")`：獲取某個CSS的屬性

`$("div").css("background-color","yellow")`：設置某個CSS的屬性

`$('div').attr('id')`：獲取屬性

`$('div').attr('id', 'ID')`：設置屬性

`$A.html()`：獲取、修改HTML內容（標籤內容）

`$A.text()`：獲取、修改文本信息

`$A.val()`：獲取、修改文本的值

`$(selector).parent(filter)`：查找父元素

`$(selector).parents(filter)`：查找所有祖先元素

`$(selector).children(filter)`：在所有子元素中查找

`$(selector).find(filter)`：在所有後代元素中查找