$.fn.highlight = function () {

jQuery开辟插件的二种办法

做web开拓的好些个都会用到jQuery,jQuery插件开辟二种情势:意气风发种是类扩张的点子支付插件,jQuery增多新的全局函数(jQuery的大局函数是归于jQuery命名空间的函数卡塔尔国,假若将jQuery看成一个类,那么就相当于给jQuery类自个儿加多方法。第两种是目的扩展的章程支付插件,即jQuery对象增加方法。

 

类扩大的插件

 

类扩张的插件开采最直接的接头便是给jQuery类增添类方法,能够领略为丰盛静态方法。标准的例子便是$.AJAX(卡塔尔(قطر‎那几个函数,将函数定义于jQuery的命名空间中。关于类增添的插件开采能够运用如下二种情势开展扩充:

 

 1.增添全局函数

 

 

$.ltrim = function( str ) {

       return str.replace( /^\s+/, “” );

   };

  调用格局

 

 

var  str=”  去除左空格 “;

console.log(“去除前:”+str.length+”去除后:”+$.ltrim(str).length);

 2.增添七个全局函数

 

 

$.ltrim = function( str ) {

    return str.replace( /^\s+/, “” );

};

 

$.rtrim = function( str ) {

    return str.replace( /\s+$/, “” );

};

 下面这种即便您写的全局函数少之又少的状态下行使非常好,假设多的话建议选取使用$.extend(objectState of Qatar

 

 

$.extend({

    ltrim:function( str ) {

      return str.replace( /^\s+/, “” );

  },

  rtrim:function( str ) {

      return str.replace( /\s+$/, “” );

  }

  });

 3.独立的命名空间

 

就算在jQuery命名空间中,我们严令幸免选用了汪洋的javaScript函数名和变量名。可是照旧不可幸免某个函数或变量主力于别的jQuery插件冲突,因而我们习于旧贯将有个别办法封装到另七个自定义的命名空间。

 

 

$.myPlugin={

      ltrim:function( str ) {

       return str.replace( /^\s+/, “” );

   },

   rtrim:function( str ) {

       return str.replace( /\s+$/, “” );

   }

};

利用独立的插件名,能够制止命名空间内函数的冲突,调用方式:

 

 

var  str=”  去除左空格 “;

console.log(“调用前:”+str.length+”调用后:”+$.myPlugin.ltrim(str).length);

对象扩张的插件

 

1.增多二个对象扩张方法

 

 

  $.fn.changeColor= function() {

    this.css( “color”, “red” );

};

   $.fn.changeFont= function() {

    this.css( “font-size”, “24px” );

};

  调用方式:

 

 

$(function () {

   $(“a”).showColor();<br>       $(“div”).changeFont();

}); 

 2.加多五个指标增添方法

 

 

  (function($){

      $.fn.changeColor= function() {

    this.css( “color”, “red” );

};

   $.fn.changeFont=function() {

    this.css( “font-size”, “24px” );

};

  })(jQuery);

  包容写法(防止前边的函数漏写了;卡塔尔国:

 

;(function($){

      $.fn.changeColor= function() {

    this.css( “color”, “red” );

};

   $.fn.changeFont=function() {

    this.css( “font-size”, “24px” );

};

  })(jQuery);

 
 上边都定义了叁个jQuery函数,形参是$,函数定义完成之后,把jQuery那些实参传递进去.立时调用实施。那样的利润是,我们在写jQuery插件时,也足以应用$这么些外号,而不会与prototype引起冲突.

 

  1. 使用$.fn.extend(object)

 

题外话,查看jQuery源码(版本1.11.1卡塔尔能够看到:

 

 

jQuery.fn = jQuery.prototype = {

    // The current version of jQuery being used

    jquery: version,

    constructor: jQuery,

………………….

    },

jQuery是叁个封装得老大好的类,举个例子语句$(“a”State of Qatar 会生成一个jQuery类的实例。jQuery.fn.extend(objectState of Qatar实际上是对jQuery.prototype进得扩大,正是为jQuery类增添“成员函数”。jQuery类的实例能够动用这一个“成员函数”。

 

 

  $.fn.extend({

  changeColor:function() {

  this.css( “color”, “red” );

},

changeFont:function() {

    this.css( “font-size”, “24px” );

}

});

 介绍了基本是有关指标扩张的底蕴的用法,上面开垦二个简便的好像于代码高亮的效果与利益,如下:

 

 

(function($) {

   $.fn.highlight = function(options) {

     //插件参数的可调控性,外部能够校正私下认可参数

     var defaults=$.extend($.fn.highlight.defaults, options );

     //遍历函数,然后依照参数改换样式

   return this.each(function() {

        var elem = $( this ); 

        var markup = elem.html();

        markup = $.fn.highlight.format( markup );

        elem.html(markup);

        elem.css({

            color: defaults.color,

            fontSize:defaults.fontSize,

            backgroundColor: defaults.backgroundColor

        });

    });

};

//参数暗中同意值

$.fn.highlight.defaults={

计算机网络,            color: “#556b2f”,

            backgroundColor:”white”,

            fontSize: “48px”

        };

//格式化字体

$.fn.highlight.format = function( txt ) {

    return “<strong>” + txt + “</strong>”;

};

})(jQuery);

 

      $(function () {

        //调用插件

        $(“a”).highlight({color:”red”,fontSize:”24px”});

    }); 

 小结

 

jQuery那二种插件开拓的施用,供给依靠开荒过程中的具体情况而定,第意气风发系列扩充的形式相近于C#加上二个静态方法,第三种对象扩展主假诺依据本身的其实业务而规定的,你的网址有个别地点常用的成效自然能够团结写成一个插件,例如说图片的查看,侧面栏的点击,临时你同后生可畏能够斟酌互连网外人写的插件,也足以学到不菲东西.

 

假让你以为本文还能够,有所感悟,给个推荐吧,多谢~

做web开辟的基本上都会用到jQuery,jQuery插件开垦两种方法:意气风发种是类扩展的方法开荒插件,jQuery增加新的全局函数…

在HTML使用插件示例:

 代码如下

<div id=“highlight”>小编是jquery 扩充性实现的高亮字体</div>

 //;为了更加好的宽容性,在此以前有个分部
 ;(function($卡塔尔国{//此处将$作为无名氏函数的形参
  //$.fn.extend 扩充插件
  $.fn.extend({
      “color”:function(valueState of Qatar{//color 自个儿写的插件方法名
       //jQuery提供了css方法能够平素写成this.css(“属性”,”值”卡塔尔;
       return this.css(“color”,value);
      }
  });

复制代码

末了回来this的愿意是,能够继续继续链式编制程序。

<body>
      <div id=”div” onclick=”red()”>dddddddddddddddd</div>
  </body>

    this.each(function(i) {
      var sh = opts[“rowHeight”],
          speed = opts[“speed”],
          _this = $(this);

return this;

代码如下: /*
1.jQuery插件文件名推荐命名叫 jquery.[插件名].js
以防和其他javascript库插件混淆。譬如命名字为jquery.color.js
2.全数的对象…

调用方法:

这种可扩充性能够使我们节省数不尽代码,实今世码的可复用性。

 
 function red(){
  alert($(“#div”卡塔尔国.color(卡塔尔+”注解插件可用”卡塔尔国;
  alert($(“#div”卡塔尔.color(“red”卡塔尔(قطر‎+”评释插件重回了一个Jquery对象”卡塔尔(قطر‎;
  $(“#div”).color(“red”);
 }

  }
})(jQuery);
  
   $(function(){
     $(“div.demo”).myScroll({
          speed:40,
          rowHeight:24
          });
     });
</script> 

}

复制代码 代码如下:

    var opts = $.extend({}, defaults, options),
        intId = [];

下边是达成:

复制代码 代码如下:

 代码如下

$(‘#highlight’).highlight();

 }卡塔尔(jQuery卡塔尔;//这里将jquery作为实参传递给佚名函数

      _this.hover(function() {
        clearInterval(intId[i]);
      }, function() {
        intId[i] = setInterval(function() {
          marquee(_this, sh);
        }, speed);
      });

jquery的可扩大性为我们提供了累累福利,能够本人包装一些内需的功力。

 /*
 1.jQuery插件文本名推荐命名叫 jquery.[插件名].js
以防和别的javascript库插件混淆。比方命名叫jquery.color.js
 2.全体的对象方法名都应当附加到jQuery.fn对象上而富有的全局函数都应当附加到jQuery对象本身上。
 3.在插件内部,this指向的是时下由此选用器获取的jquery对象,而不像相符方法哪样,举例chick(卡塔尔方法,内部的this指向的dom成分
 4.能够通过this.each来遍历全数因素
 5.全体的点子或函数插件,都应当以分集团结尾,否者压缩的时候可能现身难点,为了更安妥一些,以至足以在插件底部先加上叁个子公司,
 避防外人不典型的代码给查询带给影响。
 6.插件应该回到三个jquery对象,以确认保证插件可链式操作。除非插件须求回到的是有个别索要回到的量,譬如字符串可能数组
 7.制止在插件内部使用$作为jquery对象的外号,而应使全部的jquery来代表,那样能够制止冲突。当然,也足以运用闭包这种手艺来走避
 这儿难题,使插件内部继续选用$作为jquery的别名。
 */

<div class=”demo”>
<ul>
  <li><a title=”仿webqq做的二个webos桌面效果”
href=””>仿webqq做的一个webos桌面效果</a></li>
  <li><a title=”图片滚动插件myScroll”
href=””>图片滚动插件myScroll</a></li>
  <li><a title=”使用jquery达成鼠标中键滚轮效果”
href=””>使用jquery达成鼠标中键滚轮效果</a></li>
  <li><a title=”如何成为网页设计大方”
href=””>怎么样形成网页设计行家</a></li>
  <li><a title=”javascript–求数组的最大最小值”
href=””>javascript–求数组的最大相当的小值</a></li>
  <li><a title=”jquery插件—图片自适应容器大小插件”
href=””>jquery插件—图片自适应容器大小插件</a></li>
  <li><a title=”使用css3-PIE让ie也可以扶植css3″
href=””>使用css3-PIE让ie也得以支撑css3</a></li>
</ul>
</div>
</body>
</html>

this.css(‘background- color’,’#fffceb’).css(‘color’,’#d85030’);

html布局如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图