本文就不仔细介绍jQuery的使用方法,仅是比较一下jQuery与html dom对html网页的使用差别
希望以后能更多使用jQuery而不是原始JavaScript(悲)
简介:
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
一、获取jquery源码
可以从
获取最新源码,建议下载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>
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>
以下是源码