45. jQuery

news/2024/12/19 1:54:52/文章来源:https://www.cnblogs.com/hbutmeng/p/18608944

1. jQuery介绍

1.1 概念

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使比如 HTML 文档遍历和操作、事件处理、动画和 Ajax 通过易于使用的 API 变得更加简单，该 API 可以在多种浏览器。结合了多功能性和可扩展性，jQuery 改变了数百万人的编写方式 JavaScript 的 JavaScript 中。

类比于python中的模块，前端称之为"类库"

1.2 导入方式

将网页代码全部复制，在项目中新建jQuery文件，代码粘贴到文件中.

在HTML文件中使用script标签导入

2. 选择器

2.1 基本选择器

$("p")        标签选择器
$("#d1")        id选择器
$(".c1")        类选择器
$("div, #d1, .c1")    选择器组合：通过逗号分隔多个选择器，同时选择多个元素
$("p#d1")        配合使用：找到p标签下含有id为d1的选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><div id="d1" style="height: 100px; width: 100px; background-color: deepskyblue"><p id="d2">帅年轻有为</p></div><p class="c1">Canada</p></body>
</html>

2.2 层级选择器

$("a b")        //后代选择器：a的所有后代b
$("a > b")        //子代选择器：a的所有子代b
$("a + b")        //相邻兄弟选择器：紧随a标签之后的兄弟标签b
$("a ~ b")        //通用兄弟选择器：a标签之后的所有兄弟标签b

3. 基本筛选器

:first        　　 //匹配第一个元素。
:last        　　　//匹配最后一个元素。
:even        　　　//匹配索引为偶数的元素（索引从0开始）。
:odd        　　　 //匹配索引为奇数的元素（索引从0开始）。
:eq(index)        //匹配索引为指定值index的元素（索引从0开始）。
:gt(index)        //匹配索引大于指定值index的元素（索引从0开始）。
:lt(index)        //匹配索引小于指定值index的元素（索引从0开始）。
:not(元素选择器)    //移除所有满足not条件的标签
:has(元素选择器)    //查看后代标签是否含有某个标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><ul id="d1"><li>001</li></ul><ul id="d2"><li>002</li></ul><ul id="d3"><li>003</li></ul><ul id="d4"><li>004</li></ul><ul id="d5"><li>005</li></ul><ul id="d6"><li>006</li></ul><ul id="d7"><li>007</li></ul><ul id="d8"><li>008</li></ul><ul id="d9"><li>009</li></ul>
</body>
</html>

4. 属性选择器

    <input type="text" name="avril"><p name="Toronto">Canada</p>

5. 表单筛选器

    <form action=""><input type="text"><input type="password"><input type="checkbox"><input type="checkbox" checked><input type="submit"><input type="button"><select name="" id="d1"><option value="">11</option><option value="" selected>22</option><option value="">33</option></select></form>

$('input[type="text"]') 筛选器简化 $(':text')

$(':checked') 　　由于checked为设置默认值，在示例代码中既能匹配到input标签，也能匹配到通过selected设置了默认值的option标签
$(':selected') 　　只会匹配到option标签

6. 筛选器方法

# 同级别往下查找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
# 同级别往上查找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
# 查找祖先标签
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil()
# 查找子代和兄弟标签
$("#id").children(); //子代标签
$("#id").siblings(); //兄弟标签(同级别上下所有标签)

7. jQuery操作标签

7.1 操作class

jQuery操作		DOM操作
addClass()	向标签添加一个或多个类名	classList.add()
removeClass()	从标签移除一个或多个类名	classList.remove()
hasClass()	检查标签是否包含指定的类名	classList.contains()
toggleClass()	不存在，添加类名；存在，移除类名	classList.toggle()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><p class="c1"></p>
</body>
</html>

7.2 操作css

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><p>11</p><p>22</p>
</body>
</html>

7.3 操作位置

.scrollTop() 和 .scrollLeft()

