技术文章
当前位置:首页 > jQuery技术文章 > jquery插件制作简单示例说明

jquery插件制作方法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:161

这篇文章主要知识点是关于jquery、插件制作、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF出版:人民邮电出版社作者:(印) 乔希 (Joshi,V.) 著,
立即下载

更多jQuery相关的学习资源可以参阅 jQuery电子书程序设计电子书 等栏目。

jquery插件制作简单示例说明

一、先从一个简单的实例,不需要带参数的一个方法开始

//创建一个匿名函数
(function($){
//给jQuery附加一个新的方法(详细见备注1)
$.fn.extend({
//插件的名字
MyFirstName: function() {
//迭代当前匹配元素集合
return this.each(function() {
var obj = $(this);
//自己的代码
});
}
});
)(jQuery);

备注1:理解$.fn.extend和$.extend的区别,大概的说前者是将MyFirstName这个方法合并到jquery的实例对象中,例如$(“#txtmy”).add(3,4)这样调用方法,后者是将MyFirstName这个方法合并到jquery的全局对象中,例如$.add(3,4); 这样调用方法

二、有参数的

//创建一个匿名函数
(function($){
//给jQuery附加一个新的方法(详细见备注1)
$.fn.extend({
//插件的名字
MyFirstName: function() {
//定义默认参数
Var parms={
Parms1:1,
Parms2:2
}
//合并用户传的参数和默认参数,返回给options(详细见备注2)
var options = $.extend(defaults, options);
//迭代当前匹配元素集合
return this.each(function() {
//把合并后的参数赋值给o
var o= options;
//迭代当前匹配元素
var obj = $(this);
//自己的代码
});
}
});
)(jQuery);

备注2:var options = $.extend(defaults, options); 意思是把defaults和options合并,如果后者有和前者名称一样的元素,后者覆盖前者,然后合并给defaults,然后defaults赋值给options,如果是var options = $.extend({},defaults, options);那么是把前者和后者合并给{}这个参数,然后赋值给options,defaluts的结构和值都没有变化

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到同域jQuery(跨)iframe操作DO、 jQuery中Find选择器的用法和、 jquery点击元素后滚动条滚、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:JQuery程序的代码风格详解

下一篇:jQuery动态创建html元素的实例代码和方法

展开 +

收起 -

jquery插件 相关电子书
学习笔记
网友NO.755237

jquery.validate表单验证插件使用详解

今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可。 我们常见的校验规则有以下几种: (1)required:true 必输字段 (2)email:true 必须输入正确格式的电子邮件 (3)date:true 必须输入正确格式的日期 (4)dateISO:true 必须输入正确格式的日期(ISO) (5)digits:true 必须输入整数 (6)equalTo:"#pass" 输入值必须和#pass相同 (7)maxlength:5 输入长度最多是5的字符串 (8)minlength:10 输入长度最小是10的字符串 (9)rangelength:[5,10] 输入长度必须介于 5 和 10 之间 (10)range:[5,10] 输入值必须介于 5 和 10 之间 (11)max:5 输入值不能大于5 (12)min:10 输入值不能小于10 然后接着写提示字段就可以了,不过可以不写,因为它有……

网友NO.815538

jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

原项目地址:http://plugins.jquery.com/project/pagination 版本:v1.2 源文件下载:英文原版 或中文翻译修改版 一、相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面 二、简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持text-align的定位。 对原js文件注释进行了中文翻译,demo页面也是汉化了的,demo页面的js与原demo有一些出入,但核心不变。 三、使用方法 跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是 pagination ,例如 $("#page").pagination(100); ,这里的100参数是必须的,表示显示项目的总个数,这是最简单的使用,得到的显示如下: 还有一……

网友NO.421163

让图片旋转任意角度及JQuery插件使用介绍

引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中 就是将id为rotate-image的图片旋转45度。 不过,貌似在Chrome中总是不显示。 唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽。 解决办法是,把$("#rotate-image").rotate(45);放在 $(window).load(function(){ });中,因为在Chrome中图片在执行$(document).ready(function(){ });中的语句时并没有加载完图片,坑爹啊。 另外可以更方便的通过调用$("选择器").rotateRight()和$("选择器").rotateLeft()来分别向右旋转90度和向左旋转90度。 jquery.rotate.js: jQuery.fn.rotate = function(angle,whence) { var p = this.get(0); // we store the angle inside the image tag for persistence if (!whence) { p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360; } else { p.angle = angle; } if (p.angle = 0) ……

网友NO.614644

jQuery Validate表单验证插件的基本使用方法及功能拓展

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家。 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情。要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素; 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击、获取焦点、失去焦点等事件,并设置这些事件对应的执行函数; 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式。 这3类基本要素中,html表单结构的创建相对简单。表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息。这里我参考了百度,163邮箱,京东等知名互联网……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息