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,决定是否保留当前元素,这样就可以找到索要匹配的元素节点。
  • 相关阅读:
    python目录操作shutil
    python os.walk
    利用华为eNSP模拟器实现vlan之间的通信
    Python之道1-环境搭建与pycharm的配置django安装及MySQL数据库配置
    利用Excel做一些简单的数据分析
    Django中的枚举类型
    django使用model创建数据库表使用的字段
    ps 命令的十个简单用法
    goinception安装
    docker安装redis 指定配置文件且设置了密码
  • 原文地址:https://www.cnblogs.com/dongguolei/p/7902824.html
Copyright © 2011-2022 走看看