<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          Jquery插件開發的方法總匯

          時間:?2017-12-28閱讀:?1202標簽:?Jquery

          jquery插件是用來擴展jquery對象的一種方法,它的使用方法是通過jquery對象$來調用。其中Jquery插件開發一共有三種方式:

          $.extend()來擴展jQuery ,主要用于向jquery對象添加靜態方法
          $.fn 向jQuery添加新的方法 , 這里的fn等價于prototype,在jquery原型鏈上添加
          $.widget()應用jQuery UI的部件工廠方式創建,改模式可以帶很多jquery內建的屬性,比如插件的狀態信息自動保存等


          1.使用$.extend()來擴展jQuery

          通過$.extend()向jQuery添加了一個foo函數,然后可以通過$或者jQuery直接調用, 這種方式主要用來定義一些輔助方法是比較方便的。

          jQuery.extend({       
            foo: function(name) {       
              console.log(name);       
           },
          );

          等級于:

          jQuery.foo = function(name) {    
            console.log(name);
          };


          2.使用$.fn開發jquery插件

          1、基本格式:

          這是我們最常用的方式,它的基本格式如下:

          $.fn.pluginName = function() {
              this.css('color', '#fff');
          }

          在$.fn上面添加一個方法,這個方法名字也就是插件名稱 ,這里面的this指的是jQuery選中的元素($('#id‘)。調用如下:

          $(function(){
                  $('#id').myPlugin();
           })


          2、支持鏈式調用

          如何支持jquery的鏈式調用呢?我們只需要最后返回return this即可:

          $.fn.pluginName = function() {
              this.css('color', '#fff');
              return this;
          }


          3、防止$符號污染的jQuery插件

          有很多庫可能都使用了$符號,為了防止它$被其它庫給覆蓋,所以我們可以使用立即執行函數通過傳參的方式封裝插件。形式如下:

          (function($){
               $.fn.pluginName= function(color){
                   this.css("color",color);        
                   return this;
               }
          }(jQuery));

           pluginName支持參數顏色,此時的$只屬于這個立即執行函數的函數作用域,這樣就可以避免$符號的污染。

           

          4、可以接受參數的jQuery插件

          我們可以通過定義一個對象,把插件的參數封裝到對對象的,已對象的形式傳遞進去。
          (function($){
               $.fn.pluginName= function(option){
                   this.css("color",option.color).css("fontSize",option.fontSize+"px");    
                   return this;
               }
          }(jQuery));

          把參數放到一個對象中傳給插件還有一個好處就是我們可以在插件內部為一些參數定義一些缺省值 :

          (function($){
               $.fn.pluginName= function(option){
                   var default = { color:"green",fontSize:12};
                   var opt= $.extend(default ,option);
                   this.css("color",opt.color).css("fontSize",opt.fontSize+"px");    
                   return this;
               }
          }(jQuery));

          注意:在為插件定義默認參數時,一定要把默認參數寫在插件方法內部,這樣默認參數的作用域就在插件內部。 

           

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/292

          利用jQuery not()方法選取除某個元素外的所有元素

          日常的工作中可能會用到,選取處某個或者某些元素外的所有元素。這時我們可以使用 jQuery 遍歷中的 not() 方法來排除某些元素,例如根據元素的 #id ,.class 等排除,代碼如下:

          jquery中toggleClass(), index()

          toggleClass()對設置貨已出被選元素的一個或多個類進行切換。該方法檢查每個元素中指定的類,如果不存在則添加類,如果已設置則將之刪除。這就是所謂的切換效果,不過通過“switch”參數,只能夠規定只刪除或者添加類。

          js和jquery設置css的幾種方式

          js設置樣式的方法: 直接設置style的屬性 某些情況用這個設置 !important值無效、直接設置屬性(只能用于某些屬性,相關樣式會自動識別); 使用setProperty 如果要設置!important,推薦用這種方法設置第三個參數

          在jQuery中使用自定義屬性

          在jquery中 自定義屬性及值,默認以下都是在class=‘acitve‘對象中 進行自定義屬性操作:自定義屬性格式:data-xxxx;審查元素是看不到該屬性的,只能輸出控制臺可以看到該值。

          前端UI攻城獅 你們該拋棄jQuery了

          Web工程師太依賴jQuery了,某種意義上說jQuery已經成了JavaScript的同義詞。但是我們真的需要他么?或許我們應該反思一下什么時候才真的需要jQuery。對我個人而言開始使用jQuery的理由是他把我的工作變得簡單多了

          jQuery的淡入淡出

          在jQuery中的一些特效中,可以通過四個方法來實現元素的淡入淡出,這四個方法分別是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),下面為分別為大家介紹各個方式的使用。

          jQuery UI有四大功能

          jQuery UI (譯:jQuery用戶界面) 是:以 jQuery 為基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件

          jQuery常用知識總結

          jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互,能夠極大地簡化JavaScript編程

          兩種方法使vue實現jQuery調用

          vue是前端工程化使用較多的骨架,那么JavaScript就是我們的前端的細胞。MVVM模式讓我們體驗到前端開發的便攜,無需再過多的考慮DOM的操作。而jQuery需要記憶的內容頗多

          時隔一年,jQuery 發布 3.4.0 版本

          jQuery 團隊的核心開發者 Timmy Willison 今天在官網宣布了 jQuery 3.4.0,這距離上個版本 3.3.x 系列的推出已過去了一年多。Timmy 表示這可能是 3.x 分支的最后一個小版本更新,接下來的工作重心將是 jQuery 4.0 大版本的更新。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网