jQuery

概述

js库：即library，封装好的函数。里面有很多预先封装好的方法。

jQuery就是为了更方便快速操作DOM，里面封装了很多方法，后续用jQuery对象调用这些方法即可。

学习jQuery就是学习调用里面封装的函数，其优化了DOM操作、事件处理、动画设计和Ajax交互。基本兼容了主流浏览器。链式编程、隐式迭代、支持插件拓展开发，轻量、免费、开源。

其宗旨就是：写得少，做的多。

下载地址：https://jquery.com/

推荐下载3.X版本。

点击后直接鼠标右键**另存页面为…**即可，最后将下载下来的文件引入项目中。

jQuery的基本使用

入口函数

<body>
    <script>
        // $('div').hide();
        // 1.等着页面DOM加载完毕再去执行js代码
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        // 2.等着页面DOM加载完毕再去执行js代码
        $(function() {
            $('div').hide();
        })
    </script>
    <div>114514</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(function() {
     ......//DOM加载完成的入口(推荐)
})
1
2
3

$(document).ready(function() {
    ......//DOM加载完成的入口
})
1
2
3

在这里插入图片描述

jQuery的顶级对象：`$`

$是jQuery 别称，在代码中$和jQuery和等价，为了方便都是$。
$是jQuery的顶级对象，相当于原生js中的window，元素通过$包装成jQuery对象，调用jQuery属性和方法。

