jQuery 语法速览

0x01 概述

• jQuery 官网：https://jquery.com/
• jQuery 是一套兼容多浏览器的 JavaScript 脚本库
• 导入 jQuery：<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
• 优点：
  • 提供强大的功能函数
  • 解决浏览器兼容问题
• $ 代表对 jQuery 的引用

0x02 对象

• jQuery 在 DOM 对象基础上扩充出包装集对象

• 对象转换：

  • DOM 对象 -> 包装集对象

    var domObject = document.getElemenetById("myDiv");
    var jqObject = $(domObject);
    

  • 包装集对象 -> DOM 对象

    var jqObject = $("#myDiv");
    var domObject = jqObject[0];
    

• 当目标元素为空时，DOM 对象为 null，包装集对象为空集

0x03 选择器

（1）基础选择器

按优先级从高到低

1. id 选择器

   $("#myDiv");
   // 等价于
   document.getElementById("myDiv";
   

2. 元素选择器

   $("div");
   // 等价于
   document.querySelectorAll("div");
   

3. 类选择器

   $(".myDiv");
   // 等价于
   document.querySelectorAll(".myDiv");
   

4. 通配选择器

   $("*");
   // 等价于
   document.querySelectorAll("*");
   

5. 组合选择器

   $("#myDiv", "div", ".myDiv");
   

（2）层次选择器

• 后代选择器

  $("#parent div");
  

  id 为 parent 的元素下所有 div 元素

• 子代选择器

  $("#parent > div");
  

  id 为 parent 的元素下第一级 div 元素

• 相邻选择器

  $("#parent + div");
  

  id 为 parent 的元素的下一个 div 元素

• 兄弟选择器

  $("#parent ~ div");
  

  id 为 parent 的元素之后的所有 div 元素

（3）表单选择器

• 表单选择器

  $(":");
  

  包括 <input />、<textarea>、<select>、<button>

• 文本框选择器

  $(":text");
  

• 密码框选择器

  $(":password");
  

• 单选按钮选择器

  $(":radio");
  

• 复选框选择器

  $(":checkbox");
  

• 提交按钮选择器

  $(":submit");
  

• 图像域选择器

  $(":image");
  

• 重置按钮选择器

  $(":reset");
  

• 按钮选择器

  $(":button");
  

• 文件域选择器

  $(":file");
  

（4）其他选择器

• 属性选择器

  $("[属性名]");
  
  // 或
  
  $("[属性名='属性值']");
  

  如：$("[name='username']");

• 过滤选择器

  $(":过滤项");
  

  如：$(":checked");

0x04 DOM 操作

（1）属性

• jQuery 操作属性方法包括 attr 和 prop

• attr

  • 设置属性：对象.attr("属性名", "属性值");
  • 获取属性：var 变量名 = 对象.attr("属性名");

• prop

  • 设置属性：对象.prop("属性名", "属性值");
  • 获取属性：var 变量名 = 对象.prop("属性名");

• 异同：

  • 都可以操作固有属性

    固有属性：元素本身拥有的属性

  • 只有 attr 可以操作自定义属性

    自定义属性：对元素自定义的属性

  • 推荐使用 prop 操作返回值是布尔类型的属性

    如：checked、selected、disabled 等

（2）样式

• 获取样式名称：attr("class")
• 修改样式：attr("class", "样式名")
• 添加样式
  • 添加样式名称：addClass("样式名")
  • 添加具体样式：css()
    • 如：css("样式名", "样式值"); 或 css({"样式名1": "样式值1", "样式名2": "样式值2"});
• 移除样式名称：removeClass(class)

（3）内容

• HTML 内容：
  • 获取：html()
  • 修改：html("内容")
• 文本内容：
  • 获取：text()
  • 修改：text("内容")
• 值内容：
  • 获取：val()
  • 修改：val("值")

（4）创建

使用 $ 直接创建元素，如：$('<h1>Title</h1>');

（5）添加

• 头添加
  • prepend()：在被选中元素内部的开头添加元素
  • $("A").prependTo("B")：把 A 元素加到 B 元素的开头
  • before()：在指定元素前添加元素
• 尾添加
  • append()：在被选中元素内部的结尾添加元素
  • $("A").appendTo("B")：把 A 元素加到 B 元素的结尾
  • after()：在指定元素后添加元素

（6）删除

• remove()：删除指定元素及其所有子元素，包括元素标签
• empty()：清空指定元素内容，不包括元素标签

（7）遍历

$().each(function(index, element) {})：遍历指定元素下的所有元素，通过回调函数，根据索引（从 0 开始）和 DOM 元素进行操作

• 回调函数的 this 指向被指定的元素

0x05 事件

（1）加载事件

• 加载事件 ready() 类似 onLoad()，可以有多个并依序执行
• $(document).ready(function() {}) 等价于 $(function() {})

（2）绑定事件

• 绑定事件 bind() 可以为被选中的元素添加一个或多个事件处理方法
• $().bind(eventType[, eventData], handler(eventObject))
  • eventType：触发事件类型，如 click、mouseover 等
  • eventData：传递参数
  • handler(eventObject)：事件处理方法及事件对象

0x06 AJAX

• jQuery 中通过 $.ajax({}) 使用 AJAX

• 参数是一个对象，其中属性及含义为：

  • type：请求方式，如 get、post
  • url：请求地址
  • async：是否异步，默认异步（true）
  • data：发送的数据
  • contentType：发送的数据的类型
  • dataType：返回的数据的类型
  • success：请求成功的回调函数
  • error：请求失败的回调函数

• 举例：

  $.ajax({
    type: "get",
    url: "data/dummy.json",
    data: {},
    success: function (data) {
      console.log(data);
    },
    error: function (data) {
      console.log(data);
    },
  });
  

• GET 请求简写方法：$.get(url, data, successCallback() {})

  • 固定 JSON 格式的 GET 请求简写方法：$.getJSON(url, data, successCallback() {})

• POST 请求简写方法：$.post(url, data, successCallback() {})

-End-