简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >PHP大牛成长之路：jQuery基本知识及属性操作

PHP大牛成长之路：jQuery基本知识及属性操作

周Sir-BLOG
周Sir-BLOG原创
2020年08月21日 23:52:54664浏览

1、 $()四种应用场景

引入 jQuery 库后，$() 就是jQuery的工厂函数, $()等于jQuery()

名称 备注
$(选择器，上下文) 主要用于HTML元素及属性的选择
$(JS原生对象) 将js对象包装成一个jquery对象,从而可以直接调用jQuery中的方法
$(html文档) 创建HTML语句（插入页面中）
$(callback) 当html文档加载完成之后立即调用这个函数（直接执行，避免污染全局）

以下示例必须先引用jQuery，DOM结构如下：

  1.     <div class="box1">
  2.       <ul>
  3.         <li class="item">item1</li>
  4.         <li class="item">item2</li>
  5.         <li class="item">item3</li>
  6.         <li class="item">item4</li>
  7.         <li class="item">item5</li>
  8.       </ul>
  9.     </div>
  11.     <div class="box2">
  12.       <ul>
  13.         <li class="item">item1</li>
  14.         <li class="item">item2</li>
  15.         <li class="item">item3</li>
  16.         <li class="item">item4</li>
  17.         <li class="item">item5</li>
  18.       </ul>
  19.     </div>

1.1 $(选择器，上下文) 示例1

主要用于HTML元素及属性的选择

  1.       // 获取全部LI列表
  2.       var all_lis = $("li");
  3.       console.log(all_lis);
  4.       //每个LI点击后背景变为红色
  5.       all_lis.click(function(){$(this).css("background","red");});

示例2

  1.       // 获取全部box1的LI列表(点击弹窗显示内容)
  2.       var box1_lis = $("li", ".box1");
  3.       console.log(box1_lis);
  4.       box1_lis.click(function(){alert("你点击的是(.box1)：" + $(this).text())});
  6.       // 获取全部box2的LI列表(点击弹窗显示内容)
  7.       var box2_lis = $("li", ".box2");
  8.       console.log(box2_lis);
  9.       box2_lis.click(function(){alert("你点击的是(.box2)：" + $(this).text())});

1.2 $(JS原生对象) 示例

将js对象包装成一个jquery对象,从而可以直接调用jQuery中的方法

  1.       // 1、原生获取全部box1的LI列表      
  2.       var lis = document.querySelectorAll('li');
  3.       console.log(lis);
  5.       // 2、将lis包装成jQuery对象并使用jQuery对象的css()方法
  6.       // 将所有LI字体改为红色
  7.       $(lis).css("color","red");

1.3 $(html文档) 示例

创建HTML语句（插入页面中）

  1.       // 将以下HTML语句插入到body中      
  2.       $("<h3>Hello World</h3>").insertBefore("body");

1.4 $(callback) 示例

当html文档加载完成之后立即调用这个函数（直接执行，可避免污染全局）

  1.       $(function () {
  2.         $(".box1 ul > li").css({
  3.           color: "red",
  4.           "font-size": "28px",
  5.         });
  6.       });

2、 $ 与 $() 的区别示例

  • $ 等同于jQuery的别称
  • $() jQuery对象 类似function jQuery(){...}

2.1 $等于 jQuery

  1.     // 1、$ = jQuery 
  3.     ($ === jQuery) ? jQuery("body").after("<li>> $ 等于 jQuery</li>") : jQuery("body").after("<li>$ 不等于 jQuery</li>");

输出结果： $ 等于 jQuery

2.2 为 $改个别名

  1.     var myJS = jQuery.noConflict();
  3.     myJS("body").after("<li>我也是jQuery的别名:myJS</li>")

输出结果： 我也是jQuery的别名:myJS

2.3 $()jQuery对象示例

  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>Document</title>
  7.     <script src="jquery-3.5.1.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="box">
  11.       <ul>
  12.         <li class="item">item1</li>
  13.         <li class="item">item2</li>
  14.         <li class="item">item3</li>
  15.         <li class="item">item4</li>
  16.         <li class="item">item5</li>
  17.       </ul>
  18.     </div>
  20.     <script>
  21.       // 原生获取所有li
  22.       var JS_lis = document.querySelectorAll("li");
  23.       console.log(JS_lis); //(JS数组对象)
  25.       // jQuery获取所有li
  26.       var JQ_lis = $("li");
  27.       console.log(JQ_lis); //(jQuery对象)
  29.       // 给原生js套上jQuery马甲(就可以直接使用$.post()，$.get()，$.ajax()等jquery对象方法)
  30.       var jsTojq = $(JS_lis);
  31.       console.log(jsTojq); //(jQuery对象)
  33.       //鼠标移入字体红色
  34.       jsTojq.mousemove(function () {
  35.         $(this).css("color", "red");
  36.       });
  38.       //鼠标移出字体黑色
  39.       jsTojq.mouseout(function () {
  40.         $(this).css("color", "black");
  41.       });
  42.     </script>
  43.   </body>
  44. </html>

3、attr()的常用操作 （ attr(): 获取元素的属性）

  • 3.1 attr(name): 获取属性的值
  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>attr的常用操作</title>
  7.     <script src="jquery-3.5.1.js"></script>
  8.   </head>
  9.   <body>
  10.     <button id="my_btn">我是按钮</button>
  11.     <input type="text" name="username" id="name" value="我是文本框" />
  12.     <img src="https://www.php.cn/static/images/index_php_item3.jpg" alt="PHP中文网" />
  13.   </body>
  15.   <script>
  16.     // attr(name): 获取属性的值
  17.     console.log($("button").attr("id")); //输出：my_btn
  18.     console.log($("input").attr("type")); //输出：text
  19.     console.log($("input").attr("name")); //输出：username
  20.     console.log($("input").attr("value")); //输出：我是文本框
  21.     console.log($("img").attr("src")); //输出：https://www.php.cn/static/images/index_php_item3.jpg
  22.     console.log($("img").attr("alt")); //输出：PHP中文网
  23.   </script>
  24. </html>

  • 3.2 attr(name,value): 设置属性的值
  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>attr的常用操作</title>
  7.     <script src="jquery-3.5.1.js"></script>
  8.   </head>
  9.   <body>
  10.     <input type="text" name="username" id="name" value="我是文本框" />
  11.     <img src="https://www.php.cn/static/images/index_php_item3.jpg" alt="PHP中文网" width="236"/>
  12.   </body>
  14.   <script>
  15.     // attr(name,value): 设置属性的值
  16.     // 鼠标移出改变value
  17.     $("input").mouseout(function(){
  18.         $(this).attr("value","你不写点什么吗？");
  19.     });
  21.     // 鼠标移入图片变大
  22.     $("img").mousemove(function(){
  23.         $(this).attr("width","400");
  24.     });
  26.     // attr()第二个参数支持回调(随机图片地址)
  27.     $("img").click(function(){
  28.         $(this).attr("src",function(){
  29.             var imgs = [
  30.             "https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg",
  31.             "https://img.php.cn/upload/course/000/000/001/5f3de03eaf461163.png",
  32.             "https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg",
  33.             "https://img.php.cn/upload/course/000/000/001/5f155b2f296de744.png"
  34.             ]
  35.             return imgs[Math.floor(Math.random()*3)];      
  36.         });
  37.     });
  38.   </script>
  39. </html>

总结

  • 对jQuery的选择器和基本使用方法有了一定了解；
  • attr(name): 获取属性的值
  • attr(name,value): 设置属性的值
上一条：原生JS实现购物车自动结算功能下一条：第五章offset_client_scroll家族
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多