简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery 工厂函数与查询结果的处理方式
Blogger Information
Blog 43
fans 1
comment 0
visits 33800
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
jQuery 工厂函数与查询结果的处理方式
蔚蓝世纪
Original
788 people have browsed it

一、什么是jQuery

jQuery 是一个 JavaScript 的函数库。jQuery 经常用于 DOM 查询, 常用动画, Ajax 等常用操作。

二、配置jQuery环境

我们可以通过以下这种方式加载 CDN jQuery 核心文件。

  1. <head>
  2.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  3. </head>

三、jQuery的基本语法

  1. $(selector).action()//英文版
  2. $(选择器).操作();//中文版
  1. 美元符号定义 jQuery
  2. 选择符（selector）“查询”和“查找” HTML 元素
  3. jQuery 的 action() 执行对元素的操作

四、jQuery 工厂函数

1.什么是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>什么是工厂函数</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       function student(name, sex) {
  11.         var obj = new Object();
  12.         obj.name = name;
  13.         obj.sex = sex;
  14.         obj.saysex = function () {
  15.           alert("我的性别是${this.sex}");
  16.         };
  17.         return obj;
  18.       }
  19.       var no1 = student("王小丁", "男");
  20.       console.log(no1.name);
  21.       //   no1.saysex();
  23.       var no2 = student("李晓静", "女");
  24.       console.log(no2.name);
  25.       //   no2.saysex();
  27.       var no3 = student("周一楠", "男");
  28.       console.log(no3.name);
  29.       //   no3.saysex();
  31.       var no4 = student("汪玉敏", "女");
  32.       console.log(no4.name);
  33.       //   no4.saysex();
  35.       var no5 = student("刘焕文", "男");
  36.       console.log(no5.name);
  37.       //   no5.saysex();
  38.     </script>
  39.   </body>
  40. </html>

2.jQuery工厂函数的功能

通过 jQuery工厂函数，我们可以选取查询 HTML 元素，并对它们执行“操作”（actions）。

  1. 1.$(选择器，上下文):返回jQuery对象
  2. 2.$(js对象):返回一个jQuery对象,将js对象包装成jQuery对象
  3. 3.$(html文本):将html文本包装成一个jQuery对象并返回
  4. 4.$(callback):当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.  <!-- CDN 方式加载jquery -->
  7.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  8.   <title>jquery工厂函数的功能</title>
  9.   </head>
  10.   <body>
  11.     <ul id="first">
  12.       <li>item1</li>
  13.       <li>item2</li>
  14.       <li>item3</li>
  15.     </ul>
  16.     <ul id="second">
  17.       <li>item1</li>
  18.       <li>item2</li>
  19.       <li>item3</li>
  20.     </ul>
  21.     <h1 id="01">获取父级HTML元素</h1>
  22.     <h2 id="02">我们一起去郊游吧！</h2>
  23.     <h3 id="03">你们开心吗？</h3>
  24.     <h4 id="04">他们在干什么呢？</h4>
  25.     <p  id="demo"></p>
  26.   </body>
  27.   <script>
  28. //$():工厂函数是自动循环的
  29. //$():工厂函数的功能
  30. // 1.$(选择器，上下文):返回jQuery对象
  31.     //javascrip原生操作
  32.     document.querySelectorAll("li").forEach(function (item) {
  33.       item.style.color = "red";
  34.     });
  36.     //jQuery操作
  37.     $("li").css("color", "green");
  39.     // $("li", "#first").css("color", "blue");不要用
  40.     $("#first li").css("color", "skyblue");
  42. // 2.$(js对象),返回一个jQuery对象,将js对象包装成jQuery对象
  43.     var lis = document.querySelectorAll("#second li");
  44.     lis.forEach(function (item) {
  45.       item.style.backgroundColor = "yellow";
  46.     });
  47.     //lis === jQuery对象
  48.     $(lis).css("background-color", "cyan");
  50. // 3.$(html文本),将html文本包装成一个jQuery对象并返回
  51. //html文本：hello不是html文本，<p>hello</p>带标签的才是html文本
  52.     $("<h3>Laravel开发者</h3>").insertAfter("#second");
  54. // 4.$(callback):当html文档结构加载完成后就会立即执行这个回调
  55.     $(function () {
  56. //$(document.body).css( "font-size", "18px").css("background-color", "wheat");链式写法
  57.       //可以简写为下面这种方式
  58.       $(document.body).css({
  59.         "font-size": "18px",
  60.         "background-color": "wheat",
  61.       });
  62.     });
  63.     $(document).ready(function () {
  64.       var myParent = $("#02").parent();
  65.       $("#demo").text(myParent.prop("nodeName"));
  66.     });
  68.     $("<h3>Laravel开发</h3>").insertBefore("#01");
  69.   </script>
  70. </html>

输出效果：

五、jQuery查询结果的处理方式

查询就是筛选的意思，根据某个字或词语，在数据库中进行有条件的查询，然后将查询到的结果集返回给客户端，这样在客户端上就可以将查询到的结果以各种方式呈现出来。

  1. toArray():将查询结果转为真正的数组.
  2. $.each():回调的参数顺序与forEach不一样.
  3. $.map():必须要有返回值,回调参数的参数和$.each()的回调参数的参数完全相反.
  4. index():返回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.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  7.     <title>jQuery查询结果的处理方式</title>
  8.   </head>
  9.   <body>
  10.     <ul>
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <li>itme3</li>
  14.       <li>item4</li>
  15.       <li>item5</li>
  16.     </ul>
  17.     <script>
  18.       // 1.toArray():将查询结果转为真正的数组
  19.       var lis = $("ul > li");
  20.       console.log(lis);
  21.       console.log(lis.get(3));
  23.       for (var i = 0; i < lis.length; i++) {
  24.         //原生方式
  25.         lis.get(i).style.color = "red";
  26.       }
  28.       lis.toArray().forEach(function (item, index) {
  29.         if (index >= 2) console.log("元素" + index + ":" + item);
  30.       });
  32.       // 2. $.each(): 回调的参数顺序与forEach不一样,$().each((callback))
  33.       lis.each(function (index, value) {
  34.         //原生方式
  35.         this.style.color = "green";
  36.         //jQuery方式
  37.         $(this).css("color", "blue");
  38.       });
  40.       // 3.$.map():必须要有返回值,回调参数的参数和$.each()的回调参数的参数完全相反
  41.       var arr = $.map(lis, function (value, index) {
  42.         if (index % 2) return value;
  43.       });
  44.       console.log(arr);
  45.       console.log($(arr));
  47.       $(arr).css("color", "red");
  49.       // 4.index():返回jQuery查询集合中的索引
  50.       // jQuery对象是一个类数组，具有从0开始递增的正整数索引，并有一个length属性
  51.       console.log(lis);
  52.       lis.click(function () {
  53.         console.log("点击了第：", $(this).index() + 1, "个<li>");
  54.       });
  55.     </script>
  56.   </body>
  57. </html>

输出效果：

总结：

1.jQuery可以极大地简化 JavaScript 编程。
2.jQuery可以更快速获取文档元素。
3.jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页。
4.jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像。
5.jQuery简化了原本使用JavaScript代码需要处理的方式。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：jquery的对象快速迭代处理效率非常高
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！