jQuery插件学习基础

1、给jQuery添加全局的函数:

$.zgz={  fn1:function(){ alert(‘我是刚设置的第一个全局函数‘) },fn2:function(){ alert(‘我是刚设置的第二个全局函数‘) } }

$(function(){

$.zgz.fn1();

$.zgz.fn2();

})

2、给jQuery添加拓展函数方法一:

$.fn.zgz=function()

{

alert(this.length)

}

$(function(){

$(‘oDiv‘).zgz();

})

给jQuery添加拓展函数方法二:

$.fn.extend({          
           funTest:function(option){     // 方法名称加不加""都可以         
               var defaults = {       //$.extend 方式之一
                   name:"zhanggo",
                   age:24,
                   address:"sr10000",
                   code:007
               };
               
               var opts = $.extend({},defaults,option);                
                    alert("扩展后的结果:姓名="+opts.name+",年龄="+opts.age+",住宅="+opts.address+",ID="+opts.code);
           
           },
       
           funTest2:function(str){
               var ele = this;  //jquery对象
               alert(ele.attr("class"));
               alert(str);
           }
     });

$(function(){
    
      var oDiv=$(‘#zgz‘);
      
     //oDiv.zgz();
     var option = {name:"zgz",age:343,address:"beijing","code":"6789008"}
    
     oDiv.funTest(option);
      
      
      
    })

时间: 2024-11-03 22:13:16

jQuery插件学习基础的相关文章

jQuery插件学习笔记

最近在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能.通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率. 虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名.但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习

JQUERY插件学习之jQuery UI

jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序.所有插件测试能兼容 IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome. 组件构成 jQuery UI 主要分为3个部分:交互.微件和效果

jquery插件 - 学习笔记 (插件参数及函数的调用)

今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></script>$.ImageZoom({ imageSelector: ".imgBox img", //图片选择器 wrapSelector: ".list-images", //层选择器 allowCustomeZoom: true, //允许手动缩放 spe

jQuery插件学习(一)

由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会对插件进行一些研究,现将学习的一些重要内容记录下来,供那些像我一样的初学者借鉴下.嘻嘻. (一)jQuery为开发插件提拱了两个方法 jQuery.extend(); 为扩展jQuery类本身.为类添加新的方法: jQuery.fn.extend();给jQuery对象添加方法: 它们之间的区别是:

jquery插件学习相关(1)

jQuery插件机制 jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extend()和jQuery.extend()方法 jQuery.fn.extend()用于封装对象方法插件 jQuery.extend()用于封装全局函数的插件和选择器插件,同时也可扩展已有的Object对象. jQuery.extend() jQuery.extend(target,obj1...objN) 常用于设置插件方法的一系列默认参数 function foo(option){ opt

关于jQuery插件imgAreaSelect基础讲解

关于ImgAreaSelect,  是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳.图片编辑等~~来具体看一下 1.先下载imgAreaSelect插件 下载地址: 英文:http://odyniec.net/projects/imgareaselect/ 中文:http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html 在头部引用: <link rel="styl

Jquery 插件学习笔记

Jquery 插件 1表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

编写自己的jquery插件之基础

1.编写jquery插件要遵循命名规范,通常情况下,jquery插件采用这种模式进行命名:jquery.pluginName.js,压缩版为:jquery.pluginName.min.js 2.编写jquery插件的方式有3种,第一种是通过jquery函数的原型属性来编写插件.第二种是采用jQuery.extend()方法.第三种是使用强大的jQuery UI Widget Factory编写插件.这里我选择用jQuery函数的原型属性来编写. 2.1    jQuery源码中有这样一句代码:

jQuery插件学习之选项卡Tab

在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel tabs-3-panel MyUI-tabs 创建选项卡组件 使用方法: html结构 <div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li>