前言如今，jquery幾乎是web開發的必備工具。甚至vs神器在2010就開始將Jquery和ui內置到web項目中。至於使用jquery的好處，這裏就不贅述了。用過的我都知道。今天我們來討論壹下jquery的插件機制，jquery有上千個第三方插件。有時候我們寫壹個獨立的函數，如果想和jquery結合，可以用jquery鏈調用。有必要擴展jquery，把它寫成插件。例如，下面是擴展jquery對象的簡單演示:
//sample:擴展jquery對象的方法。Bold()用於加粗字體。
(函數($) {
$ . fn . extend({ bold summary/summary
返回此。CSS({fontweight:bold
}
});
})(jQuery)；
調用方法:
這是壹個非常簡單的擴展。接下來，我們來壹步步分析上面的代碼。
首先，jquery的插件機制
為了方便用戶創建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1.jQuery.extend()方法有壹個重載。
JQuery.extend(object)用於擴展JQuery類本身的參數，也就是說在JQuery類/命名null之間添加壹個新的函數或者調用壹個靜態方法。比如jQuery內置的ajax方法都是用jQuery.ajax()調用的，有點像“類名”的靜態方法。方法名”。讓我們也寫壹個jQuery.extend(object)的例子:
//擴展jQuery對象本身的jquery . Extend({ " minvalue:function(a，b)){//summary/summary。
返回
}、總結/摘要
退貨
}
});//調用
vari = 100j = 101 varmin _ v = $ .minValue(i，j)；//min_v等於100。
varmax_v=$ .maxValue(i，j)；//max_v等於101。
重載:jquery.extend([deep]，target，object1，[objectn])。
用壹個或多個其他對象擴展壹個對象，並返回擴展的對象。
如果沒有指定target，jQuery將被命名為empty以擴展自身。這有助於插件作者向jQuery添加新方法。
如果第壹個參數設置為true，jQuery返回深度副本，遞歸地復制它找到的任何對象。否則，副本將與原始對象共享結構。
未定義的屬性不會被復制，但從對象原型繼承的屬性將被復制。
參數
深度:可選。如果設置為true，則遞歸合並。
目標:要修改的對象。
1:要合並到第壹個對象中的對象。
ObjectN:可選。要合並到第壹個對象的對象。
示例1:
合並設置和選項，修改和返回設置。
Var setting ={validate:false，limit:5，name:foo。
Varoptions={validate:true，name: bar。
JQuery.extend(設置，選項)；
結果:
設置= = {驗證:真，限制:5，名稱:
vardefaults={validate:false，limit:5，name:foo
Varoptions={validate:true，name: bar。
Varsettings=jQuery.extend(空，默認，選項)；
結果:
設置= = {驗證:真，限制:5，名稱:欄。
};
原來jQuery.fn=jQuery.prototype是jQuery對象的原型。那麽jQuery.fn.extend()方法就是擴展jQuery對象的原型方法。我們知道在原型上擴展方法相當於給對象增加了壹個“成員方法”，而類的“成員方法”只能被類的對象調用，所以使用jQuery.fn.extend(object)擴展的方法，jQuery類的實例就可以使用這個“成員函數”。您必須區分jQuery.fn.extend(object)和jQuery.extend(object)方法。
兩個。匿名函數/閉包的自動執行
1.什麽是自執行匿名函數？
指這樣的函數:(function {//code })()；
2.問為什麽(function {//code })()；可以執行，函數{//code }()；妳會報錯嗎？
分析
(1).先明確兩者的區別:(function{//code})是表達式，function{//code}是函數聲明。
(2).其次是js，因為function(){//code}在“編譯”階段已經解釋過了，js會跳過function(){//code}，嘗試執行()；所以它會報告壹個錯誤；
js執行到(function{//code})()時；當，因為(function{//code})是表達式，js會求解得到返回值。因為返回值是函數，所以我遇到了()；當，它將被執行。
另外，函數轉換成表達式的方法不壹定依賴於分組運算符()。我們也可以使用void運算符，~運算符，！操作員...
例如:
bootstrap框架中插件的編寫方法；
！函數($) {
//做點什麽；
}(jQuery)；
和
(函數($) {
//做點什麽；
})(jQuery)；這是壹回事。
匿名函數最大的用途是創建閉包(這是JavaScript語言的特點之壹)，它還可以構建命名空間，減少全局變量的使用。
例如:
vara = 1；
(函數()(){
vara=100
})();
警報(1)；//彈出1
關於更多的閉包和匿名函數，請參見文章匿名函數和Javascript的自執行。
第三，壹步壹步打包JQuery插件。
接下來，讓我們編寫壹個突出顯示的jqury插件。
1.設置封閉區域，防止外掛被“汙染”
//閉包是在named empty (function($){
})(window . jquery)；
2.jQuery.fn.extend(object)擴展jQuery方法，制作插件。
//閉包是在named empty (function($){
$.fn.extend({突出顯示
})(window . jquery)；
3.給出插件的默認參數，實現插件功能。
//閉包是在named empty (function($){
$ . fn . extend({ Highlight//使用jQuery.extend覆蓋插件的默認參數。
This.each(function(){//這是jQuery對象。
//在調用highlight()插件的集合時，遍歷所有要高亮顯示的dom。
var $ this = $(this)；//獲取當前dom的jQuery對象，這裏是當前循環的dom。
//根據參數設置dom的樣式。
$this.css({
背景顏色:opts.background
顏色:opts。前景
});
});
}
});//默認參數
vardefaluts={
前景:紅色，
背景:黃色
};
})(window . jquery)；
至此，高亮插件的基本功能已經具備。調用代碼如下:
$(function(){
$(p//調用自定義高亮插件})；
只能在這裏直接調用，不能在chain中調用。我們知道jQuery可以被鏈式調用，也就是說，在壹個jQuery對象上可以調用多個方法，比如:
$(#id100 pixels })。addAttr(標題
但是我們上面的插件是不能這樣鏈的。比如:$(p100像素)；//我會報告找不到css方法，因為我的自定義插件在完成函數後沒有返回jQuery對象。接下來，返回jQuery對象，這樣我們的插件也支持鏈調用。(其實很簡單，就是當我們執行完我們的插件代碼後，返回jQuery對象，和上面的代碼沒什麽區別。)
jquery如何獲取inputfile的內容？
jquery獲取inputfile中內容的方法:；$("#conter ")。val()；//這樣就可以得到它的值(也就是內容)。
1.jQuery是壹個快速簡潔的JavaScript框架，也是原型化後優秀的JavaScript代碼庫。jQuery設計的宗旨是“writeLess，DoMore”，提倡少寫代碼，多做事。它封裝了JavaScript的常用功能代碼，提供了簡單的JavaScript設計模式，優化了HTML文檔操作、事件處理、動畫設計和Ajax交互。
2.2.jQuery的核心特性可以概括為:獨特的鏈式語法，簡潔明了的多功能界面；它有壹個高效靈活的css選擇器，並且可以擴展；具有便捷的插件擴展機制和豐富的插件。
如何使用插件？
1.用腳本標簽加載jquery框架。2.加載帶有腳本標記的插件。3.看插件有沒有api，根據api調用。4.如果沒有api，自己看源代碼。壹般來說，jquery插件的調用方法是$('element ')。plugName(參數)；其中element是您選擇執行插件方法的對象，plugName是您的插件中的方法的名稱，param是插件方法的參數。當然，有些插件不是這樣調用的，有些插件需要妳在html標簽中添加下面的類。還是要看妳用的插件的api。
詳細講解如何在vue項目中正確引用jquery和jquery-ui插件。
Vue-cliwebpack在全球範圍內引入jquery。
1，先在package.json中添加，
然後nmpinstall
2.在webpack.base.conf.js中添加
3.在module.exports的末尾添加
插件:
4.那麽壹定要再次運行dev。
5.在main.js裏介紹壹下就可以了
將第三方非NPM模塊引入。vue文件。
Vue-cli引入了外部文件
將外部文件添加到webpack.base.conf.js
externals中的Swiper是鍵，對應的值必須是插件swiper.js定義的變量Swiper:
然後將文件導入到根目錄下的index.html文件中:script src = " static/lib/wiper . js " >/script & gt；
這樣就可以把這行代碼:importSwiperfrom'swiper '添加到需要使用swiper.js的文件中，這樣就可以正常使用了。
首頁有哪些插件？
工具類別
用於操作對象、數組等的工具庫。
下劃線. js
Lo-dash與下劃線. js的api基本壹致相比下劃線，具有效率高的優點；可定制的結構
Sugar給原生對象增加了壹些工具和方法。
Functional.js已經從庫裏那裏籌集到了足夠多的支持。
Watch.js監視對象或屬性的變化。
Bacon.js函數式編程，酷
Streamjs通過流的方式對數組和對象執行壹系列操作。
異步過程控制
樸靈制作的Eventproxy。
Arbiter.js詳細信息
發布訂閱
許諾式的
異步. js
模擬的
Mock.js生成隨機數據和mockAjax請求。
Jquery-mockjaxmockajax請求
時基
瞬間
日期
瀏覽器檢測
布瑟檢測特定的瀏覽器和版本。
Ua-parser-js檢測特定的瀏覽器和版本、操作系統、設備類型等。
試運行測試/調試
控制臺-polyfill可以安全地使用console.log()等控制臺方法。
日誌使控制臺輸出的日誌有風格。
js在頁面的壹個元素中輸出日誌信息細節。
Uri.jsuri操作
用於添加、刪除和更改Cookie的cookie工具庫
控制器前端路由庫詳細信息
BigDecimal.js的數字運算以提高精度
JSDoc根據javascript文件中註釋的信息生成API文檔細節。
熱鍵鍵盤事件的封裝
MD5通過MD5加密文件庫。
瀏覽器增強類
讓壹些舊瀏覽器變得很棒的庫
Selectivizr使IE6-8成為壹些css3選擇器。
IeBetter賦予ie6-8高級瀏覽器的特性。
ExplorerCanvas使IE8瀏覽器支持畫布。
CSS3Pie使IE6-9支持邊框-射線、框陰影、線性漸變。妳可以用。htc文件(註意Minetype)或者。js文件。使用Pie.js時，當box-radious的元素有背景色時，不顯示背景色。。。
FormFive允許老瀏覽器支持HTML5表單的壹些特性，比如占位符，自動聚焦。
/anselmh/object-fit使瀏覽器支持對象適配的css規則。
HTML5CrossBrowserPolyfills壹堆Polyfills。
靈活性讓老IE支持Flexbox。
選擇器增強
Lining.js允許瀏覽器實現類似::n-line()，::n-last-line()的效果。
不保密的
Prefixfree使用它，所以寫css的時候，不需要添加瀏覽器前綴。
形級
jquery-file-上傳文件組件詳細信息
ZTree文件樹視圖控件
樹形編輯器。感覺展示的感覺和思維導圖很像。
FileAPI對文件選擇框中文件的壹些處理
表單驗證
。驗證詳細信息
jQuery-驗證-引擎
形態元素美化
統壹提供了對下拉框、菜單、復選框、按鈕等表單元素的美化。
Select2多選下拉框
選擇性和不確定性是相似的。
DropKick下拉框，單選，多選。外表比制服好
Switcheryios7型開關組件
Nouislider使用滾動條來設置/控制(音量等。).
css美化了input元素的外觀。
圖片類
Holderjs生成占位符圖片。
懶人加載
圖像加載在加載完所有選定的圖片後，執行召回。
CSSgram用CSS3的濾鏡實現Instagram濾鏡庫。
圖標類
圖標字體摘要
SVG制作的圖標
svgicons
圖標的
交互效果的HYBICON。例如懸停、點擊
HTML字符實體圖標
/
點擊transformicons圖標，會有壹些變換效果。例如，加號變成了十字。
css3patternscss3制作的可平鋪紋理。瀏覽器兼容性不好。
瀏覽圖片
Fancybox彈出查看圖片，視頻等demo。
Yoxview彈出查看圖片，圖片大小縮放自然。
圖片墻
伍克馬克
UI框架
WeUI是微信官方設計團隊針對微信Web的開發而設計的。
框架7
UI組件類
拖
Dragula支持可拖動、可放下和可排序。感覺比jqueryUI輕巧好用。
角形-dragular dragular官方角形版本
數據可視化(圖表)
百度出品的Echarts。
Highcharts很強大。這是收費的。
可繪圖。壹個基於D3的圖表庫。
Flot文檔不強大
chartJs的中文文檔演示，美觀清晰。相對輕巧。
ichartJs中國的壹個家夥做的，感覺很好。
時間選擇組件
基礎-日期選擇器
壹個簡單的日歷詳細
Fullcalendar支持發布來改變待辦事項的時間。
SimpleEventsCalendar看起來很像。收費5美元
JQueryuidatepicker很經典，不太好聽。
Pickadate是輕量級的，手機友好和美麗的。但是好像只能在彈出層顯示，沒有下拉顯示。
Zebra-datepicker是非常可配置的。但是好像只能在右上方彈出。。。
Bootstrap-datepickerbootstrap樣式
DateRangePicker選擇壹個時間段。Bootstrap風格這個組件依賴於TwitterBootstrap、Moment.js和jQuery。
自定義滾動條
輕量級滾動條。看起來像mac上chrome的滾動條。
Iscroll在移動設備上運行良好。
負載效應
CSSSpinnersCSS做到了
Loaders.cssCSS做的。
表格組件
jsGridDataGrid .詳細的
基於Backgrid的Backgrid數據網格
Excellentexport將表格內容生成到excel中。兼容火狐、Chrome和IE6+
數據表是交互式的(排序、刪除等)。)
Handsontable生成Excel外觀的數據。
JSpreadsheets表數據的組件庫
獲取顏色
範圍
分享到社交網絡
這將生成共享代碼。
編輯
Ace代碼編輯器，可用於demo演示。
編輯
Ueditor百度做的。
Tinymce實時編輯html內容。
Summernote在移動設備上運行良好。
通知組件
notie.js
HTML5播放器
Jwplayer被大量網站使用。
html 5媒體簡單h5player，輕量級
Jplayer功能強大，可以換膚。
顯示
Impress.js各種旋轉，還有奇怪的體驗。
全屏顯示。使用滾輪詳細翻頁。
Zepto.fullpage在移動端側重於fullPage.js，依賴於Zepto。
PagePiling類似於fullPage。
Turn.js做壹本書，有很美的翻頁效果。
放映幻燈片
Slidesjs還是挺好用的，但是幻燈片導航要自己寫CSS，詳細呵呵。
無任何插件依賴的手機平臺ISlider javascript滑動組件細節。
Bgstretcher全屏幻燈片會隨著頁面大小的變化而變化。
Swiper是壹款開源、免費、功能強大的移動觸摸滑動插件Swiper中文網。
硬幣滑塊與IE6兼容。挺好的~。然而，切換模式是逐塊的。無法配置切換模式。。。
Wowslider幻燈片顯示切換時的各種酷炫效果。充電。
Cycle2普通幻燈片不支持垂直滾動。。。
Jcarousel普通幻燈片，不兼容IE6。
顯示3d滾動。做ppt挺好的。
Nodeppt是中國人做的，ppt也挺好的。有些方面比reveal的好。但是生成導出的html有壹些問題。
Roundabout3d開關，看後面圖片邊緣。
彈出框
Magnific-Popup兼容PC和移動設備。還不錯，有5k+星。
中國人開發的層，兼容ie6+。不喜歡它的叫法。
動畫效果
Mixitup使用漂亮的動畫效果來完成排序和過濾。
選取框選取框效果
快速翻轉卡片翻轉效果
卡片翻轉效果2兼容性可以。寫法比較簡單:1，只支持X方向翻轉2，類名指定為3，只能調用壹次。它需要重寫我的改進版本在這裏。
TheaterJS模擬兩個人在屏幕上交談。
midnight.js文本的顏色隨背景變化，而_ explodes。
Color-animationjquery的顏色漸變動畫插件jquery的動畫不支持顏色值的變化。更改庫提供了這種支持。
Transit將元素轉換成css。
Tagcanvas3D標簽雲效果詳解。
Iconate圖片切換動畫
Snap.js左/右導航的外觀效果
CSSshake抖動動畫
點擊ClickSpark.js後的壹些很酷的效果
視覺差異插件
Scrollorama相對簡單。
Superscrollorama可以做更多的事情，但是它需要使用第三方的補間庫，使用