登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›JavaScript的常用库 —— jQuery

JavaScript的常用库 —— jQuery

梁宁 2025-6-6 10:09:33
jQuery

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

1. 直接在元素中添加：


2. 按jQuery官网提示下载。

https://jquery.com/download/

选择器：

$(selector)，selector类似于CSS选择器。
  1. $('div');
  2. $('.big-div');
  3. $('div > p')
复制代码
 
例如：
test.js中的内容为：
  1. let main = function() {
  2.     let $div = $('.mydiv');
  3.     console.log($div);
  4. }
  6. export {
  7.     main
  8. }
复制代码
test.html中的内容为：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>test</title>
  7.     <link rel="stylesheet" href="/test/test.css">
  8.       // jQuery
  9. </head>
  11. <body>
  12.    
  14.    
  16. </body>
  17. </html>
复制代码
test.css中的内容为：
  1. div {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: pink;
  5. }
复制代码
事件：

$(selector).on(event, func)绑定事件。
  1. $('div').on('click', function (e) {
  2.     console.log("click div");
  3. })
复制代码
简写：
  1. $div.click(function() {
  2. <body>
  3.    
  5.    
  7. </body>console.log("click div");
  8.     })
复制代码
$(selector).off(event, func)删除事件。
  1. $('div').on('click', function (e) {
  2.     console.log("click div");
  4.     $('div').off('click');   // 删除单击事件
  5. });
复制代码
 
例如:
test.js中的内容为：
  1. let main = function() {
  2.     let $div = $('div');
  3.    
  4.     $div.on("click", function() {   // 绑定事件
  5. <body>
  6.    
  8.    
  10. </body>console.log("这是click div");
  12. <body>
  13.    
  15.    
  17. </body>//$div.off("click");  // 删除（解绑）事件
  19.     })
  20. }
  22. export {
  23.     main
  24. }
复制代码
test.html中的内容为：
  1. <body>
  2.    
  4.    
  6. </body>
复制代码
test.css中的内容为：
  1. div {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: pink;
  5. }
复制代码
 
当存在多个相同类型的事件触发函数时，可以通过click.name来区分。
  1. $('div').on('click.first', function (e) {
  2.     console.log("click div");
  4.     $('div').off('click.first');
  5. });
复制代码
 
例如:
test.js中的内容为：
  1. let main = function() {    let $div = $('div');<body>
  2.    
  4.    
  6. </body>$div.on("click.name1", function() {   // 绑定事件<body>
  7.    
  9.    
  11. </body>console.log("这是click div 1");<body>
  12.    
  14.    
  16. </body>$div.off("click.name2");  // 解绑click.name2事件    })    $div.on("click.name2", function() {   // 绑定事件<body>
  17.    
  19.    
  21. </body>console.log("这是click div 2");    })}export {    main}
复制代码
test.html中的内容为：
  1. <body>
  2.    
  4.    
  6. </body>
复制代码
test.css中的内容为：
  1. div {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: pink;
  5. }
复制代码
 
在事件触发的函数中的return false等价于同时执行以下两个操作：


  • e.stopPropagation()：阻止事件向上传递
  • e.preventDefault()：阻止事件的默认行为
 
