初识jQuery 简单对比jQuery与HTML DOM的差别

本文就不仔细介绍jQuery的使用方法，仅是比较一下jQuery与html dom对html网页的使用差别

希望以后能更多使用jQuery而不是原始JavaScript(悲)

简介：

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

一、获取jquery源码

可以从

https://jquery.com/download/

获取最新源码，建议下载compressed压缩版本，文件更小，节省网页内存

二、引入jQuery代码

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

　　src为jQuery源码位置

三、jQuery入口

    //jQuery的简洁入口
    $(function(){
    });

　　或

        //jQuery的标准入口
        $(document).ready(function(){
        });

　　或

        //当前页面加载完成后执行
        window.onload = function(){
        }

四、jQuery语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

五、jQuery API

中文API网站：https://jquery.cuishifeng.cn/index.html

　　其中包含但不限于对选择器、事件对象、属性、CSS样式、动画效果、文档处理等的使用方式

六、实例对比

这是一个轮播图，类似购物网站具体商品页面，每隔三秒自动切换到下一张图片，并且鼠标悬停在图片上时暂停播放

图片下六个圆点可点击切换到对应顺序的图片，并且图片切换时对应圆点会变红

最后两个按钮可以切换到上一张/下一张图片

原生html

 1     <h1>轮播图</h1>
 2     <div id="did" onmouseover="doStop()" onmouseout="doStart()">
 3         <img src="./images/1.jpg" width="384"/>
 4         <img src="./images/2.jpg" width="384"/>
 5         <img src="./images/3.jpg" width="384"/>
 6         <img src="./images/4.jpg" width="384"/>
 7         <img src="./images/5.jpg" width="384"/>
 8         <img src="./images/6.jpg" width="384"/>
 9         <div class="pot" onclick="changePic(this)" id="pot1" style="background-color: red;">
10             <a href="./images/1.jpg" name="link"></a>
11         </div>
12         <div class="pot" onclick="changePic(this)" id="pot2" style="">
13             <a href="./images/2.jpg" id="link"></a>
14         </div>
15         <div class="pot" onclick="changePic(this)" id="pot3" style="">
16             <a href="./images/3.jpg" id="link"></a>
17         </div>
18         <div class="pot" onclick="changePic(this)" id="pot4" style="">
19             <a href="./images/4.jpg" id="link"></a>
20         </div>
21         <div class="pot" onclick="changePic(this)" id="pot5" style="">
22             <a href="./images/5.jpg" id="link"></a>
23         </div>
24         <div class="pot" onclick="changePic(this)" id="pot6" style="">
25             <a href="./images/6.jpg" id="link"></a>
26         </div>
27         <br>
28         <button onclick="changeLast()">←</button>
29         <button onclick="changeNext()">→</button>
30     </div>

使用jQuery后的html

 1     <h1>轮播图</h1>
 2     <div id="did">
 3         <img src="./images/1.jpg" width="384"/>
 4         <img src="./images/2.jpg" width="384"/>
 5         <img src="./images/3.jpg" width="384"/>
 6         <img src="./images/4.jpg" width="384"/>
 7         <img src="./images/5.jpg" width="384"/>
 8         <img src="./images/6.jpg" width="384"/>
 9         <div class="pot" id="pot1" style="background-color: red;">
10             <a href="./images/1.jpg" class="link"></a>
11         </div>
12         <div class="pot" id="pot2" style="">
13             <a href="./images/2.jpg" class="link"></a>
14         </div>
15         <div class="pot" id="pot3" style="">
16             <a href="./images/3.jpg" class="link"></a>
17         </div>
18         <div class="pot" id="pot4" style="">
19             <a href="./images/4.jpg" class="link"></a>
20         </div>
21         <div class="pot" id="pot5" style="">
22             <a href="./images/5.jpg" class="link"></a>
23         </div>
24         <div class="pot" id="pot6" style="">
25             <a href="./images/6.jpg" class="link"></a>
26         </div>
27         <br>
28         <button id="left">←</button>
29         <button id="right">→</button>
30     </div>

区别一：可以不需要在html的标签绑定事件函数，而可以在js脚本中绑定

例如：

1         //  轮播图hover绑定鼠标移入移出事件，移入停止播放，移出继续播放
2         $("did").hover(doStop(),doStart());

这表示可以直接对#did标签直接绑定鼠标滑入和划出事件

$("button").click(function(){});

这是按钮直接捆绑一个点击事件

区别二：获取html元素的方式更为简单

原生html获取网页元素：

1         //  找到a标签
2         var alinks = document.getElementById(picId).getElementsByTagName("a");
3         //  获取图片
4         var mlist = document.getElementById("did").getElementsByTagName("img");
5         //  获取圆点
6         var pots = document.getElementsByClassName("pot");  
7         //  获取链接href    
8         var link = alinks[0].getAttribute("href");

jQuery获取html元素

1             //  获取链接href
2             var link = $(this).find("a").attr("href");
3             //  获取图片
4             var mlist = $("img");
5             //  获取圆点
6             var pots = $(".pot");

