个人中心
Erlo

JavaScript的常用库 —— jQuery

2025-01-21 21:29:40 发布   195 浏览  
页面报错/反馈
已收藏 点赞

jQuery

用来更加方便地去控制前端的HTML标签和CSS属性。

使用方式：

1. 直接在元素中添加：

2. 按jQuery官网提示下载。


选择器：

$(selector)，selector类似于CSS选择器。

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

 
例如：
test.js中的内容为：

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

export {
    main
}

test.html中的内容为：




    
    
    test
    
      // jQuery

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中的内容为：

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中的内容为：

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) {   // 给
绑定点击事件
        console.log("这是click div 1");
    });

    $('a').on("click", function(e) {  // 给绑定点击事件
        console.log("click a");

        e.stopPropagation();  // 阻止向上传递，a事件触发div事件不触发
        e.preventDefault();  // 阻止当前点击事件的操作，a事件不触发div事件触发

        //return false;  // 等同于e.stopPropagation(); e.preventDefault();  a事件不触发div事件也不触发

    })
}

export {
    main
}


test.html中的内容为：



    

    





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中的内容为：



    

    


    
    





test.css中的内容为：


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







元素的添加、删除：




    

  • 

    $('
    Hello World
    ')    ：构造一个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 = $(
        `
            百度
            !!!
        `);

    $div.click(function() {  // 单击
        $div.append($a);  // 将$a添加到$div
    });

    $div.dblclick(function() {  // 双击
        $a.remove();  // 删除元素$a
        // $dic.empty()：清空元素$div里的所有儿子
    });
}

export {
    main
}



test.html中的内容为：



    

    






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中的内容为：



    

    






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中的内容为：



    

    






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中的内容为：



    

    






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());  // 获取标签内容，返回哈哈哈
    });
}

export {
    main
}



test.html中的内容为：



    

    
哈哈哈






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中的内容为：



    

    

        

            

        

    









ajax




用来跟后端通信。在不刷新页面的情况下，只从服务器端获取某些数据，一般是获取json数据。


    

  • 

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

    },
});
登录查看全部

参与评论

昵称 登录
发布评论

评论留言

还没有评论留言，赶紧来抢楼吧~~

@2025 by 唯宠科技 蜀ICP备18000267号
浏览 2966.44 万次 点击这里给我发消息

手机查看

 返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认