<script>
    // 1. $ 是jQuery的别称（别名）
    // $(function() {
    //     alert(11)
    // });
    //jQuery和$二者可互换，方便起见一般都是$
    jQuery(function() {
        // alert(11)
        // $('div').hide();hide为jQuery封装的方法；
        jQuery('div').hide();
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

jQuery对象和DOM对象

用原生js获取来的对象是DOM对象，用jQuery方法获取过来的对象是jQuery对象。

jQuery 对DOM的原生方法进行了封装，jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法。

<script>
    //DOM对象，用原生js获取
    var div = document.querySelector('div');
    console.dir(div);
    // $('div')是一个jQuery 对象
    $('div'); 
    console.dir($('div'));
</script>
1
2
3
4
5
6
7
8

控制台输出：

jQuery 对象只能使用 jQuery 属性和方法。例如：

衔接上述代码：div.style.display='none';//是原生js方法，DOM对象可调用

但：$(‘div’).style.display=‘none’;//这句代码就是错的，jQuery 对象只能使用jQuery 封装的方法。

所以，jQuery 只是对js常用属性和方法进行了封装。
DOM使用原生js方法和属性，jQuery 使用jQuery 属性和方法。

jQuery 对象和DOM对象相互转换

jQuery 转化为DOM(两种方法，index是索引号)：

$(‘div’)[index]
$(‘div’).get(index)

<script>
    var div = document.querySelector('div');
    $('div')[0].hide()
    $('div').get(0).hide()
</script>
1
2
3
4
5

DOM转化为jQuery：

//直接获取元素即可
$('div');
1
2

jQuery常用API

jQuery选择器

jQuery 基础选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

$(“选择器”) //里面选择器直接写 CSS 选择器即可，但是要加引号
1

获取方式与原生js无异：

jQuery 层级选择器

jQuery设置样式的方法：

$('div').css('属性', '值')
1

for instance：(Set the color for all the LI under UL)

$("ul li").css("color", "red");
1

隐式迭代：遍历内部 DOM 元素（伪数组形式存储）的过程。

例如：给UL里的很多LI都设置成红色字体

直接$(“ul li”).css(“color”, “red”);//隐式迭代自动遍历每一个LI。

jQuery 筛选选择器

for instance：(Get the first LI under UL)

$("ul li:first").css("color", "red");
1

jQuery 筛选方法

重点记住：

parent()//找亲爸

children()//找亲儿子

find()//找后代

siblings()//找兄弟

eq()

jQuery 样式操作

操作CSS方法

jQuery 可以使用 css 方法来修改简单元素样式。

参数只写属性名，则是返回属性值
$(this).css(''color'');
1

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
1

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号(对象写法，可以不带引号)
$(this).css({
   "width": "400px",
   height: 400,
   "color":"white",
   "font-size":"20px"
});
1
2
3
4
5
6

设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。

添加类

$(“div”).addClass(''example'');
1

移除类

$(“div”).removeClass(''example'');
1

切换类

$(“div”).toggleClass(''example'');
1

Attention:类操作与className区别

原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery 效果

可在API文档中查询具体用法：https://jquery.cuishifeng.cn/

jQuery 封装了很多动画效果，例如：

1.显示隐藏效果

1.显示
//（1）speed:字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
//（2）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
show([speed,[easing],[fn]]);//中括号表示可以省略此参数，无动画直接显示
1
2
3
4
5

2.隐藏
//（1）speed:字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
//（2）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次
hide([speed,[easing],[fn]]);//中括号表示可以省略此参数，无动画直接显示
1
2
3
4
5

3.切换显示和隐藏
toggle([speed,[easing],[fn]];
1
2

2.滑动效果

参数意思与显示隐藏参数一致

1.下滑
slideDown([speed,[easing],[fn]];
1
2

2.上滑
slideUp([speed,[easing],[fn]];
1
2

3.滑动切换
slideToggle([speed,[easing],[fn]];
1
2

事件切换

//（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
//（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
//（3）如果只写一个函数，则鼠标经过和离开都会触发它
hover([over,]out);
1
2
3
4

for instance:(The drop-down menu of the navigation bar).

实现效果：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 0 auto;
            height: 40px;
            border-bottom: 1px solid red;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid red;
            border-right: 1px solid red;
        }
        
        .nav ul li {
            border-bottom: 1px solid red;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    style>
    <script src="jquery.min.js">script>
head>

<body>
    <ul class="nav">
        <li>
            <a href="#">导航一a>
            <ul>
                <li>
                    <a href="">私信a>
                li>
                <li>
                    <a href="">评论a>
                li>
                <li>
                    <a href="">@我a>
                li>
            ul>
        li>
        <li>
            <a href="#">导航二a>
            <ul>
                <li>
                    <a href="">私信a>
                li>
                <li>
                    <a href="">评论a>
                li>
                <li>
                    <a href="">@我a>
                li>
            ul>
        li>
        <li>
            <a href="#">导航三a>
            <ul>
                <li>
                    <a href="">私信a>
                li>
                <li>
                    <a href="">评论a>
                li>
                <li>
                    <a href="">@我a>
                li>
            ul>
        li>
        <li>
            <a href="#">导航四a>
            <ul>
                <li>
                    <a href="">私信a>
                li>
                <li>
                    <a href="">评论a>
                li>
                <li>
                    <a href="">@我a>
                li>
            ul>
        li>
    ul>
    <script>
        $(function() {
            
            ......
        })
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

jQuery部分有多种写法：

上滑和下滑分别用鼠标离开和经过来实现

//鼠标经过，下滑
$(".nav>li").mouseover(function() {
    $(this).children("ul").slideDown(200);
});
//鼠标离开，上滑
$(".nav>li").mouseout(function() {
    $(this).children("ul").slideUp(200);
});
1
2
3
4
5
6
7
8

用上面说的事件切换来写

//事件切换 hover 就是鼠标经过和离开的复合写法，两个函数对应经过和离开。
$(".nav>li").hover(function() {
    $(this).children("ul").slideDown(200);
}, function() {
    $(this).children("ul").slideUp(200);
});
1
2
3
4
5
6

简化事件切换写法：只写一个函数，鼠标经过和鼠标离开都会触发这个函数

$(".nav>li").hover(function() {
    $(this).children("ul").slideToggle();
});
1
2
3

上述写法的bug：快速经过离开，导航动画等一个结束，另一个才开始

待解决：动画队列（动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。）

解决方法：停止排队

//(1)stop()方法用于停止动画或效果。
//(2)注意:stop()写到动画或者效果的前面，相当于停止结束上一次的动画。只执行最新的一次。
stop();
1
2
3

完整代码：

$(".nav>li").hover(function() {
    // stop 方法必须写到动画的前面，结束上一次的动画
    $(this).children("ul").stop().slideToggle();
});
1
2
3
4

3.淡入淡出效果

就是透明度从0增加到1的变化。

//参数与上述一致

（1）speed：字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（2）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（3）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

1.淡入
fadeIn([speed,[easing],[fn]];
1
2

2.淡出
fadeOut([speed,[easing],[fn]];
1
2

3.淡入淡出切换
fadeToggle([speed,[easing],[fn]];
1
2

渐进方式调整到指定的不透明度

//opacity 透明度，取值0~1
fadeTo([[speed],opacity,[easing],[fn]];
1
2

4.自定义动画 animate

//params: 想要更改的样式属性，以对象形式传递。属性名可以不用带引号，如果是复合属性则需要采
取驼峰命名法 borderLeft。其余参数都可以省略。
animate(params,[speed],[easing],[fn];
1
2
3

jQuery 属性操作

相关阅读:
基于Python实现的价值迭代(Value Iterator)
剑指offer面试题35 第一个只出现一次的字符
 早在多久MySQL 啥时候用表锁，啥时候用行锁？
Llama2-Chinese项目：2.3-预训练使用QA还是Text数据集？
react评论列表连接数据库
 27、详解 Java 中的 final 关键字
 如何判断oracle是否启动及启动oracle数据库
 wps excel js编程
 python加速记录
 【Python GUI库】六个图形用户界面库优缺点及实例预览
原文地址：https://blog.csdn.net/m0_51390535/article/details/126078010