一.概述
- jQuery是一个JS库
- 所谓的库实际上就是一个JS文件，里面封装了很多预定义的函数，目的是在使用时直接调用，不需要重复定义，简化了JS的编程
二.基本语法
1.对象获取和转换
- jQuery本质上虽然也是JavaScript，但如果想要使用jQuery的属性和方法那么必须保证该对象是jQuery对象，而不是JavaScript方式获得的DOM对象，二者的API方法不能混合使用，如果想要使用那么就要进行对象的转换
- JavaScript对象转为jQuery对象
let jQuery对象 = $(JavaScript对象); - jQuery对象转为JavaScript对象
let JavaScript对象 = jQuery对象[索引];或let JavaScript对象 = jQuery对象.get(索引);
2.事件
- jQuery将事件封装成了方法，并且去掉了JavaScript中的
.on语法，如
事件 |
说明 |
load |
某个页面或图片加载完成 |
submit |
表单提交 |
click |
鼠标单击 |
dblclick |
鼠标双击 |
blur |
元素失去焦点 |
focus |
元素得到焦点 |
change |
改变域的内容 |
- 事件的绑定
- 方法一：
jQuery对象.事件名(执行的功能);如
let jq = $("#btn");//根据属性获取jQuery对象 jq.click(function(){ 事件触发时执行的代码; });//使用匿名方法指定触发事件时执行的功能
- 方法二：
jQuery对象.on(事件名,执行的功能);如
let jq = $("#btn");//根据属性获取jQuery对象 jq.on("click",function(){ 事件触发时执行的代码; });//给jq对象绑定click事件，注意click需要加上双引号，并且使用匿名方法指定触发事件时执行的功能
- 事件的解绑
- 语法：
jQuery对象.off(事件名); - 如
jq.off("click");//将click事件从该对象解除
- 注意：如果不指定需要解除的事件名，会将该对象绑定的所有事件都解除
3.遍历操作
- 方式一
for(let i=0;i<容器长度;i++){ 执行功能; }
- 方式二
容器对象.each(function(index,ele){ 执行功能; });
- 方式三
$.each(容器对象,function(index,ele){ 执行功能; });
- 方式四
for(ele of 容器对象){ 执行功能; }
三.选择器
1.基本选择器
- 类似于css中的选择器，用于获取元素
- jQuery中选择器的语法：
$() - 基本选择器如下：
选择器 |
语法 |
作用 |
元素选择器 |
$("元素名称") |
根据类名获取元素对象数组 |
id选择器 |
$("#+id属性的属性值") |
根据id属性获取元素对象 |
类选择器 |
$(".+class属性的属性值") |
根据类属性获取元素对象数组 |
2.层级选择器
选择器 |
语法 |
作用 |
后代选择器 |
$("A B") |
获取A下的所有B(包含B的子级) |
子选择器 |
$("A > B") |
获取A下的所有B(不包含B的子集) |
兄弟选择器 |
$("A + B") |
A相邻的下一个B |
兄弟选择器 |
$("A ~ B") |
A相邻的所有B |
- A和B是指标签名
3.属性选择器
选择器 |
语法 |
作用 |
属性名选择器 |
$("A[属性名]") |
获取含有指定属性名的元素对象数组 |
属性值选择器 |
$("A[属性名=属性值]") |
获取含有指定属性名和对应属性值的元素对象数组 |
- A是指标签名
4.过滤器选择器
选择器 |
语法 |
作用 |
首元素选择器 |
$("A:first") |
获取A中第一个元素对象 |
尾元素选择器 |
$("A:last") |
获取A中最后一个元素对象 |
非元素选择器 |
$("A:not(B)") |
获取A中不包含指定内容的元素对象 |
偶数选择器 |
$("A:even") |
获取A中索引值是偶数的元素对象 |
奇数选择器 |
$("A:odd") |
获取A中索引值是奇数的元素对象 |
等于索引选择器 |
$("A:eq(index)") |
获取A中指定索引值的元素对象 |
大于索引选择器 |
$("A:gt(index)") |
获取A中大于指定索引值的元素对象 |
小于索引选择器 |
$("A:lt(index)") |
获取A中小于指定索引值的元素对象 |
- A表示标签名
5.表单属性选择器
选择器 |
语法 |
作用 |
可用元素选择器 |
$("A:enabled") |
获取A中可用的元素对象 |
不可用元素选择器 |
$("A:disabled") |
获取A中不可用元素对象 |
单选框/复选框选中选择器 |
$("A:checked") |
获取A中被选中元素对象 |
下拉框选中选择器 |
$("A:selected") |
获取A中被选中元素对象 |
四.DOM
1.操作文本
- 常用方法
方法 |
作用 |
html() |
获取标签中的文本 |
html(value) |
设置标签的文本内容，如果文本含有html代码也会解析 |
2.操作对象
- 常用方法
方法 |
作用 |
$("元素") |
创建一个元素对象 |
append(element) |
将子元素添加为最后一个子元素，由父元素对象调用 |
appendTo(element) |
将子元素添加为最后一个子元素，由子元素调用 |
prepend(element) |
将子元素添加为第一个子元素，由父元素对象调用 |
prepandTo(element) |
将子元素添加为第一个子元素，由子元素调用 |
before(element) |
将元素添加到调用该方法的元素前面 |
after(element) |
将元素添加到调用该方法的元素后面 |
remove() |
删除指定元素（删除自己） |
empty() |
清空子元素，自己仍然存在 |
3.操作样式
- 常用方法
方法 |
作用 |
css(name) |
根据样式属性名获取css样式 |
css(name,value) |
设置css样式，name是样式属性名，value是值 |
addClass(value) |
给指定对象添加样式，value是样式的类名 |
removeClass(value) |
给指定对象删除样式，value是样式的类名 |
toggleClass(value) |
如果没有该样式则添加，如果有则删除，value是样式类名 |
4.操作属性
- 常用方法
方法 |
作用 |
attr(name) |
获取指定属性的值 |
attr(name,value) |
设置指定属性的值 |
prop(name) |
获取指定属性的值（用于checked，selected属性），值为true或false |
prop(name,value) |
设置指定属性的值（用于checked，selected属性），值为true或false |
