jQuery.fn.extend() 与 jQuery.extend()

bootstrap form-group和form-control 如何行内布局,如何水平布局。

jQuery.fn如何扩展。

jQuery插件 $.fn(object)与$.extend(object)

jQuery提供了两个方法帮助开发插件

  • $.extend(object);扩展jQuery类本身;
  • $.fn.extend(object);扩展jQuery对象;

一、$.fn

$.fn 等于 $.prototype;这样就好理解了,就好比对String.porotype增加一个函数,然后所有的字符串对象都能够直接调用,
jQuery也是如果。给jQuery增加一个函数,然后所有的jQuery对象都能够调用。jQuery对象就是$("#id")或

$(document.getElementById("Id"))这些;
在写法上可以
$.fn或$.fn.extend({})

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>

     $.fn.clear = function(){
          $(this).html(‘‘);	//写法一
      }

	$.fn.extend({
          clear:function(){
             $(this).html(‘‘);	//写法二
          }
    })

    $(function(){
        $("#btn1").click(function(){
        	$("h1").clear();
        })

    })
</script>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<input type="button" id="btn1" value="确定" />
</body>
</html> 

二、$.extend();

我们知道$就是jQuery对象。所以
$.extend其实就是扩展"jQuery"这个对象本身的函数。实际上相当于你创建了一个object对象,然后object.abc = function(){}

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
     $.clear = function(obj){
          obj.html(‘‘);			//写法一
      }

	$.extend({
          clear:function(obj){
             obj.html(‘‘);		//写法二
          }
    })

    $(function(){
        $("#btn1").click(function(){
        	$.clear($("h1"));
        })
    })
</script>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<input type="button" id="btn1" value="确定" />
</body>
</html> 
时间: 2024-08-10 00:48:32

jQuery.fn.extend() 与 jQuery.extend()的相关文章

jQuery.extend()、jQuery.fn.extend()扩展方法详解

jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以用来扩展jQuery对象

jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法. 其中jQuery.extend()方法能够创建全局函数或者选择器, 而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 复制代码代码如下: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以

jQuery插件开发及jQuery.extend函数详解和jQuery.fn与jQuery.prototype区别

一.jQuery插件开发分为两种:  1.类级别: 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); var i = $.add(3,2); var j = $.minus(3,2); 2.对象级别: 对

全面认识jQuery.fn,菜鸟总结

今天想做树形导航栏,查找了资料,找到了一个框架,比较小所以研究其中的代码,发现第一句话就把我难住了,主角是——jQuery.fn. 在此,再次停住,只好继续找资料,现在整理下自己所理解到的知识. 一,jQuery.fn是什么       答:从jqurey源代码,如下小段: Java代码   jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) {

使用jQuery.fn自定义jQuery翻页插件

第一次写jQuery插件.自己感觉写的也不怎么样.写jQuery插件利用的就是这个东东 jQuery.fn,例如 jQuery.fn.pluginName=function(){}; 这个是我写的分页插件的样子 插件通过一个外放的函数来进行翻页操作,无论是点击前进.后退.还是改变页面大小,都会调用该函数. 先看看插件的代码结构 (function ($) { //存放插件所需的属性字段 var PagerFields = { }; //插件的私有函数 function setImageButto

Jquery源码中的Javascript基础知识(四)— jQuery.fn.init方法

$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } 下面是init方法代码: 1 init: function( selector, context, rootjQuery ) { 2 var match, elem; 3 if ( !selector ) { 4 return this; 5

jQuery源代码学习之六——jQuery数据缓存Data

一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所有用户自定义数据都被保存在这个对象的cache属性下,cache在此姑且称之为自定义数据缓存: 自定义数据缓存和DOM元素/javascript对象通过id建立关联,id的查找通过DOM元素/javascript元素下挂载的expando属性获得 话不多说,直接上代码.相关思路在代码注释中都有讲解

jQuery源代码阅读之一——jQuery总体结构及jQuery构造函数

一.jQuery总体架构 jQuery作为一款强大的js库,由以下模块构成: (function(window,undefined){ var jQuery=function(selector,context){ //... }; //工具方法utilities //回调函数 callbacks //异步队列 Defered Object //浏览器功能测试 Support //数据缓存 Data //队列 Queue //属性操作 Attributes //事件系统 Events //选择器

五.jQuery源码解析之jQuery.extend(),jQuery.fn.extend()

给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生.jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN])这两个属性都是用于合并两个或多个对象的属性到target对象.deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.通过这种方式可以在jQuery或jQuery.fn

jquery插件之jquery.extend和jquery.fn.extend的区别

jquery.extend jquery.extend(),是拓展jquery这个类,即可以看作是jquery这个类本身的静态方法,例如: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/