不加参数就是获取，加参数就是设置值
用于获取或设置元素的滚动条的垂直或水平偏移值。
.scrollTop() 返回或设置元素垂直方向的滚动条偏移值
.scrollLeft() 返回或设置元素水平方向的滚动条偏移值。

// 位置操作
//  获取左侧滚动条距离顶端的位移量
$(window).scrollTop()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><div style="height: 1000px;background-color: deepskyblue"></div><div style="height: 1000px;background-color: orange"></div><script>$(window).scroll(function () {if($(window).scrollTop() > 600){alert('超过600px，弹出提示框')}})
</script>
</body>
</html>

$(window).scroll(function () { ... })：这部分代码绑定了一个滚动事件处理器到窗口对象上。每当用户滚动窗口（无论是使用鼠标滚轮、触摸板滚动、页面内的滚动条还是其他方式），这个函数就会被触发。
if($(window).scrollTop() > 600)：这里使用了 jQuery 的 scrollTop() 方法来获取当前垂直滚动的位置。此方法返回的是文档已经滚动走过的距离（以像素为单位）。如果这个值大于600，则表示用户已经滚动超过了600像素。
alert('超过600px，弹出提示框')：当上述条件成立时，即用户滚动的距离超过600像素时，就会执行这行代码。alert() 函数会创建一个警告框，暂停用户的交互并显示消息“超过600px，弹出提示框”。

7.4 操作文本

	jQuery操作	DOM操作
文本内容	text()	innerText
HTML内容	html()	innerHTML
表单元素的值	val()	value
文件	转成JavaScript对象再操作	files

空括号为获取，括号里面有值为设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><p id="d1">帅年轻有为</p>
</body>
</html>

7.5 操作属性

[1] 概念

attr(name)            　　　　　　　　　　 获取属性值
attr(name,value)            　　　　　　 设置单个属性值
attr(name1:value1; name2:value2...)    设置多个属性值
removerAttr(name)            　　　　　　移除属性

[2] 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><p id="d1">帅年轻有为</p>
</body>
</html>

[3]jQuery 的 prop() 方法

jQuery 的 .prop() 方法用于获取或设置 DOM 元素的属性值。

用法：

获取属性值$(selector).prop(name)
设置属性值$(selector).prop(name, value)

prop() 应用于 DOM 属性，而不是 HTML 特性。
对于布尔属性（如 checked, selected, disabled），prop() 可以正确地处理它们的真/假状态。
prop() 是从 jQuery 1.6 开始引入的，在此之前的版本应该使用 attr() 方法来代替。
prop() 更适合处理DOM属性，而 attr() 更适合处理 HTML 特性。

attr()：用于获取或设置元素的 HTML 属性（即那些写在标签中的属性）。例如，<input id="myCheckbox" checked> 可以用 attr('checked') 来获取或设置 checked 属性。
prop()：用于获取或设置元素的属性（即那些由元素本身定义的属性）。例如，对于 checked 属性，prop() 更适合处理其状态，因为 checked 实际上是一个布尔属性，它表示复选框的选中状态。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><p>a <input type="checkbox"></p><p>b <input type="checkbox"></p><p>c <input type="checkbox" id="c1" checked></p><p>d <input type="checkbox" id="d1"></p>
</body>
</html>

在运行代码未点击任何选择框的情况下，$("#c1").attr("checked")为'checked'，$("#c1").prop("checked")为true

将默认选中c取消后，$("#c1").attr("checked")仍为'checked'，而$("#c1").prop("checked")为false

显然，对于布尔属性checked，prop()更适合判断其状态

7.6 操作文档

[1] 概念

添加到指定元素内部的后面
$(A).append(B)        //B追加到A
$(A).appendTo(B)        //A追加到B

添加到指定元素内部的前面
$(A).prepend(B)        //B添加到A内部的前面
$(A).prependTo(B)        //A添加到B内部的前面

