目录
一. 基本选择器
1. 元素选择器
元素选择器也叫做标签选择器，就是通过标签名来选择元素。
jQuery 中元素选择器的语法格式如下：
1.1 语法格式
$("元素名");
1.2 设置css样式
jQuery对象.css("属性名", "属性值"); // 例如修改 width、height 等
可以给css方法传入一个json对象，这样就可以同时修改多个属性
$().css({"属性1":"属性值1","属性2":"属性值2"...})
2. ID选择器
ID 选择器是用来选择指定 id 名的元素的。要使用 ID 选择器，首先我们需要给元素设置一个 id，使用格式如下：
1.1 使用格式
<标签名 id="id名"></标签名>
3. 类选择器
类选择器就是选择指定类名的元素。要使用类选择器，首先我们需要给元素设置一个 class，使用格式如下：
1.1 使用格式
$(".类名");
$('div.test') 表示获取 class 值为 test 的 div 标签。
4. 群组选择器
群组选择器可以让我们同时定义多个选择器，多个选择器之间用 ,号隔开，最终返回一个 jQuery 对象，该对象中包含了这些选择器选中的全部元素。
4.1 语法格式
$("选择器1, 选择器2,...");
元素选择器、类选择器、ID 选择器都可以组合在一起。
5. 通配符选择器
通配符选择器就是可以设置全局样式的选择器，通俗来讲就是文档中的所有元素都要接受该规则。
5.1 语法格式
$("*");
二. 层次选择器
1. 后代选择器
后代选择器，听其名字我们应该可以猜到是用来选择某元素的后代元素，对的，它就是对指定元素内部中的后代元素进行操作
1.1 使用格式
$("M N");
//其中 N 是 M 的后代元素
注意：这里的后代 N 指的不仅仅是 M 的子代，而是 M 所有能够匹配的后代元素。
2. 子代选择器
子代选择器也是一种后代选择器，它与我们之前学的后代选择器有所不同，它只能对指定标签的子代元素进行操作。
2.1 使用格式
$("M>N");
3. 兄弟选择器
兄弟选择器是查找元素的兄弟节点（即同级节点）从而进行操作。
3.1 语法格式
$("M~N");
4. 相邻选择器
在前面我们讲的 $("#child~p") 可以选择指定元素后面的所有兄弟 p 元素，而相邻选择器只能选到指定元素的邻居兄弟元素。
4.1 使用格式
$("M+N"); // 选择下一个兄弟节点 N
三. 属性选择器
属性选择器就是根据属性来选择元素，其中我们可以使用正则表达式中的一些符号来选择带有某些属性值的元素。
四. 伪类选择器
1. 位置伪类选择器
所谓位置伪类选择器就是通过元素的位置来进行选择，比如我们可以选择指定第 n 个位置的元素等。
常见的位置伪类选择器如下所示：
1.1 使用示例
$("li:first").css("color", "#a7c5eb");
$("li:last").css("color", "#ffc478");
$("li:odd").css("color", "#c1a1d3");
$("li:even").css("font-size", "25px");
$("li:eq(4)").css("text-shadow", "2px 2px 2px #96bb7c");
2. 可见性伪类选择器
所谓可见性伪类选择器，是针对元素在页面上显示或者隐藏而言的。
2.1 使用示例
$("#btn1").click(function () {
$("div:hidden").css("display", "block"); /*让隐藏元素显示到页面上*/
});
$("#btn2").click(function () {
$("div:visible").css("color", "blue"); /*改变显示元素的字体颜色*/
});
3. 内容伪类选择器
所谓内容选择器就是根据元素的内容来选择的。
3.1 使用示例
$("td:contains('1')").css("color", "#ade498");
$("tr:has(td)").css("background-color", "#e1ffc2");
$("td:empty").append("10"); // 在指定元素里添加内容
//$("td:parent").append("❤")
在上面代码中，使用 $("td:contains('1')") 给 td 元素中包含内容 1 的元素设置绿色字体。
使用 $("tr:has(td)") 给包含 td 元素的 tr 元素设置背景颜色。
使用 $("td:empty") 给空的 td 元素添加文字内容。
使用 $("td:parent") 给是父亲的 td 元素添加文字内容。
4. 表单伪类选择器
表单伪类选择器是专用给表单元素设计的。
5. 表单对象属性选择器
该选择器也是针对表单元素而言，与表单伪类选择器区别是：表单对象属性选择器是根据表单元素的状态来选择的
五. 事件
1. 页面事件
1.1 语法格式
jQuery 对象.事件名(事件处理函数)
例如：
$(document).ready(function () {});
// 简写成
$(function () {});
其中 $ 是 jQuery 对象的简写，$(document) 是把 dom 对象转换成 jQuery 对象。
2. 鼠标事件
鼠标事件是当鼠标处于某种状态会触发的事件。
onmousedown 事件会在鼠标按键被按下时发生。
与 onmousedown 事件相关连的事件发生次序（ 鼠标左侧/中间 按钮）：
- onmousedown
- onmouseup
- onclick
与 onmousedown 事件相关连的事件发生次序 (鼠标右侧按钮):
- onmousedown
- onmouseup
- oncontextmenu
2.1 使用示例
// 鼠标按下事件
$("p")
.mousedown(function () {
$(this).css("color", "blue"); // this 是指定的当前元素
})
.mouseup(function () {
$(this).css("color", "pink"); // this 是指定的当前元素
});
3. 键盘事件
4. 表单事件
5. 滚动事件
在 jQuery 中，使用 scroll 来绑定一个滚动事件。何为滚动事件呢？当文档通过鼠标发生滚动时，会触发的事件。
5.1 使用格式
jQuery对象.scroll(事件处理函数);
6. 绑定事件
在 jQuery 中，我们使用 on 或 bind 方法可以绑定一个或者多个事件。
6.1 使用格式
jQuery对象.on(事件类型, 事件处理函数);
或
jQuery对象.bind(事件类型, 事件处理函数);
6.2 使用示例
// 需求: 鼠标移入div变为绿色，鼠标移除时 div变为粉色
// 改为 bind 效果一样
$("div").on("mouseover mouseout", function () {
if (event.type == "mouseover") {
$(this).css("background-color", "green");
} else {
$(this).css("background-color", "pink");
}
});
7. 合成事件
合成事件就是一个事件来代表多个事件
7.1 语法结构
jQuery对象.hover(mouseover的事件处理函数, mouseout的事件处理函数); // 只针对于mouseover和mouseout才能使用
7.2 使用示例
$("div").hover(
function () {
$(this).css("transform", "rotate(60deg)");
},
function () {
$(this).css("transform", "rotate(360deg)");
}
);
8. 自定义事件
自定义事件就是用户可以自己定义一个事件。在 jQuery 中，我们使用 on 方法来定义事件，然后通过 trigger 方法来触发该事件。
8.1 语法格式
jQuery对象.on(事件类型, 处理函数); // bind 也可以 jQuery对象.trigger(事件类型);
8.2 使用示例
// 自定义一个名为 changecolor 的事件
$("div").on("changecolor", function () {
$(this).css("background-color", "#ffce89");
});
$("div").click(function () {
$("div").trigger("changecolor");
});
六. 事件对象event
七. DOM操作
1. 节点的创建
1.1 直接创建元素节点
$("<标签名></标签名>");
1.2 创建带有文本的元素节点
$("<标签名>文本内容</标签名>");
1.3 创建带有属性的元素节点
$("<标签名 属性='属性值'>文本内容</标签名>");
2. 元素的插入
在 jQuery 中，元素插入的方法有两类，分别是：
- 子级插入方法，包括 prepend()、prependTo()、append()、appendTo()。
- 同级插入方法，包括 before()、insertBefore()、after()、insertAfter()。
2.1 prepend() 与 prependTo()
prepend() 与 prependTo() 是在元素子级的开头插入元素。
语法格式
// 在 A 元素的子级最前面的位置插入B $(A).prepend(B); // 在 A 元素的子级最前面的位置插入B $(B).prependTo(A);
2.2 append() 与 appendTo()
append() 与 appendTo() 是在元素子级的尾部插入元素。
语法格式
// 在 A 元素子级的最后面位置追加 B $(A).append(B); // 在 A 元素子级的最后面位置追加 B $(B).appendTo(A);
2.3 before() 与 insertBefore()
before() 与 insertBefore() 是在该元素的前面插入元素。
语法格式
// 在 A 的前面插入 B $(A).before(B); // 在 A 的前面插入 B $(B).insertBefore(A);
2.4 after() 与 insertAfter()
语法格式
// 在 A 的后面插入 B $(A).after(B); // 在 A 的后面插入 B $(B).insertAfter(A);
3. 元素的删除
3.1 remove 方法
remove 方法可以将指定的元素及其子元素删除。
语法格式
$().remove();
3.2 empty方法
empty 方法是用来清空指定元素的后代元素和内容的。
语法格式
$().empty();
4. 元素的替换
4.1 replaceWith 和 replaceAll
replaceWith 方法和 replaceAll 方法都可以用来把指定元素替换成其他元素，只是在使用格式上有些差别。
语法格式
// 将 A 替换为 B $(A).replaceWith(B); // 将 A 替换为 B $(B).replaceAll(A);
5. 元素的遍历
在 jQuery 中，each 方法是用于元素遍历的。
5.1 语法格式
$().each(function (index, element) {});
each 方法会接收一个匿名函数作为参数，函数中的 index 表示元素的索引号；而函数中的 element 表示当前元素。
6. 属性操作
6.1 attr方法
attr 方法可以用来获取指定元素的属性值，也可以用来设置指定属性的属性值。
语法格式
jQuery对象.attr("属性名"); // 获取属性
jQuery对象.attr("属性名", "属性值"); // 修改属性
6.2 removeAttr方法
removeAttr 方法可以删除指定元素的某个属性。
语法格式
jQuery对象.removeAttr("属性名");
6.3 css方法
css 方法可以用来获取指定属性的属性值，也可以用来设置属性值。
// 获取指定属性的属性值
$().css("属性名");
// 设置属性值
$().css("属性名", "属性值");
6.4 addClass方法
addClass 方法是用来添加类选择器的。
语法格式
$().addClass("类名");
6.5 removeClass方法
removeClass 方法可以用来移除已有的类选择器。
语法格式
$().removeClass("类名");
6.6 toggleClass方法
toggleClass 方法是用来切换类选择器的。
语法格式
$().toggleClass("类名");
使用示例
$("div").click(function () {
$(this).toggleClass("circle1");
});
通过使用 toggleClass 让 div 元素的 circle1 样式在添加和移除之间切换，没有 circle1 这个类就加上，有则移除。
7. 内容操作
7.1 html方法
html 方法可用来获取 HTML 文档中指定元素内部的元素标签和标签中的内容，也可以给元素添加内容。
语法格式
// 获取元素内容
$().html();
// 设置元素内容
$().html("内容");
7.2 text方法
text 方法可以获取指定标签里的文本，也可以为指定标签添加文本。
语法格式
// 获取指定标签中的文本
$().text();
// 给指定标签设置文本
$().text("内容");
7.3 val方法
val 方法用于获取表单元素的值，也可以给表单元素设置值。
// 获取指定表单中的文本
$().val();
// 给指定表单设置文本
$().val("内容");
八. 动画
1. 隐藏与显示
1.1 显示
show 方法用于显示出隐藏的被选元素。
语法格式
$().show(speed, easing, callback);
注意：show() 只适用于通过 jQuery 方法和 CSS 中 display 属性隐藏的元素，不适用于通过 visibility 隐藏的元素。
1.2 隐藏
hide 方法用于隐藏被选元素。
$().hide(speed, easing, callback);
show 和 hide 方法的参数说明如下：
- speed 可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、normal、fast 等值。
- easing 可选参数，用于设置动画在不同点上元素的速度，其默认值是 swing，表示开头和结尾的速度慢，中间的速度快。
- callback 可选参数，是方法执行完成后，执行的一个函数。
2. 淡入与淡出
fadeIn 方法可以让元素淡入，它逐渐改变元素的不透明度，让不透明度从 0 逐渐变为 1，从而实现淡入的效果。
fadeOut 则用于让元素淡出，也是通过修改元素的不透明度，让不透明度逐渐从 1 变为 0，从而实现淡出的效果。
2.1 语法格式
// 淡入 $().fadeIn(speed, easing, callback); // 淡出 $().fadeOut(speed, easing, callback);
fadeIn 和 fadeOut 方法参数说明如下：
- speed 可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、normal、fast 等值。
- easing 可选参数，用于设置动画在不同点上元素的速度，其默认值是 swing，表示开头和结尾的速度慢，中间的速度快。
- callback 可选参数，是方法执行完成后，执行的一个函数。
3. 自定义动画
在 jQuery 中，使用 animate 方法可以实现自定义动画。
3.1 语法格式
$().animate({ style }, speed, callback);
style 是样式属性列表，我们的样式属性列表用逗号隔开写在 {} 中，speed 是动画持续的时间，callback 是动画结束后所执行的函数。
默认情况下，所有 HTML 元素的定位方式都是静态定位（即 position: static），且无法移动。 如需对位置进行操作，比如使用 “top”，“right”，“bottom”，“left” 属性要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
4. 队列动画
4.1 语法格式
$().animate().animate()....animate();
5. 停止动画
5.1 语法格式
$().stop(stopAll, goToEnd);
stop 方法有两个参数，其参数意义如下所示：
- 第一个参数 stopAll 代表是否停止所有动画，其取值为 true 或者 false，当为 true 时代表停止当前及后面的所有动画，当为 false 时代表只停止当前动画。
- 第二个参数 goToEnd 代表停止动画后是否跳转到最后的动画效果，其取值也是布尔类型，当为 true 时，代表停止动画后会跳转到最后的动画效果，为 false 时则不跳转。
注：stop 方法的两个默认参数取值为 false，也就是当你写 stop() 时，相当于只停止当前动画并且不会跳转到动画的最后效果。
6. 延迟动画
可以在 animate 前面加上延迟方法，来延缓动画的开始时间。
6.1 语法格式
$().delay(speed);
九. 遍历
1. 遍历祖先元素
祖先元素就是指某个元素的父元素或者祖父元素等上层元素
在 jQuery 中，提供了方法用来找到指定元素的祖先元素，常用的方法有以下两种。
- parent 方法是用来查找指定元素的父元素的。
- parents 方法是用来查找指定元素的所有祖先元素的。
- 注意：我们还可以在方法中指定选择器。
2. 遍历兄弟元素
2.1 前向兄弟元素查找
前向兄弟元素查找就是查找指定元素前面的兄弟元素
语法格式
$().prev(); // 查找指定元素前向第一个元素 $().preAll(); // 查找指定元素前向所有元素
2.2 后向兄弟元素查找
后向兄弟元素查找就是查找指定元素的后向元素。
语法格式
$().next(); // 查找指定元素的第一个后向兄弟元素 $().nextAll(); // 查找指定元素的所有后向兄弟元素
2.3 查找所有兄弟元素
语法格式
$().siblings();
3. 遍历后代元素
3.1 children方法
children 只能获取元素的儿子节点
语法格式
jQuery对象.children();
3.2 find方法
find 方法可以查找到指定元素的所有后代元素
语法格式
jQuery对象.find(selector);
4. 过滤元素
4.1 类名过滤
使用格式
$().hasClass("类名");
hasClass 方法返回值为 boolean 类型，当查找到类名相符的指定元素时，则会返回 true，反之为 false。
4.2 下标过滤
使用格式
$().eq(n);
n 是一个整数，取值为元素的下标值。
使用示例
for (var i = 0; i < 3; i++) {
$li.eq(i).css("color", "#77acf1");
}
- 在上面代码中，我们使用 for 循环来遍历 li 元素。
- 通过 for(var i=0; i<3; i++) 我们可以遍历列表的前三项。
- 使用 eq(i).css("color","#77acf1") 给列表前三项的字设置颜色。
4.3 判断过滤
使用格式
$().is(selector);
is 方法返回的也是布尔类型的值，符合条件返回 true，反之 false
使用示例
$("div").is(":animated") 判断当前 div 元素是否处于动画状态。
$(this).is(".div2")
4.4 反向过滤
使用格式
$().not(selector|function)
它的参数有两种，当为选择器时，我们会通过选择器来过滤不符合条件的元素；当为函数时，我们会通过函数来过滤不符合条件的元素。
十. AJAX
1. load方法
load() 方法让 AJAX 去请求服务器，并从中获得数据，最后将获得的数据放入到指定的元素中。
1.1 语法格式
$().load(url, data, callback);
参数说明如下所示：
- url 是被加载页面的地址，它是必选参数。
- data 是发送到服务器的数据，它是可选参数。
- callback 是请求完成后的回调函数，它是可选参数。
这里请注意，load 方法中的回调函数有三个额外的参数，以下所示：
- response：服务器响应的结果数据。
- status：服务器响应的状态。
- xhr：XMLHttpRequest 对象。
需要注意的是：load 方法一般用于向服务器请求静态的数据文件，如 html、txt 等文件。但是在实际工作中，如果我们要传递一些参数给页面，通常不会使用 load 方法。
2. get方法
get 方法是通过 HTTP GET 请求从服务器请求数据。HTTP 是超文本传输协议，它是客户与服务器之间通信的一种协议，HTTP 有一些请求方法，在这些方法中 GET 和 POST 是最常见的。
2.1 语法格式
$.get(url, data, callback(data, status, xhr), dataType);
参数说明如下所示：
- url：是请求的 url，它是必须参数。
- data：是发送到服务器的数据，它是可选参数。
- callback：是当请求成功时的回调函数，该方法包含三个参数，data 是请求的结果数据，status 是包含请求的状态，xhr 是 XMLHttpRequest 对象。
- dataType：是服务器返回的数据格式，如 xml、html、json 等，默认的 jQuery 会智能判断它的类型。
3. post方法
前面我们学习了 get 方法，从练习中我们可以知道用 GET 请求指定页面，可以返回实体主体，它的请求会被缓存。post 方法是用的 POST 请求，它向指定资源提交数据进行处理请求，该请求不会被缓存。
3.1 语法格式
$.post(url, data, callback(data, textStatus, jqXHR), dataType);
参数说明如下所示：
- url：是请求的 url，它是必须参数。
- data：是发送到服务器的数据，它是可选参数。
- callback：是当请求成功时的回调函数，该方法包含三个参数，data 是请求的结果数据，textStatus 是包含请求的状态，jqXHR 是 XMLHttpRequest 对象。
- dataType：是服务器返回的数据格式，如 xml、html、json 等。
4. post与get方法的比较
post 和 get 有个明显的区别，使用 POST 请求，提交的数据不会显示到 URL 上，查看历史记录不会看到提交的数据。而 GET 请求，则相反，它提交的数据会显示在 URL 上，并且查看历史记录可以看到提交的数据
5. ajax方法
ajax 方法也是向服务器请求数据的，在方法内部我们可以指定是使用 POST 请求还是使用 GET 请求。在日常开发中 ajax 方法是最常用的。
5.1 语法格式
$.ajax({ 配置项 });
5.2 使用示例
// 请求页面原始数据
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/users",
// 如地址失效，可以使用 https://labfile.oss.aliyuncs.com/courses/3774/users.json
success: function (users) {
$.each(users, function (i, order) {
$("#results").append("<li>" + order.name + "</li>");
});
},
error: function () {
alert("数据请求失败");
},
});
6. getJSON
$.ajax({
type: "GET",
dataType: "json",
url: url,
data: data,
success: success,
});
getJSON 相当于是以上内容的缩写。
6.1 语法格式
$.getJSON(url [,data] [,success(data, textStatus, jqXHR)])
7. getScript
$.ajax({
url: url,
dataType: "script",
success: success,
});
getScript 相当于是以上内容的缩写。
7.1 语法格式
$.getScript( url [, success(script, textStatus, jqXHR) ] )
扫一扫
3831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
