526互联

JQuery-JQuery动画

发布时间 2023-12-12 23:02:51作者: 学Java的`Bei

 

1. 介绍：

    • 　　JQuery是一个JavaScript库。极大简化了JS编程。
    • 　　拥有强大的选择器支持，支持CSS1-CSS3几乎所有的选择器，及JQ独创的高级而复杂的选择器。
    • 　　解决不同的浏览器的兼容问题；
    • 　　代码简洁，功能强大，易于理解...

 

　　注入：

　　　　JQuery官网：jquery.com

　　　　　　

　　建议： 用旧不用新；

　　进入官网点击 DownLoad JQuery  --> 划到底部，

　　　　　　

　　建议使用 1 、2版本，最新也可以

　　　　　　

 

　　引入链接直接 copy 到 HTML 内

　　　　　　

 

 

　　包引入：直接下载  --> Ctrl+s保存；

　　打开文件 或者 直接拖进来都可以。

　　　　　　

    <!-- 包引入 -->
    <script src="../jquery-1.8.3.min.js"></script>

 

 

　　链接引入：将上面的地址直接copy （推荐使用）

    <!-- 链接引入 -->
    <script src="https://code.jquery.com/jquery-3.7.1.js" 
        integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous">
    </script>　　

　

2.  使用　　　

　　建议CSS与JS都是用外部连接。

　　$是JQuery独有；语法：$

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Jquery</title>
 7     <!-- 外部连接CSS -->
 8     <link rel="stylesheet" href="../Jquery.CSS/test.css">
 9 </head>
10 
11 <body>
12     <!-- 链接引入 -->
13     <script src="https://code.jquery.com/jquery-2.2.4.js"
14         integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous">
15     </script>
16     <script>
17             $(function(){
18             // 此处书写JQuery代码；
19             alert("Hello, JQuery！");       // 输出弹窗
20             console.log("你好，JQuery！");  // F12打印控制台
21         })
22     </script>
23 
24     <!-- 外部连接JS -->
25     <script src="../JQuery.js/jquery.js"></script>
26 </body>
27 </html>

 

　　JS window.onload 与 JQuery document.ready

    • 　　window.onload 立即执行函数：是不需要调用，直接执行。 是JS写法，可阻止dom阻塞，页面完全渲染完成才执行。
    •        document.ready 立即执行函数，不需调用，直接执行； 是JQuery独有。

　　　　两者执行顺序不同：

　　　　　 若两者同时存在，则JQuery优先级最高；
　　　　　　若两个同时存在多个，JS写法只输出最后；JQuery写法则都输出。

    <script>
        // window.onload JS渲染后覆盖前
        window.onload = function(){
            console.log("JS渲染！");
        }
        // 只输出此处
        window.onload = function(){
            console.log("JS-1渲染！");
        }

        // JQuery 全部渲染
        $(document).ready(function(){
            console.log("JQuery渲染！");
        })
        $(document).ready(function(){
            console.log("JQuery-2渲染！");
        })

        // 虽在末尾，却
        // 最为优先
        console.log("HTML渲染！");
    </script>

 

3. JQue选择器

　　　　原生javaScript中 ，只能使用getELementByld()，getElementByName、getElementByTagName()，等几种有限的方法来获取元素，JQuery 为我们提供了大量的选择器，极大地方便了我们快速选择元素来进行操作。

　　① 基本选择器

    •  　id选择器：$("#id名")
    • 　 标签选择器：$("标签名")
    •     类(class)选择器：$(". 类名")
    •     群组选择器：$("选择器1,选择器2，...")
    • 　 *选择器：$("*")---选取全部标签

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Jquery&基本选择器</title>
 7     <!-- 外部连接CSS -->
 8     <link rel="stylesheet" href="../Jquery.CSS/test.css">
 9     
10     <!-- 此处是CSS样式，建议写入CSS -->
11     <!-- 三个div都会被初始化 -->
12     <style type="text/css">
13         /* 先使用标签选择器，设置初始值 */
14         div{
15             width: 200px;
16             height: 200px;
17             background-color: grey;
18         }
19     </style>
20 </head>
21 
22 <body>
23     <!-- 链接引入 -->
24     <script src="https://code.jquery.com/jquery-2.2.4.js"
25         integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous">
26     </script>
27 
28     <script>
29             $(function(){
30             // 此处书写JQuery代码；
31             alert("Hello, JQuery！");       // 输出弹窗
32             console.log("你好，JQuery！");  // F12打印控制台
33         })
34     </script>
35 
36     <!-- 此处为JS，建议写入JS内 -->
37     <script type="text/javascript">
38             //1.改变id为one的元素的背景色为yellow
39             $(function(){
40                     $("#an1").click(function fun1(){
41                     $("#one").css("background", "yellow");
42                 })
43             });
44             //2.改变id为two的元素的背景色为red
45             $(function(){
46                     $("#an2").click(function fun2(){
47                     $("#two").css("background", "red");
48                 })
49             });
50             //3.改变id为three的元素背景色为green
51             $(function(){
52                     $("#an3").click(function fun3(){
53                     $("#three").css("background", "green");
54                 })
55             });
56 
57             //4.改变所有元素的背景色为pink
58             $(function(){
59                     $("#an4").click(function fun4(){
60                     $("*").css("background", "pink");
61                 })
62             });
63             //5.改变("id,class,标签名")的元素的背景色为orange
64              
65             $(function(){
66                     $("#an5").click(function fun5(){
67                     // $("id,class,标签名")组合选择器
68                     $(".two,#an3,#an5,span").css("background", "orange");
69                 })
70             });
71 
72     </script>
73 
74 
75     <!-- 定义样式 -->
76     <div id="one" class="one">one</div>
77     <div id="two" class="two">two</div>
78     <div id="three" class="three">three</div><br>
79 
80     <span>span</span><br>
81 
82     <!-- 定义按钮 -->
83     <button id="an1" value="one" onclick="fun1()">one</button>
84     <button id="an2" value="two" onclick="fun2()">two</button>
85     <button id="an3" value="three" onclick="fun3()">three</button>
86 
87     <button id="an4" value="所有" onclick="fun4()">整个页面</button>
88     <button id="an5" value="组合" onclick="fun5()">组合</button>
89 
90     <!-- 外部连接JS -->
91     <script src="../JQuery.js/jquery.js"></script>
92 </body>
93 </html>

 

视图：

　　　　

 

　　② 层次选择器

　　　　通过元素层次关系获取元素。有：后代、子代、兄弟、相邻

    • 　后代选择器：$("父 子") — 选择 父内部 的后代 子 元素；
    •    子代选择器：$("父>子") — 选择 父内部 的 子代 子 元素；
    •    兄弟选择器：$("兄~弟") — 选择 兄 元素后 同级 弟 元素；
    •    相邻选择器：$("M+N") — 选择 M 元素后的 相邻 的 N 元素；

　　　　　注意：找到执行的元素后面的所有满足条件的兄弟及相邻元素。
　　　　　　　故：相邻选择器和兄弟选择器只能向下选择，不能向上索取。

 

3. JQuery 动画

　　　　 show -- 显示

　　　　hide -- 隐藏

　　　　toggle -- 显示&隐藏

　　　　fadeIn -- 淡入

　　　　fadeOut -- 淡出

　　　　fadeToggle -- 淡入&淡出

　　　　slideUp -- 滑入

　　　　slideDown -- 滑出

　　　　slideToggle -- 滑入&滑出

 

HTML代码：

 1         <!-- 动画 -->
 2         <button class="an1">显示/淡出/滑出</button>
 3         <button class="an2">隐藏/淡入/滑入</button>
 4         <button class="an3">切换</button>
 5         
 6         <!-- 定义样式 -->
 7         <div class="box" style="height: 250px;width: 250px;background-color: greenyellow"></div>
 8 
 9         <!-- 外部连接JS -->
10         <script src="../JQuery.js/jquery.js"></script>

 

JS代码：

 1 // 显示
 2 $(".an1").click(function(){
 3     $(".box").show(5000);  // 可定义时长 5000ms=5s
 4 })
 5 // // 隐藏
 6 $(".an2").click(function(){
 7     $(".box").hide(5000);
 8 })
 9 // 隐藏&显示
10 $(".an3").click(function(){
11     $(".box").toggle(3000);
12 })
13 
14 // 淡入
15 $(".an1").click(function(){
16     $(".box").fadeOut(4000);
17 })
18 // // 淡出
19 $(".an2").click(function(){
20     $(".box").fadeIn(4000);
21 })
22 // 淡入&淡出
23 $(".an3").click(function(){
24     $(".box").fadeToggle(3000);
25 })
26 
27 // 滑入
28 $(".an1").click(function(){
29     $(".box").slideUp(4000);
30 })
31 // 滑出
32 $(".an2").click(function(){
33     $(".box").slideDown(4000);
34 })
35 // 滑动
36 $(".an3").click(function(){
37     $(".box").slideToggle(3000);
38 })