jQuery.fn.extend()

jQuery.fn.extend()

extend()方法是定义在jQuery构造函数的prototype对象上面的一个方法,这样做就能使得所有jQuery对象的实例都能共享这个方法。jQuery构造函数的prototype对象可以被简写成jQuery.fn对象。jQuery.fn.extend()方法继承了jQuery原型($.fn)对象。

实例:添加两个方法到jQuery原型($.fn),并且使用他们。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.fn.extend demo</title>
  <style>
label { display: block; margin: .5em; }
     </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 
<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>
 
<script>

//第一种写法:
jQuery.fn.extend({
  check: function() {
  //对 jQuery 对象进行迭代,为每个匹配元素执行函数,实现选中复选框功能。
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
 

//使用新创建的.check()方法
$( "input[type='checkbox']" ).check();
</script>
 
</body>
</html>

jQuery.fn.extend()与jQuery extend()对比

jQuery.extend()是对jQuery对象的扩展,可以理解为静态方法,是全局的,不需要实例jQuery就可以使用。

jQuery.fn.extend()jQuery实例对象的方法,可以理解为普通方法。定义插件时需要返回this,以支持jQuery的链式操作。该方法可以被所有实例共享,所以jQuery实例对象才可以使用。

参考:

posted @ 2017-02-15 08:45  叶子陪你玩  阅读(378)  评论(0编辑  收藏  举报