Jquery的基本使用

$说明

如何使用Jquery：

day-01

$Jquery

Jquery官方网站下载：http://jquery.com/

引入Jquery的js文件

并在html中加入（以我的为例）

<script type="text/javascript" src="jquery-3.3.1.js"></script>

1.隐藏部分标签-（JQ-01）

 1 <html>
 2 <head>
 3     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 4     <script type="text/javascript">
 5         $(document).ready(function(){  //这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
 6             $("button").click(function(){
 7                 $(this).hide(); //隐藏button标签
 8                 $("p").hide();  //隐藏所有p标签
 9 
10             });
11         });
12     </script>
13    <meta charset="utf-8">
14     <!-- 防止中文乱码-->
15 </head>
16 
17 <body>
18 <button type="button" >点击清除type</button>
19 <p class="class">p1</p>
20 <p class="class">p2</p>
21 <p>p3</p>
22 </body>
23 
24 </html>

2.隐藏相同class标签,通过使用.click点击事件调用.hide隐藏-（JQ-02）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 6     <script>
 7         $(document).ready(function () {  //防止jq预先加载
 8             $("button").click(function () {  //点击事件
 9                 $(".jq02").hide();    //隐藏同class
10             });
11 
12         })
13     </script>
14 
15     <title>jq-02</title>
16 </head>
17 <body>
18 <button type="button" >click me</button>
19 <p class="jq02">1</p>
20 <p class="jq02">2</p>
21 <p>3</p>
22 </body>
23 </html>

3.通过使用.click点击事件并用.css改变属性样式-（JQ-03）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JQ-03</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7     <script>
 8 $(document).ready(function () {
 9     $(".button1").click(function () {
10         $(".color").css("background","red")   //改变css样式
11         $("[href]").css("background","blue")  //通过属性改变样式
12     })
13     $(".button2").click(function () {
14         $(".color").css("background","blue")   //改变css样式
15         $("[href]").css("background","red")  //通过属性改变样式
16     })
17 })
18 
19         </script>
20 </head>
21 <body>
22 <p class="color">1</p>
23 <p class="color">2</p>
24 <button type="button" class="button1">click me</button><br>
25 <span href="#">链接1</span><br>
26 <span href="#">链接2</span><br>
27 <button type="button" class="button2">click me</button><br>
28 </body>
29 </html>

4.鼠标悬停，通过使用.mousemove使悬停改变属性-（JQ-04）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JQ-04</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7     <script>
 8 $(document).ready(function () {
 9     $(".div1").mousemove(function () {   //鼠标悬停事件
10         $(".div3").css("border","red solid")
11     })
12     $(".div2").mousemove(function () { //鼠标悬停事件
13         $(".div3").css("border","blue solid")
14     })
15 })
16         </script>
17 </head>
18 <body>
19 <div class="div1" style=" border: solid red; height: 100px;  100px;">鼠标悬停1</div>
20 <div class="div2" style=" border: solid blue; height: 100px;  100px;">鼠标悬停2</div>
21 <div  class="div3" style="  height: 200px;  200px;">鼠标悬停2</div>
22 </body>
23 </html>

5.隐藏于显示切换，使用toggle（speed，callback）切换。-（JQ-05）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JQ-05</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7     <script>
 8 $(document).ready(function () {
 9     $(".div1").click(function () {
10         $(".div2").toggle(1000);  //隐藏于显示的切换
11     })
12 })
13 
14         </script>
15 </head>
16 <body>
17 <div class="div1" style="border: solid wheat; height: 100px; 300px;" align="center">点此获取其他登录方式</div>
18 <div class="div2" style=" border: solid wheat;height: 50px;  300px" align="center">
19     QQ&nbsp;&nbsp;&nbsp;微信&nbsp;&nbsp;&nbsp;微博
20 </div>
21 </body>
22 </html>

6.使用fadeIn,fadeOut,fadeToggle,fadeTo进行渐变效果-（JQ-06）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JQ-06</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7     <script>
 8         $(document).ready(function () {
 9             $("#button1").click(function () {
10                 $(".danru1").fadeIn();  //淡入效果
11                 $(".danru2").fadeIn("slow");
12                 $(".danru3").fadeIn(2000);
13             });
14             $("#button2").click(function () {
15                 $(".danchu1").fadeOut();  //淡出效果
16                 $(".danchu2").fadeOut("slow");
17                 $(".danchu3").fadeOut(2000);
18             });
19             $("#button3").click(function () {
20                 $(".qiehuan1").fadeToggle();  //淡入淡出切换效果
21                 $(".qiehuan2").fadeToggle("slow");
22                 $(".qiehuan3").fadeToggle(3000);
23             });
24             $("#button4").click(function () {
25                 $(".jianbian1").fadeTo("slow", 0.25);  //渐变效果
26                 $(".jianbian2").fadeTo("slow", 0.5);
27                 $(".jianbian3").fadeTo("slow", 0.75);
28             });
29         });
30         </script>
31 </head>
32 <body>
33 <button type="button" id="button1">淡入效果</button>
34 <div class="danru1" style="height: 100px;  100px; display: none; background:red;"></div>
35 <div class="danru2" style="height: 100px;  100px; display: none; background:beige;"></div>
36 <div class="danru3" style="height: 100px;  100px; display: none; background:wheat;"></div>
37 <button type="button" id="button2">淡出效果</button>
38 <div class="danchu1" style="height: 100px;  100px;  background:red;"></div>
39 <div class="danchu2" style="height: 100px;  100px;  background:beige;"></div>
40 <div class="danchu3" style="height: 100px;  100px;  background:wheat;"></div>
41 <button type="button" id="button3">切换效果</button>
42 <div class="qiehuan1" style="height: 100px;  100px;  background:red;"></div>
43 <div class="qiehuan2" style="height: 100px;  100px;  background:beige;"></div>
44 <div class="qiehuan3" style="height: 100px;  100px;  background:wheat;"></div>
45 <button type="button" id="button4">渐变效果</button>
46 <div class="jianbian1" style="height: 100px;  100px;  background:red;"></div>
47 <div class="jianbian2" style="height: 100px;  100px;  background:beige;"></div>
48 <div class="jianbian3" style="height: 100px;  100px;  background:wheat;"></div>
49 </body>
50 </html>

7.上下滑动切换-(JQ-07)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JQ-07</title>
 6     <script type="text/javascript" src="jquery-3.3.1.js"></script>
 7     <script>
 8 $(document).ready(function () {
 9     $(".div1").click(function () {
10         $(".div2").slideToggle(2000);   //上下滑动切换
11         //slideDown()    向下滑动
12         //slideUp()   向上滑动
13     });
14 })
15         </script>
16 </head>
17 <body>
18 <div class="div1" style="background: wheat; height: 100px;  300px;" align="center"></div>
19 <div class="div2" style="background: honeydew; height: 100px;  300px;" align="center"></div>
20 </body>
21 </html>

$总结

 <script type="text/javascript" src="jquery-3.3.1.js"></script> 此为引用Jquery库的必填选项 src中引用你的jquery地址

$(document).ready(function () {

防止文档在完全加载（就绪）之前运行 jQuery 代码。