<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <input type="button" value="func1()" onclick="f1()"/> <input type="button" value="func2('xxx')" onclick="f2()"/> <input type="button" value="func3()" onclick="f3()"/> <input type="button" value="func4('xxx')" onclick="f4()"/> <input type="button" value="func5()" onclick="f5()"/> <input type="button" value="func6('xxx')" onclick="f6()"/> <div id="div1"><span class="btn_text"></span>xxx<input type="button" value="plugin1('xxxx')" onclick="pg1()"/></div> <div id="div2"><span class="btn_text"></span>xxx<input type="button" value="plugin2('xxxx')" onclick="pg2()"/></div> <div id="div3"><span class="btn_text"></span>xxx<input type="button" value="plugin3('xxxx')" onclick="pg3()"/></div> <div id="div4"><span class="btn_text"></span>xxx<input type="button" value="plugin4('xxxx')" onclick="pg4()"/></div> <div id="div5"><span class="btn_text"></span>xxx<input type="button" value="plugin5('xxxx')" onclick="pg5()"/></div> <div id="div6"><span class="btn_text"></span>xxx<input type="button" value="plugin6('xxxx')" onclick="pg6()"/></div> <div id="div7"><span class="btn_text"></span>xxx<input type="button" value="plugin7('xxxx')" onclick="pg7()"/></div> <div id="div8"><span class="btn_text"></span>xxx<input type="button" value="plugin8('xxxx')" onclick="pg8()"/></div> </body> </html>
///////////////////// 全局函数 jQuery.func1 = function() { alert('test func1'); }; jQuery.func2 = function(param) { alert('test func2, param is "' + param + '".'); }; jQuery.extend({ func3: function() { alert('test func3.'); }, func4: function(param) { alert('test func4, param is "' + param + '".'); } }); jQuery.myPlugin = { func5:function() { alert('test func5.'); }, func6:function(param) { alert('test func6, param is "' + param + '".'); } }; function f1() { $.func1(); // jQuery.func1(); } function f2() { $.func2("参数2"); // jQuery.func2(); } function f3() { $.func3(); // jQuery.func3(); } function f4() { $.func4("参数4"); // jQuery.func4(); } function f5() { $.myPlugin.func5(); // jQuery.myPlugin.func5(); } function f6() { $.myPlugin.func6("参数6"); // jQuery.myPlugin.func6(); } ////////////////////// jQuery 插件开发(类级别、对象级别), /////// 对象级别开发,jQuery("#id").plugin("aaa")/$("#id").plugin("aaa") // 形式1 (function($){ $.fn.extend({ plugin1 : function(p) { $(this).find(".btn_text").html(p); }, plugin2 : function(p) { this.plugin1(p); } }); })(jQuery); // 形式2 (function($){ $.fn.plugin3 = function(p) { $(this).find(".btn_text").html(p); }; $.fn.plugin4 = function(p) { this.plugin3(p); }; })(jQuery); function pg1(){$("#div1").plugin1("1111");} function pg2(){$("#div2").plugin1("2222");} function pg3(){$("#div3").plugin1("3333");} function pg4(){$("#div4").plugin1("4444");} ///////// 类级别插件开发,jQuery.plugin("aaa")/$.plugin("aaa") (function($){ $.extend({ plugin5 : function(obj, p) { $(obj).find(".btn_text").html(p); }, plugin6 : function(obj, p) { this.plugin5(obj, p); } }); })(jQuery); (function($){ $.plugin7 = function(obj, p) { $(obj).find(".btn_text").html(p); }; $.plugin8 = function(obj, p) { this.plugin7(obj, p); }; })(jQuery); function pg5(){$.plugin5($("#div5"), "5555");} function pg6(){$.plugin6($("#div6"), "6666");} function pg7(){$.plugin7($("#div7"), "7777");} function pg8(){$.plugin8($("#div8"), "8888");}
相关推荐
这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件,提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先,了解jQuery的核心概念是至关重要的。...
### jQuery插件开发全解析 #### 一、引言 jQuery作为一款优秀的JavaScript库,在前端开发领域具有举足轻重的地位。它简化了许多常见的JavaScript任务,使得开发者能够更轻松地处理DOM操作、事件处理以及Ajax交互等...
**jQuery插件开发** 在Web开发领域,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery插件是扩展jQuery功能的一种方式,允许开发者根据需求定制各种功能,如表单验证、...
jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf
jQuery插件开发是扩展这个库功能的一种常见方式,使得开发者能够根据项目需求创建自定义功能。以下是对jQuery插件开发的详细讲解: 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的,这...
本知识点将详细介绍如何开发jQuery插件,并总结五种常见的形态。 ### 一、基础形态 - 功能函数包装 基础形态的插件是将JavaScript函数封装起来,使其能够在jQuery对象上操作。例如,创建一个背景颜色变换插件,它...
jQuery插件开发是一项重要的技能,可以让开发者通过创建可复用的代码片段来增强jQuery库的功能。根据提供的文档内容,以下是一些关于jQuery插件开发的关键知识点: 1. 基本插件结构 在编写jQuery插件时,首先要了解...
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
jquery插件开发是提高前端开发效率的重要方式之一。在本篇文章中,我们将详细解析如何通过$.extend()方法扩展jQuery、如何通过$.fn向jQuery添加新的方法以及如何使用$.widget()方法应用jQuery UI的部件工厂方式创建...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版
**通用JQuery插件开发详解** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。由于其简洁的API和丰富的功能,jQuery成为创建交互式网页的强大工具。...
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
在开发插件时,通常会遇到的第一个问题是防止与其他JavaScript库的冲突。在不同的JavaScript库中,$符号常常被用来表示各自的库实例,为了避免$符号的冲突,可以将jQuery包裹在一个自执行的匿名函数中,并通过jQuery...
首先,要学习jQuery插件开发,我们先要理解插件的概念。jQuery插件本质上是通过某种机制对jQuery核心模块进行扩展的方法或额外功能。在编写属于自己的插件时,我们不仅可以提高开发效率,还可以在不同的项目中重复...
jQuery插件开发是创建可复用、模块化代码的一种有效方式,它允许开发者扩展jQuery的功能,满足特定需求。本文将深入探讨jQuery插件开发的几个关键点:jQuery扩展、私有域以及定义插件的基本步骤。 首先,我们来看...
这篇博文“JQuery插件开发 + 插件”可能涉及到如何创建自定义的jQuery插件以及如何利用这些插件来增强网页功能。下面我们将深入探讨jQuery插件开发的相关知识点。 一、jQuery插件基础 1. 插件定义:jQuery插件是...