45. jQuery

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：动画完成后要执行的回调函数。

posted @ 2024-12-19 01:51 hbutmeng 阅读(23) 评论(0) 收藏举报

刷新页面返回顶部

hbutmeng

45. jQuery

1. jQuery介绍

1.1 概念

1.2 导入方式

2. 选择器

2.1 基本选择器

2.2 层级选择器

3. 基本筛选器

4. 属性选择器

5. 表单筛选器

6. 筛选器方法

7. jQuery操作标签

7.1 操作class

7.2 操作css

7.3 操作位置

7.4 操作文本

7.5 操作属性

[1] 概念

[2] 代码

[3]jQuery 的 prop() 方法

7.6 操作文档

[1] 概念

[2] 代码

7.7 操作事件

[1] 概念

[2] 克隆事件

[3] 悬浮事件

[4] input框实时监控

[5] 阻止默认行为

[6] 阻止事件冒泡

[7] 事件委托

8. JavaScript对象与jQuery对象转换

9. jQuery的动画效果

9.1 fadeIn()和fadeOut()

9.2 slideUp()和slideDown()

9.3 animate()

公告