可以看见，jQuery获取元素的方法能减少不少代码内容，更为简单

修改样式

JavaScript

1             if(x == i+1){
2                 // 修改display为显示，对应圆点为红色
3                 mlist.eq(i).css("display","block");
4                 pots.eq(i).css("background-color","red");
5             }else{
6                 //  修改display为隐藏，对应圆点为灰色
7                 mlist.eq(i).css("display","none");
8                 pots.eq(i).css("background-color","gray")
9             }

jQuery

1             if(x == i+1){
2                 // 修改display为显示，对应圆点为红色
3                 mlist[i].style.display = "block";
4                 pots[i].style.backgroundColor = "red";
5             }else{
6                 //  修改display为隐藏，对应圆点为灰色
7                 mlist[i].style.display = "none";
8                 pots[i].style.backgroundColor = "gray";
9             }

可见，jQuery有专有方法修改样式，区别其实不是很大

原生JavaScript：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>轮播图</title>
  7     <style>
  8         div,img,ul,li{margin:0px;padding:0px;}
  9         #did{width:384px;height:240px;}
 10         #did img{
 11             display:none;
 12             height: 200px;
 13         }
 14         #did img:first-child{display:block}
 15         #did .pot{
 16             width: 10px;
 17             height: 10px;
 18             border-radius:50%;
 19             background-color:gray;
 20             float: left;
 21             margin: 5px;
 22         }
 23 
 24     </style>
 25 </head>
 26 <body>
 27     <h1>轮播图</h1>
 28     <div id="did" onmouseover="doStop()" onmouseout="doStart()">
 29         <img src="./images/1.jpg" width="384"/>
 30         <img src="./images/2.jpg" width="384"/>
 31         <img src="./images/3.jpg" width="384"/>
 32         <img src="./images/4.jpg" width="384"/>
 33         <img src="./images/5.jpg" width="384"/>
 34         <img src="./images/6.jpg" width="384"/>
 35         <div class="pot" onclick="changePic(this)" id="pot1" style="background-color: red;">
 36             <a href="./images/1.jpg" name="link"></a>
 37         </div>
 38         <div class="pot" onclick="changePic(this)" id="pot2" style="">
 39             <a href="./images/2.jpg" id="link"></a>
 40         </div>
 41         <div class="pot" onclick="changePic(this)" id="pot3" style="">
 42             <a href="./images/3.jpg" id="link"></a>
 43         </div>
 44         <div class="pot" onclick="changePic(this)" id="pot4" style="">
 45             <a href="./images/4.jpg" id="link"></a>
 46         </div>
 47         <div class="pot" onclick="changePic(this)" id="pot5" style="">
 48             <a href="./images/5.jpg" id="link"></a>
 49         </div>
 50         <div class="pot" onclick="changePic(this)" id="pot6" style="">
 51             <a href="./images/6.jpg" id="link"></a>
 52         </div>
 53         <br>
 54         <button onclick="changeLast()">←</button>
 55         <button onclick="changeNext()">→</button>
 56     </div>
 57 </body>
 58 <script>
 59     var m = 1;
 60     var mytime = null;
 61     //定义函数展示对应的图片
 62     function show(x){
 63         var mlist = document.getElementById("did").getElementsByTagName("img");
 64         var pots = document.getElementsByClassName("pot");
 65         for(var i=0; i<mlist.length; i++){
 66             if(x == i+1){
 67                 // 修改display为显示，对应圆点为红色
 68                 mlist[i].style.display = "block";
 69                 pots[i].style.backgroundColor = "red";
 70             }else{
 71                 //  修改display为隐藏，对应圆点为灰色
 72                 mlist[i].style.display = "none";
 73                 pots[i].style.backgroundColor = "gray";
 74             }
 75         }
 76     }
 77 
 78     //开启定时轮播图片
 79     function doStart(){
 80         if(mytime == null){
 81             mytime = setInterval(function(){
 82                 m++;
 83                 show(m);
 84                 if(m>=6){
 85                     m = 0;
 86                 }
 87             }, 3000);
 88         }
 89     }
 90 
 91     //停止轮播图片
 92     function doStop(){
 93         if(mytime != null){
 94             clearInterval(mytime);
 95             mytime = null;
 96         }
 97     }
 98 
 99     //点击圆点显示对应图片
100     function changePic(touched){
101         doStop();
102         var picId = touched.id;
103         //  找到a标签
104         var alinks = document.getElementById(picId).getElementsByTagName("a");
105         //  获取图片
106         var mlist = document.getElementById("did").getElementsByTagName("img");
107         //  获取圆点
108         var pots = document.getElementsByClassName("pot");  
109         //  获取链接href    
110         var link = alinks[0].getAttribute("href");
111         for(var i=0;i<mlist.length;i++){
112             //  相同则显示对应图片，并修改m为当前图片的位置
113             if(mlist[i].getAttribute("src")==link){
114                 m = i + 1;
115                 show(m);
116             }
117         }
118     }
119 
120     function changeLast(){
121         //  上一张
122         doStop();
123         if(m == 1){
124             m = 6;
125         }else{
126             m = m - 1;
127         }
128         show(m);
129     }
130 
131     function changeNext(){
132         //  下一张
133         doStop();
134         if(m == 6){
135             m = 1;
136         }else{
137             m = m + 1;
138         }
139         show(m);
140     }
141 
142     doStart();
143 </script>
144 </html>

