Community Learn Tools Library Leisure

English

Home > List of blog posts > JS - jQuery 基础

Blogger Information

Blog 47

fans 1

comment 0

visits 53022

Special Recommendation

More>

Related recommendations

jQuery 基础

1. jQuery 是什么

jQuery 是一个非常流行的 JavaScript 函数库
jQuery 经常用于 DOM 查询, 常用动画, Ajax 等常用操作
jQuery 宗旨: 写得更少,而做得更多

2. 引入 jQuery

官网下载: jQuery 下载
CDN:Bootstrap 中文网,又拍云
Composer: composer require components/jquery
CDN 与官网下载到本地的对比
- 官网下载总是可以获取最新版本,如果网站需要离线浏览只能选择它, 但资源下载会延缓网站打开速度
- CDN 可以让用户选择最近的节点下载,并且用户浏览器可能在访问其它站点时已经缓存了这个库,速度很快
composer 下载的 jQuery,就像一个普通文件一样,直接用<script src=""></script>引入

3. `$()`函数

jQuery 库是基于一个全局函数:jQuery()实现的,可简写为$()
调用$()会返回一个 jQuery 对象,但它不是构造函数(不用new调用),而是工厂函数
对象成员由属性和方法组成,但 jQuery 更偏爱方法,所有的 jQuery 方法都需要使用工厂函数\$()调用
通过$()函数创建的对象,可以调用定义在 jQuery 对象上的所有方法和属性
$()函数如此强大, 以至于不得不重点讨论一下,但在学习之前,应该将 jQuery 函数库引入到我们的项目中

3.1 \$()工厂函数的四种使用场景

基本语法：\$(选择器).操作()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="lib/jquery-3.5.1.js"></script>
    <title>Document</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>
  </body>
  <script>
    // 1. $(选择器, 上下文): 返回jQuery对象
    //   改变li的文本颜色
    // 原生
    document.querySelectorAll("li").forEach(function (item) {
      item.style.color = "red";
    });
    // jQuery
    $("li").css("color", "blue");
    // 若只改变第一组的颜色
    $("li", "#first").css("color", "black");
    // 也可以这样写
    $("#first > li").css("color", "red");
    // 2. $(js对象), 返回一个jQuery对象, 将js对象包装成JQ对象
    // 给第二组加个背景颜色
    var lis = document.querySelectorAll("#second > li");
    // 原生
    lis.forEach(function (item) {
      item.style.backgroundColor = "yellow";
    });
    // 将lis包装成jq对象
    $(lis).css("background-color", "lightblue");
    // 3. $(html文本), 将html文本包装成一个jQuery对象并返回
    // 将标签插入到第一组中
    $("<h1>PHP中文网</h1>").insertBefore("#first");
    // 4. $(callback): 当html文档结构加载完成后就会立即执行这个回调
    $(function () {
      $("#first").css("background-color", "lightcyan");
      $("#second").css({
        "background-color": "#8888",
        color: "blue",
        "font-size": "50px",
      });
    });
  </script>
</html>

4. 重要术语

jQuery 函数 + jQuery()或$() + 用来创建 jQuery 对象 + 注册 DOM 就绪时需要执行的回调 + 充当 jQuery 命名空间 + 通常也称为jQuery全局对象,注意与 jQuery 对象的区别
jQuery 对象 + jQurey()函数的返回值 + 返回值是一组文档元素,也称之为”jQuery 集合”,”jQuery 包装集合”等
选中元素 - 根据 css 选择器匹配到的所有文档元素集合 - 所以, 选中元素, 也可以称之为”匹配元素”
jQuery 方法: 只能由 jQuery 对象调用的方法, 如$('div').attr('style')
jQuery 静态方法: 定义在 jQuery 命名空间上的方法,即 jQuery 函数上的方法,如$.each()
通过上下文,可以很方便的区分出 jquery 方法与静态方法,但有些方法的名称却是完全相同的,例如

<script>
  var cl = console.log.bind(console);
  // 1. jQuery函数
  //   $() === jQuery()
  // 改变body背景颜色
  // 原生
  document.querySelector("body").style.backgroundColor = "red";
  // jq对象
  $("body").css("backgroundColor", "yellow");
  jQuery("body").css("backgroundColor", "lightcyan");
  // 2.jQuery对象
  // 获取页面所有元素返回一个对象.对象无法进行foreach遍历
  cl($("*"));
  // 获取所有元素并将对象转为数组，进行遍历
  cl(
    $("*")
      .toArray()
      .forEach(function (item) {
        cl(item);
      })
  );
  // 3.jQuery静态方法与方法
  // each() : 静态方法
  $.each($("*"), function (index, item) {
    cl(item); //序号   内容
  });
  // each()非静态方法
  $("*").each(function (index, item) {
    cl(index);
  });
</script>

5. jQuery 对查询结果的处理方式

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="lib/jquery-3.5.1.js"></script>
    <title>查询结果的处理</title>
  </head>
  <body>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
  </body>
</html>

toArray 将查询结果转为真正的数组

