JQuery

摘要：本文学习了JQuery库，包括选择器、文档处理、事件、效果，以及AJAX调用。

1 简介

JQuery这个名字由JS和Query组合而成，但并非官方定义的全称。

JQuery是一个流行的JS库，旨在简化HTML文档遍历、事件处理、动画和AJAX交互等网页开发任务。尽管名字中有“Query”，它并不用于数据库查询，而是专注于提供易于使用的API来操作DOM（文档对象模型）和实现各种前端功能。

JQuery设计的宗旨是写更少的代码，做更多的事情。

2 引入

JQuery库实际上就是一个JS文件，只需要在网页中直接引入这个文件就可以了。

从官网引入：

1

<script src="jquery-3.6.0.min.js"></script>

因为网络原因，建议从CDN引入：

1

<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>

也可以下载JQuery文件并放置在项目中，然后通过script元素引用。

3 语法

3.1 基础语法

JQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

基础语法：

1

$(selector).action();

美元$符号定义JQuery，选择器selector用于查询HTML元素，方法action()执行对元素的操作。

3.2 核心

JQuery库为window对象定义了一个$函数JQuery()，也可以写作$()。

JQuery()函数会根据参数数据类型的不同做不同的工作，返回一个JQuery封装的伪数组对象。

3.2.1 四种参数形式

JQuery()函数中可以存放的四种参数形式，返回的均是JQuery对象。

3.2.1.1 选择器字符串

格式为：

1

$(选择器字符串)

通过相应选择器获取对应的DOM对象，然后将这些DOM封装到一个JQuery对象中并返回：

1

var $div = $('div');// 选取所有div元素节点并返回，将这些DOM节点封装到JQuery对象

3.2.1.2 DOM对象

格式为：

1

$(DOM对象)

将该DOM对象封装成JQuery对象并返回：

1
2

var div = document.getElementsByTagName('div');
var $div = $(div);// 将DOM对象转化为JQuer对象

3.2.1.3 HTML文本字符串

格式为：

1

$(HTML文本字符串)

根据传入的文本创建好HTML元素并封装成JQuery对象返回：

1

var $div = $('<div class="one">one<div>');// 创建一个类名为one的div元素且将其封装成一个JQuery对象

3.2.1.4 匿名函数

格式为：

1

$(匿名函数)

当文档结构加载完毕之后JQuery函数调用匿名函数：

1
2

$(function () {});// 文档结构加载完毕后执行function函数中的代码
$(document).ready(function () {});// 将document节点转化为JQuery对象，在调用对象ready()方法实现文档加载完毕后再执行函数内代码

3.2.2 JQuery对象和DOM对象

JQuery对象是JQuery独有的，JQuery对象无法使用DOM对象的任何方法。同样的，DOM对象也不能使用JQuery里的任何方法。

JQuery对象和DOM对象的转化：

• JQuery对象转化为DOM对象：

  1	$('div')[0];// 在JQuery对象后面添加数值位置即可选择其获取到的JQuery类数组对象中相应位置存放的DOM对象

• DOM对象转化为JQuery对象：

  1 2	var div = document.getElementsByTagName('div');// 多个div返回的是一个DOM类数组对象 var $div = $(div);// 将DOM对象作为JQuery函数的参数即可将该DOM对象转化为JQuery对象

JQuery对象的操作实际上就是对JQuery数组中DOM对象的批量操作。

3.3 选择器

3.3.1 基本选择器

基本选择器：

3.3.2 层次选择器

层次选择器：

3.3.3 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器都以:开头。

过滤选择器：

子元素过滤选择器：

属性过滤选择器：

表单过滤选择器：

表单对象属性过滤选择器：

3.4 文档处理

3.4.1 插入节点

插入节点：

3.4.2 删除节点

删除节点：

3.4.3 查找节点

查找节点：

3.4.4 修改节点

内容操作：

值操作：

属性操作：

类操作：

样式操作：

3.5 事件

常用事件：

3.6 效果

常用效果：

3.7 AJAX

发送get请求：

1
2
3

$.get(url, {name:'John',location:'Boston'}, function (data) {
  alert('Data Loaded: ' + data);
})

发送post请求：

1
2
3

$.post(url, {name:'John',location:'Boston'}, function (data) {
  alert('Data Loaded: ' + data);
})

发送ajax请求：

1
2
3
4
5
6
7
8
9
10
11
12

$.ajax({
  url: url,
  type: 'POST',
  dataType: 'json',
  data: {name:'John',location:'Boston'},
  success: function (msg) {
    alert('Success');
  },
  error: function (msg) {
    alert('Error');
  }
})