欧美极品高清xxxxhd,国产日产欧美最新,无码AV国产东京热AV无码,国产精品人与动性XXX,国产传媒亚洲综合一区二区,四库影院永久国产精品,毛片免费免费高清视频,福利所导航夜趣136

標(biāo)題: JQuery中.fn、.fn.extend、.extend心得 [打印本頁]

作者: hongniu 時(shí)間: 2015-6-25 16:54
標(biāo)題: JQuery中.fn、.fn.extend、.extend心得
Web開發(fā)肯定要使用第三方插件，對于一個(gè)炫麗的效果都忍不住想看看對方是如何實(shí)現(xiàn)的，剛下載了一個(gè)仿京東商品鼠標(biāo)經(jīng)過時(shí)局部放大的插件。看了兩眼JQuery源碼，看看就感覺一頭霧水。JQuery本來自己學(xué)的就半吊子，再加智商又不驚人。。。當(dāng)開發(fā)插件的時(shí)候難免會(huì)使用$.fn與$.extend。原來看到這個(gè)時(shí)候非常抵觸，今天再次看到的時(shí)候簡單的查了查外加一個(gè)Demo實(shí)驗(yàn)了一下。以下為幾分鐘補(bǔ)腦后的小記，如有錯(cuò)誤請大神急時(shí)指出以免誤導(dǎo)他人。

   進(jìn)入正題：

      1、$.fn.【UserDefinitionName】（PS：UserDefinitionName為自定義的方法名稱）
         $.fn是指JQuery的命名空間，加上fn上的方法及屬性，會(huì)對JQuery實(shí)例每一個(gè)都有效。例如：
      <script type="text/javascript">
         $.fn.sayhello = function () {alert('提示：$.fn.sayhello'); };
               $(document).ready(function () {
               $("#btn").sayhello();    // btn為Button的Id
         });
      </script>

      注：我對$.fn的理解是相當(dāng)于給一個(gè)Object對象添加了一個(gè)擴(kuò)展方法（PS：個(gè)人觀點(diǎn)）

      2、$.extend
      其實(shí)他和$.fn是非常相似的，詳細(xì)做Web的人大部分都用過$.ajax、$.get等方法，而這個(gè)$.extend就是用來添加自定義”靜態(tài)”方法的。例如：

<script type="text/javascript">
      $.fn.sayhello= function () { alert('提示：$.fn.sayhello');};
      $.extend({
         sayChinese: function () { alert('提示：世界、你好！');},
         sayEnglish: function () { alert('Message：Hello World !');}
      });
      $(document).ready(function () {
         $("#btn").sayhello();
         $.sayChinese();
         $.sayEnglish();
      });
</script>

3、$.fn.extend
      如果你要問我這個(gè)與$.fn.【UserDefinitionName】有什么區(qū)別，那我只能說“我母雞耶。。。”！我測試了一下他與$.fn.【UserDefinitionName】都能實(shí)現(xiàn)Object對象的擴(kuò)展方法。原因我不清楚。不過還是貼出這個(gè)的代碼吧
<script type="text/javascript">
      $.fn.sayhello = function () {alert('提示：$.fn.sayhello'); };
      $.extend({
         sayChinese: function () { alert('提示：世界、你好！');},
         sayEnglish: function () { alert('Message：Hello World !');}
      });
      $.fn.extend({
         objectMethod: function () { alert('提示：$.fn.extend'); }
      });
      $(document).ready(function () {
         $("#btn").sayhello();
         $.sayChinese();
         $.sayEnglish();
         $("#btn").objectMethod();
      });
</script>

   4、$.【UserDefintionName】
      這個(gè)與$.extend如出一轍，如果硬要讓我說他倆不同點(diǎn)那只能說寫法不通了
      <script type="text/javascript">
         $.fn.sayhello = function () {alert('提示：$.fn.sayhello'); };
         $.extend({
            sayChinese: function () { alert('提示：世界、你好！');},
            sayEnglish: function () { alert('Message：Hello World !');}
         });

      $.fn.extend({
         objectMethod: function () { alert('提示：$.fn.extend'); }
      });
      $.CodeMonkey = function () {alert('CodeMonkey是神！');};
      $(document).ready(function () {
      $("#btn").sayhello();
         $.sayChinese();
         $.sayEnglish();
         $("#btn").objectMethod();
         $.CodeMonkey();
      });
</script>

PS：下載地址中只貼出HTML文件，JQuery腳本自己下載吧。把上面的JS引用替換成你的JQuery文件路徑即可！

歡迎光臨 (http://www.raoushi.com/bbs/)