添加到指定元素外部的后面
$(A).after(B)        //B添加到A外部的后面
$(A).insertAfter(B)        //A添加到B外部的后面

添加到指定元素外部的前面
$(A).before(B)        //B添加到A外部的前面
$(A).insertBefore(B)        //A添加到B外部的前面

移除和清空元素
remove()            //从DOM中删除所有匹配的元素
empty()            //删除匹配的元素集合中所有的子节点

[2] 代码

7.7 操作事件

[1] 概念

JavaScript绑定事件的两种方式：

(1)标签属性中绑定　　<p onclick="showDetail()">点击显示详细内容</p>

(2)标签对象绑定　　标签对象.onclick = function(){}

jQuery绑定事件的两种方式：

(1)使用.on()方法（从 jQuery 1.7 版本开始，推荐，首选）　　　

　　　$(selector).on(eventName, eventHandler)　　　　$('#d1').on('click',function(){})

(2)快捷方法（有时无法生效）　　　　　　　　　　　　　　　　　　　　　　　　

　　　jQuery对象.click(function(){})　　　　　　　　　　jQuery对象.change(function(){})

[2] 克隆事件

(1)只克隆标签不克隆事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><button id="d1">帅，年轻有为</button><script>$("#d1").click(function (){$("body").append($(this).clone())})</script>
</body>
</html>

点击第一个标签时，依次克隆标签，点击后续标签无法克隆

(2)克隆事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><button id="d1">帅，年轻有为</button><script>$("#d1").click(function (){$("body").append($(this).clone(true))})</script>
</body>
</html>

点击第一个标签和后续克隆的标签都可以克隆

[3] 悬浮事件

(1)鼠标悬浮上去和移开各触发一次

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><button id="d1">鼠标悬浮展示具体内容</button><script>$("#d1").hover(function (){alert("帅，年轻有为")})</script>
</body>
</html>

鼠标悬浮在按钮和从按钮移开都会弹出显示框

(2)如果想要鼠标悬浮和移开执行不同的操作，需要写两个函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><button id="d1">鼠标悬浮展示具体内容</button><script>$("#d1").hover(function (){alert("帅，年轻有为")},function (){alert("已移除悬浮")})</script>
</body>
</html>

[4] input框实时监控

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><input type="text" id="d1"><script>$("#d1").on("input",function (){console.log($(this).val())})</script>
</body>
</html>

输入框内每输入或删除一个字符，控制台都会动态打印

[5] 阻止默认行为

当事件触发时，浏览器通常会执行一些默认的操作，比如点击链接会跳转到另一个页面，提交表单会向服务器发送数据等。如果不希望这些默认行为发生，就可以使用以下两种方法来阻止。

(1)return false

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><form action="">用户名：<input type="text"><input type="submit" id="d1"></form><script>$("#d1").on("click", function (){alert("帅年轻有为")return false})</script>
</body>
</html>

当以上代码没有return false时，点击提交按钮既会弹出显示框，也会将刷新页面提交数据

而加上return false后，d1标签的默认行为提交数据已被阻止，只能弹出显示框

(2)preventDefault()

该方法需要配合参数使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><form action="">用户名：<input type="text"><input type="submit" id="d1"></form><script>$("#d1").on("click", function (a) {alert("帅年轻有为")a.preventDefault()})</script>
</body>
</html>

[6] 阻止事件冒泡

多个标签嵌套并且有相同事件的情况下，会出现逐级汇报的现象
当事件被触发时，它通常会在DOM树中向上冒泡到根节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><div id="d1">div标签<p id="d2">p标签<span id="d3">span标签</span></p></div><script>$("#d1").on("click", function(){alert("这是div标签")})$("#d2").on("click", function(){alert("这是p标签")})$("#d3").on("click", function(){alert("这是span标签")})</script>
</body>
</html>

当触发d3的点击事件时，事件将在DOM树中向上冒泡到根节点，依次弹出d3、d2、d1的显示框

