简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JS基础-jQuery的引入/$()的四大功能/jQuery对象的处理
Blogger Information
Blog 57
fans 3
comment 0
visits 60335
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS基础-jQuery的引入/$()的四大功能/jQuery对象的处理
岂几岂几
Original
1883 people have browsed it

jQuery的使用

1. jQuery的引入方式

1.1 CDN静态资源库引用

  1. <!-- CDN方式引用 -->
  2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

1.2 本地引用

  • 把jQuery下载到本地, 同样以引入外部js文件的方式引入.
  1. <script scr="jquery-3.5.1.min.js"></script>

2. jQury的工厂函数$()

  • $(selector)的返回值为一个jQuery对象.
  • 使用语法: $(selector).operator() , 即: $(选择器).操作函数() .
  • jQuery是自动循环, 所以jQuery很少循环.

  • 类似给 console.log 函数起别名 cl , $ 是 jquery 函数的一个别名.

  • 工厂函数$()的四大功能

      1. 选择器功能
      • 工厂函数$()的选择器功能, 能很好的体现jQuery的特点: 写得少, 做得多.
  1. - `$(选择器)` 的返回值是**jQuery对象**.
    1. 根据HTML元素创建jQuery对象
    • $(HTML元素对象) : 把HTML元素对象封装成jQuery对象, 然后就能调用jQuery对象提供的方便的方法进行操作.
    1. 根据带有HTML标签的文本创建jQuery对象.
    • $(htmlStr) : 把带有HTML标签的文本解析成html元素对象, 再将其封装成jQuery对象.
    1. $(回调函数) : 当HTML文档结构加载完成后, 会自动加载这个回调函数.
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>jQuery工厂函数$()的四大功能</title>
  8.     <!-- 引入本地jQuery文件 -->
  9.     <script src="jquery-3.5.1.min.js"></script>
  10. </head>
  12. <body>
  13.     <ul id="first">
  14.         <li>item1</li>
  15.         <li>item2</li>
  16.         <li>item3</li>
  17.     </ul>
  18.     <ul id="second">
  19.         <li>item1</li>
  20.         <li>item2</li>
  21.         <li>item3</li>
  22.     </ul>
  23. </body>
  24. <script>
  25.     // jQuery工厂函数的四大功能
  26.     // 1. 选择器功能
  27.     /* 把第一个列表的字体颜色变成橙色 */
  28.     /* 使用JS原生操作 */
  29.     document.querySelectorAll('#first > li').forEach(function(ele) {
  30.         ele.style.color = 'orange';
  31.     });
  32.     /* 使用jQuery实现 */
  33.     $('#first > li').css('color', 'orange');
  35.     // 2. 创建jQuery对象
  36.     /* 把第二个列表的第二个列表项的背景色设置为黄色 */
  37.     /* 用js原生操作获取第二个列表的第二个li元素 */
  38.     var li2 = document.querySelector('#second > li:nth-of-type(2)');
  39.     /* 把li元素封装成jQuery对象, 再调用css()方法设置背景色 */
  40.     $(li2).css('background-color', 'yellow');
  42.     // 3. 把带有HTML标签的文本解析成html元素对象, 再将其封装成jQuery对象.
  43.     /* 把htmlStr字符串解析成HTML元素对象, 并在浏览器中显示 */
  44.     var htmlStr = '<span>hello jQuery!</span>';
  45.     $(htmlStr).css('color', 'red').appendTo($('body'));
  47.     // 4. $(回调函数): 当HTML文档结构加载完成后, 会自动加载这个回调函数.
  48.     /* 弹出"页面加载完毕"的提示框 */
  49.     $(function() {
  50.         alert('页面加载完毕');
  51.     });
  52. </script>
  54. </html>