View Code

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>轮播图</title>
  7     <style>
  8         div,img,ul,li{margin:0px;padding:0px;}
  9         #did{width:384px;height:240px;}
 10         #did img{
 11             display:none;
 12             height: 400px;
 13         }
 14         #did img:first-child{display:block}
 15         #did .pot{
 16             width: 10px;
 17             height: 10px;
 18             border-radius:50%;
 19             background-color:gray;
 20             float: left;
 21             margin: 5px;
 22         }
 23         #left{
 24             margin-left: 130px;
 25         }
 26     </style>
 27 </head>
 28 <body>
 29     <h1>轮播图</h1>
 30     <div id="did">
 31         <img src="./images/1.jpg" width="384"/>
 32         <img src="./images/2.jpg" width="384"/>
 33         <img src="./images/3.jpg" width="384"/>
 34         <img src="./images/4.jpg" width="384"/>
 35         <img src="./images/5.jpg" width="384"/>
 36         <img src="./images/6.jpg" width="384"/>
 37         <div class="pot" id="pot1" style="background-color: red;">
 38             <a href="./images/1.jpg" class="link"></a>
 39         </div>
 40         <div class="pot" id="pot2" style="">
 41             <a href="./images/2.jpg" class="link"></a>
 42         </div>
 43         <div class="pot" id="pot3" style="">
 44             <a href="./images/3.jpg" class="link"></a>
 45         </div>
 46         <div class="pot" id="pot4" style="">
 47             <a href="./images/4.jpg" class="link"></a>
 48         </div>
 49         <div class="pot" id="pot5" style="">
 50             <a href="./images/5.jpg" class="link"></a>
 51         </div>
 52         <div class="pot" id="pot6" style="">
 53             <a href="./images/6.jpg" class="link"></a>
 54         </div>
 55         <br>
 56         <button id="left">←</button>
 57         <button id="right">→</button>
 58     </div>
 59 </body>
 60 <script src="./jquery-3.5.1.min.js"></script>
 61 <script>
 62     var m = 1;
 63     var mytime = null;
 64     //定义函数展示对应的图片
 65     function show(x){
 66         var mlist = $("img");
 67         var pots = $(".pot");
 68         for(var i=0; i<mlist.length; i++){
 69             if(x == i+1){
 70                 // 修改display为显示，对应圆点为红色
 71                 mlist.eq(i).css("display","block");
 72                 pots.eq(i).css("background-color","red");
 73             }else{
 74                 //  修改display为隐藏，对应圆点为灰色
 75                 mlist.eq(i).css("display","none");
 76                 pots.eq(i).css("background-color","gray")
 77             }
 78         }
 79     }
 80     
 81     //开启定时轮播图片
 82     function doStart(){
 83         if(mytime == null){
 84             mytime = setInterval(function(){
 85                 m++;
 86                 show(m);
 87                 if(m>=6){
 88                     m = 0;
 89                 }
 90             }, 3000);
 91         }
 92     }
 93 
 94     //停止轮播图片
 95     function doStop(){
 96         if(mytime != null){
 97             clearInterval(mytime);
 98             mytime = null;
 99         }
100     }
101     //jQuery入口函数
102     $(function(){
103         //轮播开始
104         doStart();
105         //  轮播图hover绑定鼠标移入移出事件，移入停止播放，移出继续播放
106         $("did").hover(doStop(),doStart());
107         
108         //  对应数量的圆点，点击会显示对应的图片
109         $(".pot").click(function(e){
110             doStop();
111             //  获取链接href
112             var link = $(this).find("a").attr("href");
113             //  获取图片
114             var mlist = $("img");
115             //  获取圆点
116             var pots = $(".pot");
117             for(var i=0;i<mlist.length;i++){
118                 //  相同则显示对应图片，并修改m为当前图片的位置
119                 if(mlist.eq(i).attr("src") == link){
120                     console.log(i);
121                     m = i + 1;
122                     show(m);
123                 }
124             }
125             doStart();
126         })
127 
128         $("button").click(function(){
129             switch($(this).html()){
130                 //  上一张
131                 case "←":
132                 doStop();
133                 if(m == 1){
134                     m = 6;
135                 }else{
136                     m = m - 1;
137                 }
138                 show(m);
139                     break;
140                 case "→":
141                 //  下一张
142                     doStop();
143                     if(m == 6){
144                         m = 1;
145                     }else{
146                         m = m + 1;
147                     }
148                     show(m);
149                     break;
150             }
151         })
152     });
153 </script>
154 </html>

View Code

以下是源码