jQuery插件

前言

由於jQuery廣大的被人們使用,基於jQuery,不少相關的插件也很是的豐富.本文主要記錄一些使用瞭解的插件已備往後須要查詢.
jQuery插件庫鏈接
jQuery之家css

多庫共存問題

平常開發中,會有不僅用一個庫或者一個框架來完成項目.jQuery是用$符號來調用的.也能夠是一些其餘庫或者框架的調用方法.這時候就會產生衝突.解決這種衝突的辦法有三種.html

  • 直接使用jQuery
    直接使用jQuery來調用.使用jQuery.noConflict()或者$.noConflict()能夠將jQuery對$符號的佔用取消.
  • 自定義一個別的代號來替代jQuery獲取別的庫.
    js var temp = $.noConflict(); //temp會替代$符號在jQuery中的功能,指代jQuery.
  • 方法三
    js (function($){/*代碼塊*/})(jQuery) //這是一個函數聲明,並用括號括起來夠成一個表達式,表達式的返回值就是這個函數的引用.在這個函數中用$做爲參數。因此在註釋代碼塊用可使用$符號。

jQuery.color插件

jQuery.color插件是一個專門用於拓展jQuery的animate方法的js庫文件.本來jQuery是不具有讓顏色漸漸改變的動畫效果的,使用了它就能夠了.jquery

jQuery.lazyload 懶加載

jQuery.lazyload插件使一款用於實現圖片懶加載的jQuery拓展庫.git

jQueryUI的使用

jQueryUI是基於jQuery的插件,不過是一個相對龐大的UI庫.基於jQueryUI,咱們能夠快速的開發出比較美觀的UI界面和功能.
jQueryUI官網
[菜鳥教程API](http://www.runoob.com/jqueryui/jqueryui-tutorial.htmlgithub

  • 使用jQuery UI 先引入jQueryUI的css文件,在引入jQuery.js jQueryUI.js ~在入口函數中調用jQueryUI的API.
  • jQueryUI的總體插件中,有很是多的預設css,咱們只須要調用class就能夠快速實現一些css效果.
  • 特效組件 拖到 排序 摺疊

jQuery-fullpage

jquery-fullpage是一款基於jQuery的全屏滾動插件.GitHub下載連接
-可是,我的在使用時候,發現了一些小bug,就是切F12調試的時候,此插件只是當前頁面顯示全屏.一瞬間切換f12會出現下一屏.我的調了好久水平有限...沒解決這一bug.推薦使用下面這款瀏覽器

fullpage插件

fullPage是一款不依賴任何js庫的全屏滾動組件,支持垂直/水平滾動、CSS3 旋轉/縮放動畫,支持 IE5.5+,支持移動設備。GitHub下載連接框架


formValidation.min.js表單驗證插件,
modernizr.min.js(專爲HTML5和CSS3開發的功能檢測類庫),
breakpoints.min.js,( 用於你的響應式設計簡單地設計斷點, Breakpoints.js會觸發自定義事件當瀏覽器進入或退出斷點時。在複雜佈局時很是實用。)jquery插件


本身封裝一個jQuery插件

jQuery的固定格式

(function($){
        在這裏寫拓展的代碼做本身的jQuery
    })(jQuery);

jQuery方法的兩大類

  • 靜態方法 $.方法名(參數) 不須要獲取jQuery對象就能夠調用的
$.extend({
        函數名:function(參數){
            函數體
        }
    })
    $.函數名 = function(參數列表){
        函數體    
    }
  • 實例方法 $(selector).css(property,value) 須要獲取到一個實例對象才能夠調用
$.fn.extend({
        函數名:function(參數){
            函數體
        }
    })
    $.fn.函數名 = function(參數列表){
        函數體    
    }
相關文章
相關標籤/搜索