3. jQuery对象

  • jQuery对象可以封装1个或多个js对象, 包括但不限于HTML元素对象.

  • 可以使用类似访问数组元素的方式访问jQuery对象封装的元素. 如: $('div')[0] .

  • 也可以调用jQuery对象的get()方法来获取其封装的元素: $('div').get(1) .

  • 有 length 属性, 值是jQuery对象封装的元素个数.

  • jQuery对象提供了很多方便操作HTML元素的各种属性的方法.

  • jQuery对象没有 forEach() 方法, 但提供了 $.each() 静态方法遍历其中的元素.

    • $.each() 方法的使用方法:
  1.   $.each(jQuery对象, function(当前元素索引, 当前元素) {
  2.       // do something...
  3.   });
  • $.each() 也可以当做非静态方法调用:
  1.   jQuery对象.each(function(当前元素索引, 当前元素) {
  2.       // do something...
  3.   });
  • 调用jQuery对象的 toArray() 方法, 可以将其封装的所有元素转换成真正的js对象数组, 然后就能使用 forEach() 方法遍历其元素了.
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>jQuery对象</title>
  8.     <!-- CDN方式引用, 即内容分发方式 -->
  9.     <!-- BootCDN或者又拍云的CDN的速度都可以 -->
  10.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  11.     <!-- 本地引用 -->
  12. </head>
  14. <body>
  15.     <ul id="first">
  16.         <li>item1</li>
  17.         <li>item2</li>
  18.         <li>item3</li>
  19.     </ul>
  20.     <ul id="second">
  21.         <li>item1</li>
  22.         <li>item2</li>
  23.         <li>item3</li>
  24.     </ul>
  25. </body>
  26. <script>
  27.     // console.log函数起别名
  28.     var cl = console.log.bind(console);
  29.     // 封装所有元素的jQuery对象
  30.     var $all = $('*');
  31.     cl($all);
  33.     // length属性返回封装的元素个数
  34.     cl($all.length);
  36.     // 获取封装的元素
  37.     /* 方法1: 类似数组的array[index]方式 */
  38.     cl($all[0]);
  39.     /* 方法2: 调用get(index)方法 */
  40.     cl($all.get(1));
  42.     // 调用toArray()方法转成js数组
  43.     cl($all.toArray());
  45.     // 遍历封装的元素
  46.     /* 方法1: $.each()静态方法: */
  47.     $.each($all, function(index, ele) {
  48.         cl('第' + (index + 1) + '个元素是: ' + ele.nodeName);
  49.     })
  50.     /* 方法2: 动态调用$.each()方法: */
  51.     $all.each(function(index, ele) {
  52.         cl('第' + (index + 1) + '个元素是: ' + ele.nodeName);
  53.     });
  55.     /* 方法3: 用toArray()方法转成js数组, 然后用forEach遍历 */
  56.     $all.toArray().forEach(function(ele, index) {
  57.         cl('第' + (index + 1) + '个元素是: ' + ele.nodeName);
  58.     });
  59. </script>
  61. </html>

3. jQuery查询结果的处理

    1. 使用 toArray() 方法转成js数组来处理查询结果中的对象.
    1. 使用 $.each() / $(selector).each() 来处理查询结果中的对象.
    1. 使用 $.map(jQuery查询结果, function(当前元素, 当前元素索引) {...}) 来遍历jQuery查询结果, 并使用传入的回调函数处理遍历的每个对象, 将回调函数处理后返回的对象组成数组.
    1. 为jQuery查询结果绑定事件处理脚本.
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>jq查询结果的处理</title>
  8.     <!-- CDN方式引用, 即内容分发方式 -->
  9.     <!-- BootCDN或者又拍云的CDN的速度都可以 -->
  10.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  11.     <!-- 本地引用 -->
  12. </head>
  14. <body>
  15.     <ul id="first">
  16.         <li>item1</li>
  17.         <li>item2</li>
  18.         <li>item3</li>
  19.         <li>item4</li>
  20.         <li>item5</li>
  21.     </ul>
  22.     <script>
  23.         var cl = console.log.bind(console);
  24.         // 1. 使用 `toArray()` 方法转成js数组来处理查询结果中的对象.
  25.         /* 见上一节实例, 略 */
  27.         // 2. 使用 `$.each()` / `$(selector).each()` 来处理查询结果中的对象.
  28.         /* 见上一节实例, 略 */
  30.         // 3. 使用$.map()遍历并处理jQuery查询结果
  31.         var $lis = $('li');
  32.         /* 返回偶数索引的元素 */
  33.         var array = $.map(lis, function(ele, index) {
  34.             if (index % 2 == 0) {
  35.                 return ele;
  36.             }
  37.         });
  38.         /* 背景色改成橙色 */
  39.         $(array).css('background-color', 'orange');
  41.         // 4. 为jQuery查询结果绑定事件处理脚本.
  42.         lis.click(function(event) {
  43.             // index()使用方式1:
  44.             // cl('点击了第' + (lis.index(event.target) + 1) + "个元素");
  45.             // index()使用方式2:
  46.             cl('点击了第' + (event.target.index() + 1) + "个元素");
  47.         });
  48.     </script>
  49. </body>
  51. </html>

学习心得

  • jQuery是JS的一个类库, 是为了简化JS操作出现的. jQuery能做的, JS都能做.

  • jQuery的特点: 写得少, 做得多.

  • jQuery的方法基本都是自动循环的, 所以jQuery很少循环.

  • 一个奇怪的情况, 如果以CDN的方式引入jQuery, cl($('*')) 显示的是 jQuery.fn.init[...] , 即, $(selector)的返回结果是jQuery对象; 而如果引入本地的jQuery文件, 上述表达式显示的结果是 S.fn.init[...] . 这两者有什么区别?

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：注意, 10日前完成, 三阶段可正常提交
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！