jQuery 语法速览

SRIGT / 2024-08-27 / 原文

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）基础选择器

按优先级从高到低

id 选择器

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

元素选择器

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

类选择器

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

通配选择器

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

组合选择器
```
$("#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() {})