jQuery插件的简单使用及制作
jQuery插件：jQuery不可能包含所有的功能，那么就可以通過(guò)插件擴(kuò)展jQuery的功能，jQuery有豐富的插件，使用這些插件能給jQuery提供一些額外的功能。
使用jQuery插件的步驟：
第一步：引入jQuery文件；
第二步：引入插件文件（如果有用到css的話(huà)，需要引入css文件）；
第三步：使用插件。
常用的jQuery插件：
1、jquery.color.js
animate不支持顏色的漸變，但是使用了jquery.color.js后，就可以支持顏色的漸變了。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.box{width: 200px;height: 200px;background-color: red;}</style> </head> <body> <div class="box"></div><!--1、引入jquery的js文件--> <script src="jquery/jquery-3.3.1.js"></script> <!--2、引入插件的js文件--> <script src="jquery/jquery.color.js"></script> <script>$(document).ready(function(){//3、直接使用即可$(".box").animate({backgroundColor:"#64FF48",width:"400px",height:"400px"},3000,function(){alert("改變了樣式");});}); </script> </body> </html>注意：jQuery不支持顏色的漸變，有的顏色的單詞，jQuery不識(shí)別，例如pink，所以顏色最好用16進(jìn)制。2、jquery.lazyload.js
懶加載插件? ? ?官網(wǎng)下載地址：http://plugins.jquery.com/lazyload/
詳細(xì)介紹：jQuery延遲加載(懶加載)插件 – jquery.lazyload.js
?懶加載插件可以延遲加載長(zhǎng)頁(yè)面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶(hù)將頁(yè)面滾動(dòng)到它們所在的位置.。
使用jquery.lazyload.js延遲加載圖片，必須改變圖片的標(biāo)簽。圖像的地址必須放在data-original屬性上。即：img標(biāo)簽的src屬性改為data-original屬性。
可給懶加載圖像一個(gè)特定的class（例如:lazy）。這樣就可以很容易地進(jìn)行圖像插件捆綁。
<img class="lazy" data-original="images/1.jpg" alt=""/>方法使用：
$(document).ready(function(){$(".lazy").lazyload();});完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.box{height: 2000px;}.lazy{width: 200px;height: 200px;}</style> </head> <body> <div class="box"></div> <img class="lazy" data-original="images/1.jpg" alt=""/> <img class="lazy" data-original="images/2.jpg" alt=""/> <img class="lazy" data-original="images/1.jpg" alt=""/> <img class="lazy" data-original="images/2.jpg" alt=""/> <img class="lazy" data-original="images/1.jpg" alt=""/> <img class="lazy" data-original="images/2.jpg" alt=""/> <img class="lazy" data-original="images/1.jpg" alt=""/> <img class="lazy" data-original="images/2.jpg" alt=""/><script src="jquery/jquery-3.3.1.js"></script> <script src="jquery/jquery.lazyload.js"></script> <script>$(document).ready(function(){$(".lazy").lazyload();}); </script> </body> </html>讓所有class="lazy"的圖像延遲加載。
使用了data-original就不要寫(xiě)src了，要不然沒(méi)有效果??
在沒(méi)有完全獲取到圖片的資源前，是得不到圖片的寬高的，所以預(yù)先設(shè)置寬高，讓它提前有個(gè)占位??3、jquery.ui.js
使用方法：
第一步：引入jQueryUI的樣式文件
第二步：引入jQuery
第三步：引入jQueryUI的js文件
第四步：使用jQueryUI功能
制作jQuery插件
原理：jQuery插件的實(shí)質(zhì)，其實(shí)就是給jQuery原型對(duì)象增加一個(gè)新的方法，讓jQuery對(duì)象擁有某一個(gè)功能。
通常通過(guò)給$.fn添加方法就能夠擴(kuò)展jQuery對(duì)象。
$是jQuery的簡(jiǎn)寫(xiě)，fn是prototype的簡(jiǎn)寫(xiě)。
$.fn就相當(dāng)于jQuery.prototype
語(yǔ)法：$.fn.方法名? = function(){};
第一步：創(chuàng)建一個(gè)js文件，文件名：jquery.插件名.js? ? ? ；注意不要與jQuery官網(wǎng)現(xiàn)有插件重名。
例如：? ? ? ?命名? ? ? ?jquery.myColor.js? ? ? ? 作用：改變背景顏色
第二步：書(shū)寫(xiě)代碼，給jQuery原型對(duì)象添加一個(gè)與插件名相同的方法。
$.fn.myColor = function(color){//this指當(dāng)前操作這個(gè)方法的jQuery對(duì)象this.css("background-color",color);//為了實(shí)現(xiàn)鏈?zhǔn)骄幊蘲eturn this; };第三步：驗(yàn)證插件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.box{width: 200px;height: 200px;background-color: #ff151a;}</style> </head> <body> <div class="box"></div><!--引入jQuery文件--> <script src="jquery/jquery-3.3.1.js"></script> <!--引入自己制作的插件文件--> <script src="jquery/jquery.myColor.js"></script> <!--驗(yàn)證插件作用--> <script>$(document).ready(function(){$(".box").myColor("#64FF2D").width("400px");}); </script> </body> </html>驗(yàn)證結(jié)果：可以改變?cè)乇尘邦伾?/p>
這樣一個(gè)簡(jiǎn)單的jQuery插件就制作完成了
總結(jié)
以上是生活随笔為你收集整理的jQuery插件的简单使用及制作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 求凸包（两遍扫描，求上下凸包的方法）
- 下一篇： Yii2 behavior运用