CT的JavaWeb学习（2）——jQuery

最新推荐文章于 2024-11-16 14:11:26 发布

MousseCaketao

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/CTtao123/article/details/123056537

版权

3 jQuery

辅助JavaScript开发的js类库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function(){
            var $btnObj = $("#btnId");
            $btnObj.click(function(){
                alert("jQuery的单击事件");
            });
        });
    </script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>
</html>

3.1 jQuery核心函数$()

传入参数	意义
函数	页面加载完成之后，相当于window.onload = funciton(){}
HTML字符串	按照字符串创建html标签对象
选择器字符串	$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id属性值")、$ (“标签名”)、$(".class属性值")
DOM对象	将DOM对象转换成jQuery对象

3.2 jQuery对象

jQuery对象本质是DOM对象数组+jQuery提供的一系列功能函数

jQuery对象不能使用DOM对象的属性和方法，反过来也是一样。

互相转化

//dom→jQuery
var obj = $(dom对象);
//jQuery→dom
var dom = $obj[下标];

3.3 jQuery选择器

基本选择器

#id id选择器
.class 类选择器
element 标签选择器
(*) 所有元素
selector1,selector2,selector3 组合选择器

p.myClass 找到p标签里class="myClass"的元素

tips:查询结果与html中的出现的顺序一致

层次选择器

“祖先后代” 取后代所有元素

“父 > 子” 取直接元素

“prev + next” 取prev紧跟的next元素

“prev ~ siblings” 取跟prev同辈的siblings元素

基本筛选器

基本筛选器	含义
:first	获取第一个元素
:not(selector)	排除掉selector选择的元素
:gt(index)	选择大于index的元素
:eq(index)	选择index对应的元素
:last	选择最后的元素

内容选择器

内容选择器	含义
:contains(‘text’)	选择内容包含text文本的元素

属性选择器

表单选择器

元素筛选

3.4 属性（DOM）操作

html()：设置和获取起始标签和结束标签中的内容

text()：设置和获取起始标签和结束标签中的文本

val()：设置和获取表单项的value属性值

attr()：设置和获取属性的值不推荐操作checked、readOnly、selected、disabled等

prop()：设置和获取属性的值只推荐操作上面不推荐的

3.5 DOM的增删改

内部插入
appendTo()	a.appendTo(b)	把a插入到b子元素末尾，成为最后一个子元素
prependTo()	a.prependTo(b)	把a插入到b所有子元素前，成为第一个子元素
外部插入
insertAfter()	a.insertBefore(b)	把a插入到b之前，得到ba
insertBefore()	a.insertAfter(b)	把a插入到b之后，得到ab
替换
replaceWith()	a.replaceWith(b)	把b替换掉a
replaceAll()	a.replaceAll(b)	用a替换掉所有的b
删除
remove()	a.remove()	删除a标签
empty()	a.remove()	清空a标签的内容

3.6 CSS样式操作

addClass()：对被选元素进行添加类的操作
removeClass()：对被选元素进行删除类的操作
toggleClass()：对被选元素进行添加/删除类的操作，无则添加，有则删除
offset()：返回第一个匹配元素相对于文档的位置，也可以用于更改

3.7 jQuery动画

基本动画
- show()：显示元素
- hide()：隐藏元素
- toggle()：切换元素的显示/隐藏状态
淡入淡出动画
- fadeIn()：淡入
- fadeOut()：淡出
- fadeTo()：在指定时常内将透明度修改到指定的值，0为完全透明，1为不透明
- fadeToggle()：切换

以上函数都可添加参数

动画的执行时长，单位ms
动画的回调函数（动画结束后自动调用的函数）

3.8 jQuery事件操作

3.8.1 jQuery和原生js页面加载完成的顺序

window.onload = function(){
    alert("js加载完成");
}

$(function () {
    alert("jQuery加载完成");
});

jQuery先于原生js

jQuery的页面加载完成执行于浏览器内核解析完页面标签创建DOM对象后时
原生js的页面加载完成还需要等待页面标签显示时需要的内容加载完成

执行次数

jQuery的页面加载是把注册的function全部执行
原生js只会执行最后一次

3.8.2 jQuery事件处理方法

方法	含义
click()	有function时绑定事件；空参时触发事件
mouseover()	鼠标移入事件
mouseout()	鼠标移出事件
bind()	用一个函数绑定一个或多个事件
one()	与bind使用方法一样，但是最终只会响应一次
live()	动态绑定事件，新创建的元素也有效
unbind()	解除事件绑定；空参是删除所有事件