jQuery 工厂函数与查询结果的处理方式

一、什么是jQuery

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

二、配置jQuery环境

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

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

三、jQuery的基本语法

$(selector).action()//英文版
$(选择器).操作();//中文版

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

四、jQuery 工厂函数

1.什么是jQuery 工厂函数

所谓工厂函数，顾名思义，就好比一个工厂一样，可以批量制造某种类型的东西，通过该方法可大批量的创建对象。
例如,我们可以用工厂函数来批量创建学生信息：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>什么是工厂函数</title>
  </head>
  <body>
    <script>
      function student(name, sex) {
        var obj = new Object();
        obj.name = name;
        obj.sex = sex;
        obj.saysex = function () {
          alert("我的性别是${this.sex}");
        };
        return obj;
      }
      var no1 = student("王小丁", "男");
      console.log(no1.name);
      //   no1.saysex();
      var no2 = student("李晓静", "女");
      console.log(no2.name);
      //   no2.saysex();
      var no3 = student("周一楠", "男");
      console.log(no3.name);
      //   no3.saysex();
      var no4 = student("汪玉敏", "女");
      console.log(no4.name);
      //   no4.saysex();
      var no5 = student("刘焕文", "男");
      console.log(no5.name);
      //   no5.saysex();
    </script>
  </body>
</html>

2.jQuery工厂函数的功能

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

1.$(选择器，上下文):返回jQuery对象
2.$(js对象):返回一个jQuery对象,将js对象包装成jQuery对象
3.$(html文本):将html文本包装成一个jQuery对象并返回
4.$(callback):当html文档结构加载完成后就会立即执行这个回调函数

代码演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <!-- CDN 方式加载jquery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <title>jquery工厂函数的功能</title>
  </head>
  <body>
    <ul id="first">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
    <ul id="second">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
    <h1 id="01">获取父级HTML元素</h1>
    <h2 id="02">我们一起去郊游吧！</h2>
    <h3 id="03">你们开心吗？</h3>
    <h4 id="04">他们在干什么呢？</h4>
    <p  id="demo"></p>
  </body>
  <script>
//$():工厂函数是自动循环的
//$():工厂函数的功能
// 1.$(选择器，上下文):返回jQuery对象
    //javascrip原生操作
    document.querySelectorAll("li").forEach(function (item) {
      item.style.color = "red";
    });
    //jQuery操作
    $("li").css("color", "green");
    // $("li", "#first").css("color", "blue");不要用
    $("#first li").css("color", "skyblue");
// 2.$(js对象),返回一个jQuery对象,将js对象包装成jQuery对象
    var lis = document.querySelectorAll("#second li");
    lis.forEach(function (item) {
      item.style.backgroundColor = "yellow";
    });
    //lis === jQuery对象
    $(lis).css("background-color", "cyan");
// 3.$(html文本),将html文本包装成一个jQuery对象并返回
//html文本：hello不是html文本，<p>hello</p>带标签的才是html文本
    $("<h3>Laravel开发者</h3>").insertAfter("#second");
// 4.$(callback):当html文档结构加载完成后就会立即执行这个回调
    $(function () {
//$(document.body).css( "font-size", "18px").css("background-color", "wheat");链式写法
      //可以简写为下面这种方式
      $(document.body).css({
        "font-size": "18px",
        "background-color": "wheat",
      });
    });
    $(document).ready(function () {
      var myParent = $("#02").parent();
      $("#demo").text(myParent.prop("nodeName"));
    });
    $("<h3>Laravel开发</h3>").insertBefore("#01");
  </script>
</html>

输出效果：

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

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

toArray():将查询结果转为真正的数组.
$.each():回调的参数顺序与forEach不一样.
$.map():必须要有返回值,回调参数的参数和$.each()的回调参数的参数完全相反.
index():返回jQuery查询集合中的索引.