<script>
  var cl = console.log.bind(console);
  var lis = $("ul > li"); // 返回一个jq对象
  cl(lis);
  //   原生
  for (var i = 0; i < lis.length; i++) {
    // 改变字体颜色
    lis.get(i).style.color = "red";
  }
  //   jQuery
  lis.toArray().forEach(function (item, index) {
    // 改变字体颜色
    $(item).css("color", "blue");
    if (index >= 2) {
      // 控制台打印
      cl("元素" + index + " : " + item);
      //   元素2 : [object HTMLLIElement]
      //       元素3 : [object HTMLLIElement]
      //       元素4 : [object HTMLLIElement]
    }
  });
</script>

$.each() 回调的参数顺序与 forEach 不一样, \$().each(callback)

<script>
  var cl = console.log.bind(console);
  var lis = $("ul > li"); // 返回一个jq对象
  cl(lis);
  lis.each(function (index, item) {
    //   原生
    this.style.color = "red";
    // jq
    $(this).css("color", "blue");
  });
</script>

$.map(), 必须要有返回值, 回调参数的参数与 foreach 的回调参数的参数相同

<script>
  var cl = console.log.bind(console);
  var lis = $("ul > li"); // 返回一个jq对象
  cl(lis);
  var arr = $.map(lis, function (item, index) {
    //    返回偶数
    if (index % 2) {
      return item;
    }
  });
  $(arr).css("color", "yellow");
</script>

index(): 返回 jQuery 查询集合中的索引

<script>
  var cl = console.log.bind(console);
  var lis = $("ul > li"); // 返回一个jq对象
  cl(lis);
  lis.click(function () {
    // 打印下点击了谁
    cl("点击了", $(this).index() + 1);
  });
</script>

6. 基础的 getter 与 setter

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="lib/jquery-3.5.1.js"></script>
    <title>Document</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #666;
      }
      form {
        width: 400px;
        /* height: 150px; */
        padding: 20px 10px;
        border: 1px solid #aaa;
        box-shadow: 0 0 5px #888;
        box-sizing: border-box;
        background-color: #eee;
        display: grid;
        grid-template-columns: 80px 200px;
        gap: 10px;
        place-content: center center;
      }
      button {
        grid-column: 2 / 3;
        height: 26px;
      }
      button:hover {
        color: white;
        background-color: #888;
        border: none;
        cursor: pointer;
      }
      .red {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2 class="red">用户登录</h2>
    <form action="handle.php" method="get">
      <label for="email">Email:</label>
      <input
        type="email"
        name="email"
        id="email"
        autofocus
        value="leture@php.cn"
      />
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" value="不少于6位" />
      <label for="confirm">记住我:</label>
      <div>
        <input type="radio" name="save" id="confirm" value="1" checked /><label
          for="confirm"
          >保存</label
        >
        <input type="radio" name="save" id="cancel" value="0" /><label
          for="cancel"
          >放弃</label
        >
      </div>
      <button>登录</button>
    </form>
  </body>
  <script>
    var cl = console.log.bind(console);
    // 拿到form;
    var form = $("form");
    // attr(name) ： 获取 getter
    // attr(name，value) ：修改 setter
    // 拿到action的值
    cl(form.attr("action")); //handle.php
    // 修改action的值
    form.attr("action", "1.php");
    cl(form.attr("action")); // 1.php
    // 修改多个值 使用对象字面量
    form.attr({
      action: "3.php",
      method: "post",
    }); //<form action="3.php" method="post">
    // 动态修改action
    form.attr("action", function () {
      // 根据method值修改请求地址
      // 先把method值转为小写
      var method = $(this).attr("method").toLowerCase();
      return method === "get" ? "login.php" : "register.php";
    });
  </script>
</html>

7. jQuery 属性与 DOM 常用操作

7.1 属性操作

7.1.1 获取和设置 HTML 属性

attr(): 获取与设置 html 元素的属性
removeAttr(): 移除 html 元素属性

7.1.2 获取和设置 CSS 属性

css(): 获取的是元素的计算样式,设置的是内联样式,但不适用于复合样式,如margin
addClass(): 添加类样式
removeClass(): 移除类样式
toggleClass(): 自动切换类样式
hasClass(): 判断是否存在某个类样式

7.1.3 获取和设置表单的值

val(): 获取和设置表单的值

7.1.4 获取和设置元素的内容

text(): 获取和设置元素的文本内容
html(): 获取和设置元素的 html 内容

7.1.5 获取和设置元素的位置与宽高

offset(): 获取元素的位置信息
scrollTop(),scrollLeft():获取元素滚动条位置

7.1.6 获取和设置元素中的数据

data(): 获取和设置元素中的数据
removeData(): 从元素中删除数据

7.2. DOM 操作

7.2.1 插入与替换元素

append() | appendTo(): 尾部插入元素
prepend() | prependTo(): 头部插入元素
after() | insertAfter(): 后面插入元素
befor() | insertBefor(): 前面插入元素
replaceWidh() | replaceAll(): 替换目标元素内容

7.2.2 复制元素

clone(): 创建并返回每一个选中元素的副本

7.3 删除元素

empty():
remove():

8. 总结

jQuery 简化了就是 js 代码，短短几行完成了原生几十行的功能，像是 php 的静态类根据不同的参数完成不同的功能

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：本质上,jQuery就是一个js的全局函数对象而已, 不过在它上面定义了大量的实用的方法或属性,供用户操作, 来简化js编程

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

js事件点击按钮显示div 三秒后自动消失

2020-03-30 11:30:28