jQuery 工厂函数与查询结果的处理方式 - PHP第11期作业

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > jQuery 工厂函数与查询结果的处理方式

博主信息

博文 43

粉丝 1

访问量 43188

专题推荐

更多>

一、什么是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查询集合中的索引.

代码演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <title>jQuery查询结果的处理方式</title>
  </head>
  <body>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>itme3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
    <script>
      // 1.toArray():将查询结果转为真正的数组
      var lis = $("ul > li");
      console.log(lis);
      console.log(lis.get(3));
      for (var i = 0; i < lis.length; i++) {
        //原生方式
        lis.get(i).style.color = "red";
      }
      lis.toArray().forEach(function (item, index) {
        if (index >= 2) console.log("元素" + index + ":" + item);
      });
      // 2. $.each(): 回调的参数顺序与forEach不一样,$().each((callback))
      lis.each(function (index, value) {
        //原生方式
        this.style.color = "green";
        //jQuery方式
        $(this).css("color", "blue");
      });
      // 3.$.map():必须要有返回值,回调参数的参数和$.each()的回调参数的参数完全相反
      var arr = $.map(lis, function (value, index) {
        if (index % 2) return value;
      });
      console.log(arr);
      console.log($(arr));
      $(arr).css("color", "red");
      // 4.index():返回jQuery查询集合中的索引
      // jQuery对象是一个类数组，具有从0开始递增的正整数索引，并有一个length属性
      console.log(lis);
      lis.click(function () {
        console.log("点击了第：", $(this).index() + 1, "个<li>");
      });
    </script>
  </body>
</html>

输出效果：

总结：

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

批改老师：