zoukankan      html  css  js  c++  java
  • jquery插件开发

    高效开发和使用插件

    一.创建jquery插件
    (1).类型
    1.jquery方法
    将常用的或者重复使用的功能定义为函数,后绑定到jquery对象上,从而成为jquery对象的一个扩展方法
    例如parent()   appendTo()  addclass()方法
    2.全局函数
    也可以把自定义的功能函数独立附加到jquery命名空间下,从而作为jquery作用域下的一个公共函数使用。
    ,由于全局函数没有绑定到jquery对象上,所以不能通过选择器获取的对象上调用,需要通过jquery.fn()或者$.fn()方式进行引用
    3.选择器
    可以自定义选择器,以满足特定环境下的选择元素的需要
    (2).解析jquery插件机制
    jquery.extent()和jquery.fn.extent()方法
    其中jquery.extend()方法能够创建全局函数或者选择器,而jquery.fn.extent()方法能够创建jquery对象方法。
    例子:jquery.extend({
    minvalue:function(a,b){return a<b?a:b;}
    })
    $(function(){
    $("p").click(function(){
    var a=jquery.minvalue(a,b);
    })
    })
    jquery.extent()和jquery.fn.extent()方法都包含一个参数,改参数仅接受名/值对结构的对象,其中名表示函数或方法名,而值表示函数体。
    前者可以创建插件,还能扩展jquery对象。
    合并操作,相同的属性名,后面的值覆盖前面的值

    在实际的开发中,常常使用jquery.extend()方法为插件方法传递系列选项结构的参数

    function fn(options){
    var options=jquery.exten({
    name1:value1,name2:value2,name3:value3
    },options);
    }
    档调用该方法时,如果想传递新的参数值,就会覆盖掉默认的参数选项值,或者向函数添加新的属性和值;如果没有传递参数,则保持并使用默认值,
    fn({name1:value2,name2:value3,name3:value1});//覆盖新值
    fn({name4:value4,name5:value5});//添加新的选项
    fn();//保持默认值    
    这就是jquery.extend()方法的对象合并机制
    (3)创建jquery全局函数
    jquery内置的很多方法都是通过全局函数实现的。
    全局函数就是jquery对象的方法,实际上就是位于jquery命名空间内部的函数
    共同特征,不直接操作dom元素,而是操作javascript的非元素对象,或者执行其他非对象的特定操作,如jquery的each()函数和noconflict()函数
    实例:jquery:css8={
    minvalue:funciton(a,b){
    return a<b?a:b;
    }
    }
    调用时   var c=jquery.css8.minvalue(a,b);
    这样可以避免与别的插件发生冲突,建议在书写过程中始终使用jquery来调用jquery方法
    (4)使用jquery.fn对象创建jquery对象方法
    除了全局函数外,jquery中的多数功能都是通过jquery对象的方法提供的,创建全局函数只需要通过jquery对象添加属性即可,而创建jquery对象方法也可以通过jquery.fn对象添加属性来实现。实际上jquery.fn对象就是jquery.prototype原型对象的别名,使用别名更方便引用。
    例子:jquer.fn.test=function(){
    alert("asdfasdf");
    }
        匹配多个元素时,我们该如何准确指定当前元素对象呢?
    javascript代码
    jquery.fn.test=function(){
    this.each(function(){
    alert(this.nodename);
    })
    }
     
    jquery代码
    $(function(){
    $("body *").click(function(){
    $(this).test();
    })
    })
      如果要实现行为的连写功能,应该在每个插件方法中返回一个jquery对象,除非方法需要明确返回值。返回jquery对象通常就是this所引用的对象
    例子:将上面javascript代码中的第二行改为
    return this.each(function(){
    alert(this.nodeName);
    })
      
    jquery代码中
     $(this).test().hide().height();
     
    (5)使用extend()方法创建jquery对象方法
    jquery.extend()方法能够创建全局函数,而jquery.fn.extend()方法可以创建jquery对象方法。
    代码:
    jquery.fn.extend({
    test:function(){
    return this.each(function(){
    alert(this.nodeName);
    });
    }
    })
           jquery.fn.extend()方法仅包含一个参数,该参数是一个对象直接量,是以名/值对形式组成的多个属性,名称表示方法名称,而值表示函数体。因此,在这个对象直接量中可以附加多个属性,为jquery对象同时定义多个方法。
     
    上面的方法,可以在jquery选择器中直接调用,
    代码:
    $(function(){
    $("body *").click(function(){
    $(this).test()://调用jquery对象方法
    })
    })
    (6)创建自定义选择器
    jquery选择器通过一组正则表达式来分析选择符,然后,针对解析出来的每一个选择符执行一个函数,这个函数被称为选择器函数。最后根据这个选择器函数的返回值是否为true,决定是否保留当前元素,这样就可以找到索要匹配的元素节点。
  • 相关阅读:
    Linux文件属性
    [Oracle] Listener的动态注册
    jQuery easyUI Pagination控件自定义div分页(不用datagrid)
    桂林电子科技大学出校流量控制器Android版1.0.0
    php使用check box
    Python windows ping
    Python selenium chrome 环境配置
    Linux wget auto login and backup database
    PyQt4 ShowHMDB show sqlite3 with QTableWidget summary
    PyQt4 py2exe 打包 HardwareManager
  • 原文地址:https://www.cnblogs.com/dongguolei/p/7902824.html
Copyright © 2011-2022 走看看