JavaScript的常用库 —— jQuery

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

    },
});

__EOF__

  • 本文作者: kitty
  • 本文链接: https://www.cnblogs.com/kitty-38/p/18684429
  • 关于博主: 评论和私信会在第一时间回复。或者直接私信我。
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
  • 声援博主: 如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。
  • posted @   kitty又困了  阅读(23)  评论(0编辑  收藏  举报
    相关博文:
    阅读排行:
    · 本地部署 DeepSeek:小白也能轻松搞定!
    · 传国玉玺易主,ai.com竟然跳转到国产AI
    · 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
    · 我们是如何解决abp身上的几个痛点
    · 如何基于DeepSeek开展AI项目
    点击右上角即可分享
    微信分享提示