`
deepsea131
  • 浏览: 27839 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

如何开发自己的jQuery插件

阅读更多

1.在JQuery命名空间内声明一个特定的命名

  1. $.fn.hilight = function() {    
  2.    //在这里输入你的插件执行代码    
  3. };    

我们可以这样调用:

  1. $('#myDiv').hilight();  

2.接收参数来控制插件的行为;
来为我们的hilight插件添加指定前景和背景色的功能,我们需要在函数中允许一个object类型的选项设置。如下所展示的那样:

JavaScript代码
  1. $.fn.hilight = function(options) {        
  2. var defaults = {        
  3.     foreground: 'red',        
  4.     background: 'yellow'        
  5.   };        
  6.       
  7.     var opts = $.extend(defaults, options);        
  8.       
  9. };   

 

现在,我们的插件可以这样来调用:

JavaScript代码
  1. $('#myDiv').hilight({       
  2.   foreground:'blue'       
  3. });     

3.提供公有方法访问插件的配置项值;
上面的代码我们可以做一下改进,使得插件的默认值可以在插件之外被设置。这无疑是十分重要的,因为它使得插件用户可以使用最少的代码来修改插件配置,这其实是我们利用函数对象的开始。

JavaScript代码
  1. $.fn.hilight = function(options) {        
  2.   var opts = $.extend({}, $.fn.hilight.defaults, options);        
  3. };        
  4.          
  5. $.fn.hilight.defaults = {        
  6.   foreground: 'red',        
  7.   background: 'yellow'        
  8. };     
分享到:
评论

相关推荐

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jQuery插件开发学习

    这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件,提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先,了解jQuery的核心概念是至关重要的。...

    JQuery插件开发

    **jQuery插件开发** 在Web开发领域,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery插件是扩展jQuery功能的一种方式,允许开发者根据需求定制各种功能,如表单验证、...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    jQuery插件开发及常用插件大全.zip

    jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf

    jquery 插件开发 pdf

    jQuery插件开发是扩展这个库功能的一种常见方式,使得开发者能够根据项目需求创建自定义功能。以下是对jQuery插件开发的详细讲解: 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的,这...

    jQuery插件开发全解析

    ### jQuery插件开发全解析 #### 一、引言 jQuery作为一款优秀的JavaScript库,在前端开发领域具有举足轻重的地位。它简化了许多常见的JavaScript任务,使得开发者能够更轻松地处理DOM操作、事件处理以及Ajax交互等...

    jquery插件开发文档

    jQuery插件开发是一项重要的技能,可以让开发者通过创建可复用的代码片段来增强jQuery库的功能。根据提供的文档内容,以下是一些关于jQuery插件开发的关键知识点: 1. 基本插件结构 在编写jQuery插件时,首先要了解...

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...

    jquery 插件开发

    jquery插件开发是提高前端开发效率的重要方式之一。在本篇文章中,我们将详细解析如何通过$.extend()方法扩展jQuery、如何通过$.fn向jQuery添加新的方法以及如何使用$.widget()方法应用jQuery UI的部件工厂方式创建...

    jQuery插件开发的五种形态小结

    总结来说,jQuery插件开发中的五种形态小结通过一系列的示例和说明,为开发者展示了如何创建一个高效、可维护的插件。这五个形态涉及到了代码的独立性、链式操作、插件的可配置性、生命周期的管理、无冲突处理以及...

    通用 JQuery 插件 开发

    **通用JQuery插件开发详解** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。由于其简洁的API和丰富的功能,jQuery成为创建交互式网页的强大工具。...

    jQuery插件,jQuery插件

    总的来说,jQuery插件是JavaScript和Web开发中的一大利器,它们提高了开发效率,降低了学习成本,并且使得网站和应用程序具有更丰富的用户体验。jQuery社区提供了无数高质量的插件,涵盖各种功能,为开发者带来了极...

    Dreamweaver 开发jQuery插件

    总的来说,Dreamweaver结合jQuery插件开发,为Web开发者提供了一个高效、直观的工作环境,使他们能够在熟悉的环境中创建功能丰富的交互式网页。通过不断学习和实践,你将能够充分利用这两个工具,提升自己的Web开发...

    jquery插件.rar

    《jQuery插件开发详解》 在Web开发领域,jQuery是一个广泛应用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。jQuery插件是jQuery生态系统的重要组成部分,它们扩展了jQuery的核心...

    好用清除html的jquery插件

    你可以通过查看源代码来学习其工作原理,这对于初学者或者希望深入了解jQuery插件开发的人来说是一个很好的学习机会。 标签“清除html格式”是这个插件的核心特性,它可能包括移除HTML标签、属性、样式以及其他非...

    jquery插件库-jquery仿京东商品详情页图片放大效果.zip

    开发一个jQuery插件通常包括定义一个新的函数,该函数接受参数并利用jQuery对象进行操作。这种设计模式使得开发者能够轻松地将插件整合到自己的项目中。 京东商品详情页的图片放大效果,通常涉及到图片预览、缩放和...

    sublime2 jquery插件

    在Sublime Text 2中安装jQuery插件,可以极大地提升前端开发者的工作效率,使得jQuery代码的编写更加得心应手。 jQuery是一种强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,极大地...

Global site tag (gtag.js) - Google Analytics