JQuery 实践--扩展JQuery

  • Why扩展JQuery
    通过扩展可以利用JQuery所提供的现有代码基础。避免从头编写代码
  • 有效扩展JQuery的规则
    扩展JQuery的两种形式： $上直接定义实用工具函数 和JQuery包装集进行操作的方法
      1. 文件名以 jquery为前缀
      2. 前缀后接插件的名称
      3. 文件名以.js结尾
      4. 小心$.  用本地化方式引用JQuery： （function($){xxx}）(jQuery)
      5.简化复杂的参数列表：选项散列对象，多个可选参数被击中到单个参数，object名/值对 $.extend(options, actual|| {})
  • 编写自定义的实用工具函数
    添加一个函数作为Object实例的属性，就像声明函数并指派到Object属性那样简单
        （function($){
      $.funName = function(name){xxx}
    })（jQuery）
  • 编写自定义的包装器方法
    通过添加包装器方法，我们自动地获得了jQuery选择器的强大能力以便选择将要操作的元素，而不必亲自完成所有的工作
    包装器方法，必须把包装器方法指派为$命名空间内名为fn的对象属性
     (function($){
        $.fn.funcname = function(params){ return this.css(xxx)}
    })(jQuery)
    方法体内，this是引用包装集，所以可以在上面调用所有预定义的jQuery命令. 如果在包装集方法中声明内联函数，则包装器方法和内联函数用于各自不同的函数上下文。要注意。（闭包）

    规则： 除非有意地让方法返回特定的值，否则应该总是返回包装集作为包装器方法的返回值。这个规则可以让新命令应用于jQuery链
时间： 2024-11-12 02:59:26

JQuery 实践--扩展JQuery的相关文章

jquery extend扩展方法(类方法和对象方法)

一.扩展jquery类方法 /** * 扩展jquery类方法(相当于类的静态方法$.methodName(param)) */ $.extend({ con:function(value){ console.log(value) } }) //类方法调用 $.con('作者是包戬作者是包戬作者是包戬作者是包戬作者是包戬作者是包戬'); 二.扩展jquery对象方法 /** * 扩展jquery对象方法(相当于类的静态方法$('#id').methodName(param)) * 通过id/cl

JQuery时间格式化插件--扩展JQuery

(function($){ $.formatDate = function(pattern,date){ //如果不设置,默认为当前时间 if(!date) date = new Date(); if(typeof(date) ==="string"){ if(date=="") date = new Date(); else date = new Date(date.replace(/-/g,"/")); } /*补00*/ var toFix

Jquery自定义扩展方法（二）--HTML日历控件

一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看看效果图吧 效果图很简单,代码封装在JQuery中,网页端只需要要调用即可: 二.Jquery自定义实体对象 Jquery可以自定义函数function,有没有可以定义实体对象,里面封装方法那?查询了一下资料发现,是可以的,不仅能够封装属性,还可以写自己的方法,调用模板代码如下: $.Calende

JS扩展 或 Jquery的扩展写法

<script>//JS扩展String函数test,其它类推String.prototype.test = function(s){ alert(this+s);}var str = 'hello';str.test('world');//helloworld //JQ扩展(function($){ $.fn.test = function(op){ var defaults = {a:'no'} var setings = $.extend(defaults,op); alert(seti

通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

□ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/Content/jquery-ui.min.css" rel="stylesheet" /> <script src="~/S

【Javascript】jQuery Validate扩展验证方法

/*****************************************************************jQuery Validate扩展验证方法*****************************************************************/// 判断整数value是否等于0 jQuery.validator.addMethod("isIntEqZero", function (value, element) { valu

利用jQuery来扩展一个瀑布流插件

  简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰的理解我将需求写成了注释 扩展代码如下 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 1 (function($){ 2 3 $.fn.WaterFall = function () { 4 5 /* 6 * 瀑布流插件 7 * 容器的宽度固定 8

jQuery Validate扩展验证方法

/***************************************************************** jQuery Validate扩展验证方法 (linjq) *****************************************************************/ $(function(){ // 判断整数value是否等于0 jQuery.validator.addMethod("isIntEqZero", functio

jQuery的扩展与noConflict

jQuery的扩展 noConflict