例如:
test.js中的内容为：
  1. let main = function() {    let $div = $('div');<body>
  2.    
  4.    
  6. </body>$div.on("click", function(e) {   // 给绑定点击事件<body>
  7.    
  9.    
  11. </body>console.log("这是click div 1");    });    $('a').on("click", function(e) {  // 给绑定点击事件<body>
  12.    
  14.    
  16. </body>console.log("click a");<body>
  17.    
  19.    
  21. </body>e.stopPropagation();  // 阻止向上传递，a事件触发div事件不触发<body>
  22.    
  24.    
  26. </body>e.preventDefault();  // 阻止当前点击事件的操作，a事件不触发div事件触发<body>
  27.    
  29.    
  31. </body>//return false;  // 等同于e.stopPropagation(); e.preventDefault();  a事件不触发div事件也不触发    })}export {    main}
复制代码
test.html中的内容为：
  1. <body>
  2.    
  4.    
  6. </body><body>
  7.    
  9.    
  11. </body>百度   
复制代码
test.css中的内容为：
  1. div {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: pink;
  5. }
复制代码
元素的隐藏、展现：



  • $A.hide()：隐藏，可以添加参数，表示消失时间
  • $A.show()：展现，可以添加参数，表示出现时间
  • $A.fadeOut()：慢慢消失，可以添加参数，表示消失时间
  • $A.fadeIn()：慢慢出现，可以添加参数，表示出现时间
 
例如:
test.js中的内容为：
  1. let main = function() {    let $div = $('div');    let $btn_hide = $('#hide-btn');    let $btn_show = $('#show-btn');    $btn_hide.click(function() {<body>
  2.    
  4.    
  6. </body>$div.hide(3000);  // 花费3000毫秒(= 3秒)隐藏<body>
  7.    
  9.    
  11. </body>//$div.fadeOut(3000);  // 淡出    });    $btn_show.click(function() {<body>
  12.    
  14.    
  16. </body>$div.show(1000);  // 花费1秒展现<body>
  17.    
  19.    
  21. </body>//$div.fadeIn(1000);  // 淡入    });}export {    main}
复制代码
test.html中的内容为：
  1. <body>
  2.    
  4.    
  6. </body>    隐藏    展现
复制代码
test.css中的内容为：
  1. div {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: pink;
  5. }
复制代码
元素的添加、删除：



  • $('Hello World')：构造一个jQuery对象
  • $A.append($B)：将$B添加到$A的末尾
  • $A.prepend($B)：将$B添加到$A的开头
  • $A.remove()：删除元素$A
  • $A.empty()：清空元素$A的所有儿子
 
例如:
test.js中的内容为：
  1. let main = function() {    let $div = $('div');    let $a = $(<body>
  2.    
  4.    
  6. </body>`<body>
  7.    
  9.    
  11. </body>    百度<body>
  12.    
  14.    
  16. </body>    !!!<body>
  17.    
  19.    
  21. </body>`);    $div.click(function() {  // 单击<body>
  22.    
  24.    
  26. </body>$div.append($a);  // 将$a添加到$div    });    $div.dblclick(function() {  // 双击<body>
  27.    
  29.    
  31. </body>$a.remove();  // 删除元素$a<body>
  32.    
  34.    
  36. </body>// $dic.empty()：清空元素$div里的所有儿子    });}export {    main}
复制代码
test.html中的内容为：
  1. <body>
  2.    
  4.    
  6. </body>
复制代码
test.css中的内容为：
  1. div {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: pink;
  5. }
复制代码
对类的操作：



  • $A.addClass(class_name)：添加某个类
  • $A.removeClass(class_name)：删除某个类
  • $A.hasClass(class_name)：判断某个类是否存在
 
例如:
test.js中的内容为：
  1. let main = function() {    let $div = $('div');    $div.click(function() {  // 单击<body>
  2.    
  4.    
  6. </body>$div.addClass('my-div');  // 添加my-div类    });    $div.dblclick(function() {  // 双击<body>
  7.    
  9.    
  11. </body>$div.removeClass('my-div');  // 删除my-div类    });}export {    main}
复制代码
test.html中的内容为：
  1. <body>
  2.    
  4.    
  6. </body>
复制代码
test.css中的内容为：
  1. div {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: pink;
  5. }.my-div {    background-color: orange;}
复制代码
对CSS的操作：



  • $("div").css("background-color")：获取某个CSS的属性
  • $("div").css("background-color","yellow")：设置某个CSS的属性
  • 同时设置多个CSS的属性：
  1. $('div').css({
  2.     width: "200px",
  3.     height: "200px",
  4.     "background-color": "orange",
  5. });
复制代码
 
例如:
test.js中的内容为：
  1. let main = function() {    let $div = $('div');    $div.click(function() {  // 单击<body>
  2.    
  4.    
  6. </body>console.log($div.css('background-color'));  // 获取div的CSS属性<body>
  7.    
  9.    
  11. </body>$div.css('background-color', 'orange');  // 将div的background-color属性变为orange<body>
  12.    
  14.    
  16. </body>$div.css({   // 同时改变div多个CSS的属性<body>
  17.    
  19.    
  21. </body>    width: "200px",<body>
  22.    
  24.    
  26. </body>    height: "200px",<body>
  27.    
  29.    
  31. </body>    "background-color": "orange",<body>
  32.    
  34.    
  36. </body>});    });}export {    main}
复制代码
test.html中的内容为：
  1. <body>
  2.    
  4.    
  6. </body>
复制代码
test.css中的内容为：
  1. div {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: pink;
  5. }
复制代码
对标签属性的操作：



  • $('div').attr('id')：获取属性
  • $('div').attr('id', 'ID')：设置属性
 
例如:
test.js中的内容为：
  1. let main = function() {    let $div = $('div');    $div.click(function() {  // 单击<body>
  2.    
  4.    
  6. </body>console.log($div.attr('wzy'));  // 返回18<body>
  7.    
  9.    
  11. </body>$div.attr('id', 'ID');  // 把div的id属性改成ID的属性    });}export {    main}
复制代码
test.html中的内容为：
  1. <body>
  2.    
  4.    
  6. </body>
复制代码
test.css中的内容为：
  1. div {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: pink;
  5. }#ID {    background-color: orange;}
复制代码
对HTML内容、文本的操作：

不需要背每个标签该用哪种，用到的时候Google或者百度即可。

  • $A.html()：获取、修改HTML内容（标签内容）
  • $A.text()：获取、修改文本信息
  • $A.val()：获取、修改文本的值
 
例如:
test.js中的内容为：
  1. let main = function() {    let $div = $('div');    $div.click(function() {  // 单击<body>
  2.    
  4.    
  6. </body>console.log($div.text());  // 获取div的文本内容，返回 哈哈哈<body>
  7.    
  9.    
  11. </body>//$div.text("hello");  // 修改div的文本内容为hello<body>
  12.    
  14.    
  16. </body>console.log($div.html());  // 获取标签内容，返回哈哈哈    });}export {    main}
复制代码
test.html中的内容为：
  1. <body>
  2.    
  4.    
  6. </body>哈哈哈
复制代码
test.css中的内容为：
  1. div {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: pink;
  5. }
复制代码
查找：



  • $(selector).parent(filter)：查找父元素
  • $(selector).parents(filter)：查找所有祖先元素
  • $(selector).children(filter)：在所有子元素中查找
  • $(selector).find(filter)：在所有后代元素中查找
 
例如:
test.js中的内容为：
  1. let main = function() {
  2.     let $div3 = $('.div-3');
  4.     console.log($div3.parents('.div-1'));
  5. }
  7. export {
  8.     main
  9. }
复制代码
test.html中的内容为：
  1. <body>
  2.    
  4.    
  6. </body><body>
  7.    
  9.    
  11. </body><body>
  12.    
  14.    
  16. </body><body>
  17.    
  19.    
  21. </body><body>
  22.    
  24.    
  26. </body>
复制代码
ajax

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

所以Ajax最大的优点就是，发送请求的时候不会影响用户的操作，相当于两条平行线一样，“你忙你的，我忙我的”，不需要去等待页面的跳转而浪费时间。



  • GET方法：
从服务器获取内容。
  1. $.ajax({
  2.     url: url,  // 后端的链接
  3.     type: "GET",
  4.     data: {   // 往后端传的参数
  5.     },
  6.     dataType: "json",
  7.     success: function (resp) {  // 当后端成功返回内容后，从resp里解析出来内容
  9.     },
  10. });
复制代码

  • POST方法：
把内容提交给服务器。
  1. $.ajax({
  2.     url: url,
  3.     type: "POST",
  4.     data: {
  5.     },
  6.     dataType: "json",
  7.     success: function (resp) {
  9.     },
  10. });
复制代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
梁宁
2025-6-6 10:09:33

0

粉丝关注

20

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