【一】什么是jQuery
1）概述
- 是一个轻量的、兼容多浏览器的JavaScript的第三方库
- 其内部封装了JS代码、能通过更少的代码操作DOM对象
- 提高了代码效率、简化了代码量
2）优势
- 轻量级的JS框架
- 丰富的DOM选择器
- 链式表达式
- 事件、样式、动画支持
- Ajax操作支持
- 跨浏览器兼容
- 插件扩展开发
3）jQuery配置
-
压缩
4）引入方式
1.方式一
-
将 script 标签添加到 head 标签内部
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
2.方式二
-
将已压缩的配置地址里的内容复制到JS文件里，再将这个JS文件添加到 head 标签内部
<script src="jquery.js"></script>
【二】基本选择器
// 元素选择器
$('元素名称')
// ID选择器
$('#ID值')
// 类选择器
$('.类名')
// 属性选择器
$('[属性元素]')
// 组合选择器：与css语法一致
// 关系选择器：与css语法一致
【三】分组与嵌套
1）分组
-
使用逗号将多个选择器组合在一起，可以同时选择匹配这些选择器的所有元素
$('.selector1, .selector2').doSomething();
2）嵌套
-
在一个选择器内部嵌套另一个选择器，用于表示某个选择器的子元素或特定关系的元素
$('parent').find('.child').doSomething();
【四】基本筛选器
// 语法
$("元素：筛选器")
| 语法 | 功能 |
|---|---|
| first | 匹配第一个匹配元素 |
| last | 选择最后一个匹配元素 |
| even | 选择索引为偶数的匹配元素（从索引开始） |
| odd | 选择索引为计数的匹配元素（从索引开始） |
| eq(index) | 选择索引为指定值index的元素（从索引开始） |
| gt(index) | 选择索引大于指定值index的元素（索引从开始） |
| lt(index) | 选择索引小于指定值index的元素（索引从开始） |
| header | 选择所有标题元素（例如h1、h2等） |
| animated | 选择当前正在执行动画的元素 |
| focus | 选择当前获得焦点的元素 |
| contanins(text) | 选择包含指定文本text的元素 |
| empty | 选择没有子元素或文本的空元素 |
| parent | 选择有子元素或文本的元素 |
【五】属性选择器
| 语法 | 功能 | 案例 |
|---|---|---|
| $("[attribute]") | 选择具有特定属性的元素 | 选择所有具有"src"属性的图片元素:$("img[src]") |
| $("[attribute=value]") | 选择具有特定属性值的元素 | 选择所有"href"属性值为"https://example.com"的链接元素:$("a[href='https://example.com']") |
| $("[attribute*=value]") | 选择包含特定属性值的元素 | 选择所有"src"属性值包含"image"的图片元素:$("img[src*='image']") |
| $("[attribute^=value]") | 选择具有特定属性值开头的元素 | 选择所有"href"属性值以"https://"开头的链接元素:$("a[href^='https://']") |
| $("[attribute$=value]") | 选择具有特定属性值结尾的元素 | 选择所有"src"属性值以".jpg"结尾的图片元素:$("img[src$='.jpg']") |
| $("[attribute^=value][attribute$=value]")[attribute$=value]") | 选择具有特定属性值开头且以特定属性值结尾的元素 | 选择所有"src"属性值以"images/"开头且以".jpg"结尾的图片元素:("img[src^='images/'][src$='.jpg']" |
【六】jQuery操作CSS
| 语法 | 功能 |
|---|---|
| .addClass() | 添加CSS类名 |
| .removeClass() | 移除CSS类名 |
| .toggleClass(） | 切换CSS类名 |
| .css("参数1","参数2"） | 设置CSS属性 |
| .css("参数"） | 获取CSS属性 |
1）添加CSS类名（addClass）
- 添加一个或多个 CSS 类到元素中
// 在id为d1的元素上添加类名cl1
$('#d1').addClass('cl1')
2）移除CSS类名（removeClass）
- 从元素中移除一个或多个 CSS 类。
// 在id为d1的元素上删除类名cl1
$('#d1').removeClass('cl1')
3）切换CSS类名（toggleClass）
- 有则删除，无则添加
// 在id为d1的元素上切换cl1
$("#d1").toggleClass("cl1");
4）设置CSS属性（css）
- 第一个参数：CSS属性的名称
- 第二个参数：CSS属性的值
// 在id为d1的元素上添加 style="color: red;"
$("#d1").css("color","red")
5）获取CSS属性（css）
- 参数：要获取的CSS属性名称
// 在id为d1的元素上获取颜色值
ar color=$("#d1").css("color")
// 'rgb(255, 0, 0)'
【七】jQuery位置操作
| 语法 | 功能 |
|---|---|
| .offset() | 相对于窗口，用于获取或设置元素相对于文档的偏移值 |
| .position() | 相对于父标签，用于获取元素相对于其最近的具有定位祖先元素的偏移值 |
| .scrollTop() | 返回或设置元素垂直或方向的滚动条偏移值 |
| .scrollLeft() | 返回或设置元素水平或方向的滚动条偏移值 |
| .offsetParent() | 用于获取元素的最近的具有定位祖先元素 |
| .height() | 返回或设置元素的内容区域的高度 |
| .width() | 返回或设置元素的内容区域的宽度 |
1）.offset()
- 相对于浏览器窗口，用于获取或设置元素相对于文档的偏移值
- 如果不传递任何参数，则返回一个包含 left 和 top 属性的对象，表示元素相对于文档左上角的位置
- 如果传递参数，可以设置元素的偏移值
2）.position()
- 相对于父标签，用于获取元素相对于其最近的具有定位（positioned）祖先元素的偏移值
- 返回一个包含 left 和 top 属性的对象，表示元素相对于定位祖先的位置
3）.scrollTop() 和 .scrollLeft()
不加参数就是获取，加参数就是设置值
- 用于获取或设置元素的滚动条的垂直或水平偏移值
- .scrollTop()：返回或设置元素垂直方向的滚动条偏移值
- .scrollLeft()：返回或设置元素水平方向的滚动条偏移值
// 位置操作,获取距离顶端的位移量
$(window).scrollTop()
// 实时监测距离，超过600显示内容
$(window).scroll(() => {
if ($(window).scrollTop() > 600) {
alert('超过600了 架不住了')
}
})
4）.offsetParent()
- 用于获取元素的最近的具有定位（positioned）祖先元素
- 定位祖先是指设置了位置属性（position）为 relative、absolute 或 fixed 的祖先元素。
5）.height() 和 .width()
- 用于获取或设置元素的高度和宽度
- .height()：返回或设置元素的内容区域的高度
- .width()：返回或设置元素的内容区域的宽度
【八】jQuery尺寸操作
| 语法 | 功能 |
|---|---|
| .height() 和 .width() | 用于获取或设置元素的高度和宽度 |
| .innerHeight() 和 .innerWidth() | 用于获取元素的内部高度和宽度，包括内容区域和内边距 |
| .outerHeight() 和 .outerWidth() | 用于获取元素的外部高度和宽度，包括内容区域、内边距和边框，但不包括外边距 |
| .outerHeight(true) 和 .outerWidth(true) | 用于获取元素的完整的外部高度和宽度，包括内容区域、内边距、边框和外边距 |
1）.height() 和 .width()
- 这两个方法用于获取或设置元素的高度和宽度
- 无参：分别返回元素的内容区域的高度和宽度
- 一个参数：可以设置元素的高度和宽度
2）.innerHeight() 和 .innerWidth()
- 用于获取元素的内部高度和宽度，包括内容区域和内边距
- 返回的值不包括边框和外边距
3）.outerHeight() 和 .outerWidth()
- 用于获取元素的外部高度和宽度，包括内容区域、内边距和边框，但不包括外边距
- 可通过传递一个布尔值参数来指定是否包含边框，默认false
4）.outerHeight(true) 和 .outerWidth(true)
- 用于获取元素的完整的外部高度和宽度，包括内容区域、内边距、边框和外边距
【九】jQuery文本操作
1）JS版本
| 语法 | 功能 |
|---|---|
| innerText | 用于获取或设置指定元素及其所有后代元素的内容，会自动忽略HTML标签 |
| innerHTML | 用于获取或设置指定元素的HTML内容，包括HTML标签 |
1.innerText
-
用于获取或设置指定元素及其所有后代元素的内容，会自动忽略HTML标签
-
即获取标签中间的文本内容
// 获取id=d1的标签 var element=documnet.getElementById("d1"); // 获取标签内的内容 var text=element.innerText;
2.innerHTML
-
用于获取或设置指定元素的HTML内容，包括HTML标签
-
即获取标签内部的标签内容
// 获取id=d1的标签 var element=documnet.getElementById("d1"); // 获取标签内的标签内容 var text=element.innerHTML;
2）jQuery版本
| 语法 | 功能 |
|---|---|
| .text() | 获取文本内容 |
| .html() | 获取HTML内容 |
| .val() | 获取表单元的值 |
| .append() | 在每个匹配元素内部末尾插入内容 |
| .prepend() | 在每个匹配元素内部开头插入内容 |
| .after() | 在每个匹配元素之后插入内容 |
| .before() | 在每个匹配元素之前插入内容 |
1. .text()
// 获取文本内容
var rext=$(".cl1").text();
// 设置文本内容
$(".cl2").text("写入的内容")
2. .html()
// 获取HTML内容
var html=$(".cl1").html();
// 设置HTML内容
$(".cl2").html("<p>写入的内容</p>")
3. .val()
// 获取表单元素的值
val value=$("#d1").val();
$("#d1").val()
// 设置表单元素的值
$("#d2").val("新表单元值");
4. .append()
$(".d1").append("<span>元素内部末尾插入内容</span>");
5. .prepend()
$(".d1").prepend("<span>元素内部开头插入内容</span>");
6. .after()
$(".d1").after("<div>元素之后插入内容</div>");
7. .before()
$(".d1").before("<div>元素之前插入内容</div>");
【十】jQuery属性操作
| 语法 | 功能 |
|---|---|
| attr(name, value) | 设置元素属性值 |
| attr(name) | 获取元素属性值 |
| removeAttr(name) | 移除元素属性值 |
1）attr(name, value)
- 使用该方法可以设置元素的属性值。
- 将属性名称和属性值作为参数传递给该方法，即可设置指定元素的属性值
// 设置元素的属性值 class="cl1"
$("#d1").attr("class","cl1")
2）attr(name)
- 使用该方法可以获取元素的属性值
- 传入属性名称作为参数，即可获取指定元素的属性值
// 获取元素的class属性值
$("#d1").attr("class")
3）removeAttr(name)
- 使用该方法可以移除元素的属性
- 传入属性名称作为参数，即可移除指定元素的属性
// 移除元素的属性
$("#d1").removeAttr("class")
【十一】针对checked的特殊方法（prop）
- 用于获取或设置元素属性值的一种方法
1）获取属性值
$(selector).prop(propertyName)
// selector:是一种选择器，用于选取目标元素
// propertyName:获取的属性名
// 获取单选框的选中状态
var isChecked=$('input[type="radio"]').prop("checked")
// 获取复选框的选中状态
var isChecked=$('input[type="checkbox"]').prop("checked")
2）设置属性值
$(selector).prop(propertyName,value)
// selector：是一种选择器，用于选取目标元素
// propertyName：设置的属性名
// value：设置的属性值
// 设置单选框为选中状态
$('input[type="radio"]').prop("checked", true);
// 设置复选框为未选中状态
$('input[type="checkbox"]').prop("checked", false);
3）小结
- 需要注意的是，在实际使用时，
- selector 应该根据具体情况指定合适的选择器来选取目标元素
【十二】jQuery文档处理
| 语法 | 功能 |
|---|---|
| $(selector) | 选取匹配的元素，并返回一个jQuery对象 |
| $(selector).prepend(content) | 用于在目标元素的内部开头位置插入内容 |
| $(selector).append(content) | 用于将指定的内容追加到每个匹配元素的末尾 |
| $(selector).appendTo() | 用于将当前元素插入到目标元素内部末尾的方法 |
| $(selector).insertAfter(target) | 用于将目标元素插入到指定目标元素的后面 |
| $(selector).insertBefore(content) | 用于将选中的元素插入到目标元素的前面 |
| $(selector).before(content) | 用于在目标元素前面插入内容 |
| $(selector).after(content) | 用于将选中的元素插入到目标元素的后面 |
| $(selector).remove(content) | 用于删除选中的元素以及其子元素 |
| $(selector).empty(content) | 用于清空选中元素的所有子元素 |
1）$(selector)
- 使用选择器来选取匹配的元素，并返回一个jQuery对象。
- 可以通过该对象执行各种操作
// 选取页面上所有的 <p> 元素
var elements = $('p');
2）$(selector).prepend(content)
- 内部头部追加
- 用于在目标元素的内部开头位置插入内容
$(selector).prepend(content);
// selector：选择器，表示要选中的目标元素
// content：要插入的内容，可以是 HTML 字符串、DOM 元素、或者其他 jQuery 对象
// 插入单个内容
$('div').prepend('<p>插入的内容</p>');
// 插入多个内容
$('div').prepend('<p>插入的内容1</p>').prepend('<p>插入的内容2</p>');
3）$(selector).append(content)
- 内部尾部追加
- 将指定的内容追加到每个匹配元素的末尾
$('div').append('<p>插入的内容</p>');
4）$(selector).appendTo()
- 目标元素内容尾部插入
- 用于将当前元素插入到目标元素内部尾部的方法
$(currentElement).appendTo(targetElement);
// currentElement：要插入的当前元素，可以是 HTML 字符串、DOM 元素、或者其他 jQuery 对象
// targetElement：目标元素，表示要将当前元素插入到该元素内部的末尾位置
$('<p>插入的内容</p>').appendTo('div');
5）$(selector).insertAfter(target)
- 将目标元素插入到指定目标元素的后面
- 用于将目标元素插入到指定目标元素的后面
$(selector).insertAfter(target);
// selector：选择器，表示要选中的目标元素
// target：目标元素，可以是选择器、DOM 元素或者 jQuery 对象，表示要将目标元素插入到它后面
// 插入单个元素
$('<p>插入的内容</p>').insertAfter('div');
// 插入多个元素
$('<p>插入的内容</p>').insertAfter('div').insertAfter('span');
6）$(selector).insertBefore(content)
- 用于将选中的元素插入到目标元素的前面
$(content).insertBefore(selector);
// content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象
// selector：选择器，表示目标元素
// 所有元素前插入相同的元素
$('<p>插入的内容</p>').insertBefore('div');
// 多个目标元素前插入相同的元素
$('<p>插入的内容1</p>').insertBefore('div').insertBefore('span');
7）$(selector).before(content)
- 用于在目标元素前面插入内容
$(selector).before(content);
// selector：选择器，表示要选中的目标元素
// content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象
// 所有元素前插入相同的元素
$('<p>插入的内容</p>').before('div');
// 多个目标元素前插入相同的元素
$('<p>插入的内容</p>').before('div').before('span');
8）$(selector).after(content)
- 用于将选中的元素插入到目标元素的后面
$(content).insertAfter(selector);
// content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象
// selector：选择器，表示目标元素
// 将一个新的 <p> 元素插入到页面上的所有 <div> 元素之后
$('<p>插入的内容</p>').insertAfter('div');
// 如果要在多个目标元素后插入相同的元素，可以通过链式调用来连续进行插入
$('<p>插入的内容</p>').insertAfter('div').insertAfter('span');
9）$(selector).remove(content)
- 用于删除选中的元素以及其子元素
$(selector).remove(content);
// selector：选择器，表示要选中的目标元素
// content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象
// 删除页面上所有的 <p> 元素及其子元素
$('p').remove();
// 移除具有 class1 和 class2 类名的所有元素
$('.class1, .class2').remove();
10）$(selector).empty(content)
- 用于清空选中元素的所有子元素
$(selector).empty(content);
// selector：选择器，表示要选中的目标元素
// content：要插入的内容，可以是 HTML 字符串、DOM 元素或者 jQuery 对象
// 清空上所有 <div> 元素的子元素
$('div').empty();
// 清空所有具有 class1 和 class2 类名的元素的子元素
$('.class1, .class2').empty();
【十三】补充
| 语法 | 功能 |
|---|---|
| $(selector).html() | 获取或设置元素的 HTML 内容。如果不提供参数，则返回第一个匹配元素的 HTML 内容 |
| $(selector).text() | 获取或设置元素的文本内容。如果不提供参数，则返回第一个匹配元素的文本内容 |
| $(selector).val() | 获取或设置表单元素的值 |
1）$(selector).text()
- 获取或设置元素的文本内容。如果不提供参数，则返回第一个匹配元素的文本内容
- 如果提供参数，则将指定的文本内容设置给所有匹配元素
// 获取元素的 HTML 内容
var htmlContent = $('h1').html();
// 设置元素的 HTML 内容
$('div').html('<p>This is a paragraph.</p>');
2）$(selector).val()
- 获取或设置元素的文本内容。如果不提供参数，则返回第一个匹配元素的文本内容；
- 如果提供参数，则将指定的文本内容设置给所有匹配元素
// 获取元素的文本内容
var textContent = $('p').text();
// 设置元素的文本内容
$('div').text('This is some text.');
3） $(selector).val()
- 获取或设置表单元素的值
- 如果不提供参数，则返回第一个匹配元素的值
- 如果提供参数，则将指定的值设置给所有匹配元素
// 获取输入框的值
var inputValue = $('input[type="text"]').val();
// 设置输入框的值
$('input[type="text"]').val('New Value');