蓝桥杯Web备赛
如想看其他web知识点，可以在蓝桥杯web专栏去找找看哦
文章目录
前言
如需要获取更多学习和备赛资源的话可以去 蓝桥杯官网 找找
JQuery知识大全
考题类型：代码填空，场景实战
1、基本选择器
- 元素选择器
jQuery对象.css("属性名", "属性值"); // 例如修改 width、height 等
- ID 选择器
$("#id名");
$().css({"属性1":"属性值1","属性2":"属性值2"...})//多个属性值要修改时
- 类选择器
$(".id名")
$().css({"属性1":"属性值1","属性2":"属性值2"...})//多个属性值要修改时
- 群组选择器
$("选择器1, 选择器2,...");
- 通配符选择器
$("*");
2、层次选择器
- 后代选择器
$("M N");
//其中 N 是 M 的后代元素 后代元素（包含儿子、孙子、重孙子等）。
- 子代选择器
$("M>N");// 对指定标签的子代元素进行操作。
- 兄弟选择器
$("M~N"); //能够选择指定元素M后面的所有兄弟元素。
- 相邻选择器
$("M+N"); // 选择下一个兄弟节点 N
3、属性选择器
| 选择器 | 说明 |
|---|---|
E[attr] | 对带有 attr 属性的 E 元素进行操作。 |
E[attr="value"] | 对 attr 值等于 value 的 E 元素进行操作。 |
E[attr !="value"] | 对 attr 值不等于 value 的 E 元素进行操作。 |
E[attr ^="value"] | 对带有 attr 属性，其属性值以 value 字符串开头的 E 元素进行操作。 |
E[attr $="value"] | 对带有 attr 属性，其属性值以 value 字符串结尾的 E 元素进行操作。 |
E[attr *="value"] | 对带有 attr 属性，其属性值包含 value 字符串的 E 元素进行操作。 |
E[attr ~="value"] | 对带有 attr 属性，其属性值为 value 或者包含 value 的 E 元素进行操作。 |
| `E[attr | =“value”]` |
4、伪类选择器
- 位置伪类选择器
常见的位置伪类选择器如下所示：
| 选择器 | 说明 |
|---|---|
| :first | 选取指定元素的第一个该元素。 |
| :last | 选取指定元素的最后一个该元素。 |
| :odd | 选取指定元素序号为奇数的所有该元素。 |
| :even | 选取指定元素序号为偶数的所有该元素。 |
| :eq(n) | 选取指定元素的第 n 个该元素（注意：下标从0开始计数）。 |
| :lt(n) | 选择指定元素中小于 n 的所有该元素。 |
| :gt(n) | 选取指定元素中大于 n 的所有该元素。 |
- 可见性伪类选择器
可见性伪类选择器如下所示：
| 选择器 | 说明 |
|---|---|
| :visible | 选取所有可见元素。 |
| :hidden | 选取所有不可见元素。 |
- 内容伪类选择器
内容伪类选择器如下所示：
| 选择器 | 说明 |
|---|---|
| :contains(text) | 对包含指定 text 文本的元素进行操作。 |
| :has(selector) | 对包含指定选择器的元素进行操作。 |
| :parent | 对含有文本或者子元素的元素进行操作。 |
| :empty | 对空元素进行操作。 |
<script>
$(function () {
$("td:contains('1')").css("color", "#ade498");// 给 td 元素中包含内容 1 的元素设置绿色字体。
$("tr:has(td)").css("background-color", "#e1ffc2");// 给包含 td 元素的 tr 元素设置背景颜色。
$("td:empty").append("10"); // 在指定元素里添加内容
$("td:parent").append("❤")// 给是父亲的 td 元素添加文字内容。
});
</script>
- 表单伪类选择器
表单伪类选择器如下所示：
| 选择器 | 说明 |
|---|---|
| :input | 选取所有 input 元素。 |
| :button | 选取所有 input 类型为 button 的元素。 |
| :submit | 选取所有 input 类型为 submit 的元素。 |
| :reset | 选取所有 input 类型为 reset 的元素。 |
| :text | 选取所有 input 类型为 text 的元素。 |
| :textarea | 选取所有多行文本框。 |
| :password | 选取所有 input 类型为 password 的元素。 |
| :radio | 选取所有 input 类型为 radio 的元素。 |
| :checkbox | 选取所有 input 类型为 checkbox 的元素。 |
| :image | 选取所有图片域。 |
| :file | 选取所有 input 类型为 file 的元素。 |
- 表单对象属性选择器
表单对象属性选择器如下所示：
| 选择器 | 说明 |
|---|---|
| :checked | 选取所有被选中的表单元素。 |
| :selected | 选取被选中的表单元素项。 |
| :enabled | 选取所有可用的表单元素。 |
| :disabled | 选取所有不可用的表单元素。 |
| :read-only | 选取只读权限的表单元素。 |
| :focus | 选取所有获得焦点的表单元素。 |
5、JQuery中的事件
- 页面事件
语法：
jQuery 对象.事件名(事件处理函数)
例如：
$(document).ready(function () {});//ready函数类似于 JavaScript 中的 onload 事件，但是它文档中引入的外部图片、 css 或者 js 文件就算没完成加载，该事件也可以执行
// 可以简写成
$(function () {});
- 鼠标事件
鼠标事件有以下几种：
| 事件 | 说明 |
|---|---|
| click | 单击左键事件。 |
| mouseover | 鼠标移入事件。 |
| mouseout | 鼠标移出事件。 |
| mousedown | 鼠标按下事件。 |
| mouseup | 鼠标松开事件。 |
| mousemove | 鼠标移动事件。 |
-
键盘事件
-
表单事件
-
滚动事件
-
绑定事件
在 jQuery 中，我们使用 on 或 bind 方法可以绑定一个或者多个事件。
其语法格式为：
jQuery对象.on(事件类型, 事件处理函数);
或
jQuery对象.bind(事件类型, 事件处理函数);
- 合成事件
合成事件就是一个事件来代表多个事件，例如：
我们可以使用 hover 方法来给元素同时绑定鼠标移入和移出的处理函数。即：
hover = mouseover + mouseout
其语法结构为：
jQuery对象.hover(mouseover的事件处理函数, mouseout的事件处理函数);
函数 1 是鼠标移入事件会触发的处理函数；函数 2 是鼠标移出事件会触发的处理函数。
- 自定义事件
其语法格式为：
jQuery对象.on(事件类型, 处理函数); // bind 也可以
jQuery对象.trigger(事件类型);
$("<标签名></标签名>");// 直接创建元素节点
$("<标签名>文本内容</标签名>");// 创建带文本的元素节点
$("<标签名 属性='属性值'>文本内容</标签名>");// 创建带属性的元素节点
6、DOM操作
元素的插入
- 子级插入方法，包括
prepend()、prependTo()、append()、appendTo()。 - 同级插入方法，包括
before()、insertBefore()、after()、insertAfter()。
prepend() 与 prependTo() 是在元素子级的开头插入元素。
prepend 方法的语法格式为：
// 在 A 元素的子级最前面的位置插入B
$(A).prepend(B);
prependTo 方法的语法格式为：
// 在 A 元素的子级最前面的位置插入B
$(B).prependTo(A);
prepend() 与 prependTo() 起到的作用是一样的，只不过使用格式是颠倒的。
append() 与 appendTo() 是在元素子级的尾部插入元素。
append 方法的语法格式为：
// 在 A 元素子级的最后面位置追加 B
$(A).append(B);
appendTo 方法的语法格式为：
// 在 A 元素子级的最后面位置追加 B
$(B).appendTo(A);
append 和 appendTo 起到的作用也是一样的，只不过使用格式是颠倒的。
before() 与 insertBefore() 是在该元素的前面插入元素。
before 方法的语法格式为：
// 在 A 的前面插入 B
$(A).before(B);
insertBefore 方法的语法格式为：
// 在 A 的前面插入 B
$(B).insertBefore(A);
before 和 insertBefore 方法的作用也是相同的，只是使用格式上是颠倒的。
fter() 与 insertAfter() 是在元素的后面插入元素。
after 方法的语法格式为：
// 在 A 的后面插入 B
$(A).after(B);
insertAfter 方法的语法格式为：
// 在 A 的后面插入 B
$(B).insertAfter(A);
after 和 insertAfter 方法的作用也是相同的，只是使用格式上是颠倒的。
元素的删除
$().remove();// 将指定的元素及其子元素删除。
$().empty();// 清空指定元素的后代元素和内容的。
元素的替换
replaceWith 方法和 replaceAll 方法都可以用来把指定元素替换成其他元素，只是在使用格式上有些差别。
其语法格式为：
// 将 A 替换为 B
$(A).replaceWith(B);
// 将 A 替换为 B
$(B).replaceAll(A);
元素的遍历
在 jQuery 中，each 方法是用于元素遍历的。
其语法格式为：
$().each(function (index, element) {});
attr 方法可以用来获取指定元素的属性值，也可以用来设置指定属性的属性值。
其语法格式为：
jQuery对象.attr("属性名"); // 获取属性
jQuery对象.attr("属性名", "属性值"); // 修改属性
removeAttr 方法可以删除指定元素的某个属性。
其语法格式为：
jQuery对象.removeAttr("属性名");
7、样式操作
这里给大家介绍四种样式操作的方法，分别是：
- css 方法
css 方法可以用来获取指定属性的属性值，也可以用来设置属性值。
// 获取指定属性的属性值
$().css("属性名");
// 设置属性值
$().css("属性名", "属性值");
- addClass 方法
addClass 方法是用来添加类选择器的。
其使用格式为：
$().addClass("类名");
- removeClass 方法
removeClass 方法可以用来移除已有的类选择器。
其语法格式为：
$().removeClass("类名");
- toggleClass 方法
toggleClass 方法是用来切换类选择器的。
其使用格式为：
$().toggleClass("类名");
8、内容操作
- html 方法
html 方法可用来获取 HTML 文档中指定元素内部的元素标签和标签中的内容，也可以给元素添加内容。
其语法格式为：
// 获取元素内容
$().html();
// 设置元素内容
$().html("内容");
- text 方法
text 方法可以获取指定标签里的文本，也可以为指定标签添加文本。
其语法格式为：
// 获取指定标签中的文本
$().text();
// 给指定标签设置文本
$().text("内容");
- val 方法
val 方法用于获取表单元素的值，也可以给表单元素设置值。
// 获取表单元素的值
$().val ();
// 给表单元素设置值
$().val ("内容");
小总结
- 节点的创建：使用
$()来创建元素节点。 - 元素的插入：分为子级插入和同级插入。
- 子级插入方法，包括
prepend()、prependTo()、append()、appendTo()。 - 同级插入方法，包括
before()、insertBefore()、after()、insertAfter()。
- 子级插入方法，包括
- 元素的删除：使用
remove()或者empty()方法可以删除元素。 - 元素的替换：使用
replaceWith()或者replaceAll()可以替换元素。 - 元素的遍历：使用
each可以遍历元素。 - 属性操作：使用
attr()设置属性、获取属性和使用removeAttr删除属性。 - 样式操作：使用
css()获取样式，使用addClass()添加样式，使用removeClass()移除样式，使用toggleClass()切换类选择器。 - 内容操作：使用
html()获取指定元素内部的元素标签和标签中的内容 ，使用text()获取指定标签里的文本或者给指定标签添加文本，使用val()获取表单元素的值或者给表单元素设置值。
9、动画
显示与隐藏
其语法格式为：
//显示
$().show(speed, easing, callback);
//隐藏
$().hide(speed, easing, callback);
//speed 可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、normal、fast 等值。
//easing 可选参数，用于设置动画在不同点上元素的速度，其默认值是 `swing`，表示开头和结尾的速度慢，中间的速度快。
//callback 可选参数，是方法执行完成后，执行的一个函数。
注意：show() 只适用于通过 jQuery 方法和 CSS 中 display 属性隐藏的元素，不适用于通过 visibility 隐藏的元素。
淡入与淡出
其语法格式为：
// 淡入
$().fadeIn(speed, easing, callback);
// 淡出
$().fadeOut(speed, easing, callback);
//speed 可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、normal、fast 等值。
//easing 可选参数，用于设置动画在不同点上元素的速度，其默认值是 swing，表示开头和结尾的速度慢，中间的速度快。
//callback 可选参数，是方法执行完成后，执行的一个函数。
自定义动画
其语法格式为：
$().animate({ style }, speed, callback);
队列动画
队列动画其语法格式为：
$().animate().animate()....animate();
回调函数
回调函数的格式如下：
$().animate({ style }, speed, callback);
停止动画
stop 方法的语法格式为：
$().stop(stopAll, goToEnd);
//stopAll 代表是否停止所有动画，其取值为 true 或者 false,当为 true 时代表停止当前及后面的所有动画，当为 false 时代表只停止当前动画。
// goToEnd 代表停止动画后是否跳转到最后的动画效果，其取值也是布尔类型。 true 时，停止后跳转，为 false 时则不跳转。
延迟动画
其语法格式为：
$().delay(speed);
- 隐藏（hide）与显示（show）
- 淡入（fadeIn）与淡出（fadeOut）
- 自定义动画（animate）
- 队列动画（多个 animate）
- 回调函数（动画执行完毕以后的回调）
- 停止动画（stop）
- 延迟动画（delay）
10、遍历
-
遍历祖先元素
-
parent方法是用来查找指定元素的父元素的。 -
parents方法是用来查找指定元素的所有祖先元素的。
-
-
遍历兄弟元素
-
前向兄弟元素查找
$().prev(); // 查找指定元素前向第一个元素 $().preAll(); // 查找指定元素前向所有元素 -
后向兄弟元素查找
$().next(); // 查找指定元素的第一个后向兄弟元素 $().nextAll(); // 查找指定元素的所有后向兄弟元素 -
所有兄弟元素查找
$().siblings();
-
-
遍历后代元素
-
jQuery对象.children();// children 方法 jQuery对象.find(selector);// find 方法 //children 方法和 find 方法都是用来查找元素的子元素的。 //区别是 children 只能获取元素的儿子节点，而 find 方法可以获取元素的所有符合条件的后代节点。
-
-
过滤元素
-
类名过滤
在 jQuery 中使用 hasClass 方法可以用来判断指定元素是否包含该类名的元素。
其使用格式为：
$().hasClass("类名"); -
下标过滤
其语法格式为：
$().eq(n);// jQuery 中使用 eq 方法可以实现下标过滤。 -
判断过滤
其使用格式为：
$().is(selector);// 在 jQuery 中可以使用 is 方法来判断指定元素中是否有符合条件的存在。 //is 方法返回的也是布尔类型的值，符合条件返回 true，反之 false。 -
反向过滤
其使用格式为：
$().not(selector|function)// jQuery 中使用 not 方法可以选择不符合条件的元素。
-
小总结
- 遍历祖先元素：parent 和 parents 方法可以用来查找指定元素的祖先元素。
- 遍历兄弟元素：有三种兄弟元素查找的方法，分别为
- 前向兄弟元素查找 prev、preAll。
- 后向兄弟元素查找 next、nextAll。
- 所有兄弟元素查找 siblings()。
- 遍历后代元素：children 和 find。
- 过滤元素：有四种过滤方法，分别为
- 类名过滤 hasClass。
- 下标过滤 eq。
- 判断过滤 is。
- 反向过滤 not。
11、AJAX
-
load 方法
其语法格式为：
$().load(url, data, callback); // load() 方法让 AJAX 去请求服务器，并从中获得数据，最后将获得的数据放入到指定的元素中。 // url 是被加载页面的地址，它是必选参数。 // data 是发送到服务器的数据，它是可选参数。 // callback 是请求完成后的回调函数，它是可选参数。 // 这里请注意，load 方法中的回调函数有三个额外的参数，以下所示： // response：服务器响应的结果数据。 // status：服务器响应的状态。 // xhr：XMLHttpRequest 对象。 -
get 方法
其语法格式为：
$.get(url, data, callback(data, status, xhr), dataType); // url：是请求的 url，它是必须参数。 // data：是发送到服务器的数据，它是可选参数。 // callback：是当请求成功时的回调函数，该方法包含三个参数，data 是请求的结果数据，status 是包含请求的状态，xhr 是 // XMLHttpRequest 对象。 // dataType：是服务器返回的数据格式，如 xml、html、json 等，默认的 jQuery 会智能判断它的类型。 -
post 方法
前面我们学习了
get方法，从练习中我们可以知道用 GET 请求指定页面，可以返回实体主体，它的请求会被缓存。post方法是用的 POST 请求，它向指定资源提交数据进行处理请求，该请求不会被缓存。接下来我们看看 jQuery 中 post 方法的应用吧！
post方法的使用格式如下：
$.post(url, data, callback(data, textStatus, jqXHR), dataType);
//url：是请求的 url，它是必须参数。
//data：是发送到服务器的数据，它是可选参数。
//callback：是当请求成功时的回调函数，该方法包含三个参数，data是请求的结果数据，textStatus是包含请求的状态，jqXHR是 XMLHttpRequest对象。
//dataType：是服务器返回的数据格式，如 xml、html、json 等。
使用 get 方法时，发送的数据内容会显示到 URL 上，而 post 方法发送的数据则不会显示。
-
ajax 方法
ajax方法也是向服务器请求数据的，在方法内部我们可以指定是使用 POST 请求还是使用 GET 请求。在日常开发中ajax方法是最常用的。ajax方法的语法格式为：$.ajax({ 配置项 });参数 类型 描述 url String 发送请求地址，默认为当前页面地址。 type String 请求数据的方式（POST 或 GET），默认为 GET。 timeout Number 设置请求超时的时间，其单位为毫秒。 data Object 或 String 发送到服务器的数据。 dataType String 服务器返回的数据类型。 beforeSend Function 发送请求前可以修改的 XMLHttpRequest 对象的函数。 complete Function 请求完成后的回调函数，这里的回调函数无论请求成功或者失败都会被调用。 success Function 请求成功后的回调函数。 error Function 请求失败后被调用的函数。 contentType String 发送信息至服务器时内容的编码形式。 async Boolean 设置请求方式，当值为 true 时，所有请求为异步请求；当值为 false 时，所有请求为同步请求，默认值为 true。 cache Boolean 设置浏览器是否缓存当前页面，当值为 true 时浏览器会缓存该页面，反之不会，默认值为 false。 -
getJSON
在前面我们学了
ajax方法，当我们要向服务器发送一个 GET 请求并获取 JSON 类型的数据时，写法如下：$.ajax({ type: "GET", dataType: "json", url: url, data: data, success: success, }); -
getScript
getScript也很容易理解，拆分成 get 和 Script 来看，get 是GET请求，Script 是JavaSctip文件，所以合在一起就是使用一个GET请求从服务器加载并执行一个JavaScript文件。其使用格式如下所示：
$.getScript( url [, success(script, textStatus, jqXHR) ] )
总结
这是我这两天学习到的有关JQuery的知识，但是就是感觉学了还不会很快速的上手使用起来，还是得多加练习啊多加练习
而且现在的就业形势好难啊好难 很多人就选择去考研 好卷啊好卷 但是咱也不能放弃！！！
“ 要相信，所有的不美好都是为了迎接美好，所有的困难都会为努力让道！ ”
2996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