阻止事件冒泡有以下两种方式：

(1)return false

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><div id="d1">div标签<p id="d2">p标签<span id="d3">span标签</span></p></div><script>$("#d1").on("click", function(){alert("这是div标签")})$("#d2").on("click", function(){alert("这是p标签")})$("#d3").on("click", function(){alert("这是span标签")return false})</script>
</body>
</html>

加上return false后，触发d3的点击事件时，只弹出d3的显示框，不再向上冒泡

(2)stopPropagation()

该方法需要配合参数使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><div id="d1">div标签<p id="d2">p标签<span id="d3">span标签</span></p></div><script>$("#d1").on("click", function(){alert("这是div标签")})$("#d2").on("click", function(){alert("这是p标签")})$("#d3").on("click", function(e){alert("这是span标签")e.stopPropagation()})</script>
</body>
</html>

[7] 事件委托

(1)引出

针对动态创建的标签，提前写好的事件是无法生效的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><button>点击展示有趣内容</button><button>点击展示有趣内容</button><script>$("button").on("click", function (){alert("帅年轻有为")})</script>
</body>
</html>

点击动态新建的标签，不会弹出显示框，点击其它两个标签会弹出显示框

(2)使用事件委托动态添加元素

基本语法：$('body').on('事件类型','选择器',function(){})

$('body').on('click','button',function(){})

为 body 元素内的所有 button 元素（包括未来动态添加的按钮）绑定一个点击事件处理器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jQuery.js"></script>
</head>
<body><button>点击展示有趣内容</button><button>点击展示有趣内容</button><script>$("body").on("click", "button", function (){alert("帅年轻有为")})</script>
</body>
</html>

使用事件委托后，点击动态添加的标签也会弹出显示框。

8. JavaScript对象与jQuery对象转换

可以将jQuery对象看成是数组包了标签对象
JavaScript对象就是标签对象
$('#d1')[0] // jQuery对象转JavaScript对象
$(标签对象) // JavaScript对象转jQuery对象

9. jQuery的动画效果

9.1 fadeIn()和fadeOut()

这两个方法可以实现元素的淡入淡出效果

fadeIn()将元素逐渐显示出来
fadeOut()则使元素逐渐消失

fadeIn() 函数可以接受两个参数：
速度：可以是“slow”、“fast”或者一个表示动画持续时间的数字（毫秒）。如果不指定，默认是“normal”速度，通常等同于400毫秒。
回调函数：一个在动画完成之后执行的函数。

// 淡入显示元素，并在动画完成后执行回调函数
$('#element').fadeIn(function() {
alert('Element is now visible!');
});

9.2 slideUp()和slideDown()

这两个方法可以实现元素的上滑和下滑效果。
slideUp()将元素向上滑动隐藏，
slideDown()则使元素从上方下滑显示出来。

slideUp() 函数可以接受两个参数：
速度：可以是“slow”、“fast”或者一个表示动画持续时间的数字（毫秒）。如果不指定，默认是“normal”速度，通常等同于400毫秒。
回调函数：一个在动画完成之后执行的函数。

// 向上滑动隐藏元素，并在动画完成后执行回调函数
$('#element').slideUp(function() {
alert('Element is now hidden!');
});

9.3 animate()

该方法允许创建自定义动画，通过逐步改变 CSS 属性值来实现动画效果。这个函数非常灵活，可以用来模拟几乎所有的动画行为，包括移动、缩放、旋转、改变透明度等。

animate() 函数的基本语法如下：
$(selector).animate(properties, duration, easing, complete);
selector：选择器或者 jQuery 对象，指定要动画化的元素。
properties：一个对象，包含要改变的 CSS 属性和目标值。
duration：动画持续的时间（例如 "slow"、"fast" 或毫秒数）。
easing：一个字符串，指定动画的缓动函数（例如 "linear"、"swing" 或自定义的函数）。
complete：动画完成后要执行的回调函数。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/855134.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！