jQuery插件使用和写法
jQuery插件分类3中:
1.封装对象方法的插件。
2.封装全局函数的插件。
3.选择器插件。
jQuery插件机制
jQuery提供了两个用于扩展jQuery功能的方法:
1.jQuery.fn.extend()方法——封装对象方法。
代码如下:
;(function($){
////这里写插件代码
})(jQuery);
2.jQuery.extend()方法——封装全局函数、选择器插件,还有一个很强大的功能,用于扩展已有的Object对象。
代码如下:
jQuery.extend(target.obj1,......[objN]);////用一个或多个其他对象来扩展一个对象,然后返回被扩展的对象。
表格隔行变色示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.odd
{
background-color: Red;
}
.even
{
background-color: Green;
}
.selected
{
background-color: Blue;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
; (function ($) {
$.fn.extend({
"alterBgClass": function (options) {
////设置默认值
options = jQuery.extend({
odd:"odd",
even:"even",
selected:"selected"
},options);
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even", this).addClass(options.even);
$("tbody>tr",this).click(function () {
////判断当前checkbox是否选中
var hasSelected=$(this).hasClass(options.selected);
////选中,则移除Class且checkbox不选中,否则,添加Class且checkbox选中
$(this)[hasSelected ? "removeClass" : "addClass"](options.selected).find(":checkbox").attr("checked", !hasSelected);
});
////如果默认情况下选中,则添加Class
$("tbody>tr:has(td:has(:checkbox:checked))", this).addClass(options.selected); return this;
}
});
})(jQuery); $(function () {
$("#table1").alterBgClass();
});
</script>
</head>
<body>
<table id="table1" border="1">
<tr>
<td>
<input id="Checkbox1" type="checkbox" checked="checked" />
</td>
<td>
123
</td>
<td>
456
</td>
</tr>
<tr>
<td>
<input id="Checkbox2" type="checkbox" />
</td>
<td>
789
</td>
<td>
135
</td>
</tr>
<tr>
<td>
<input id="Checkbox3" type="checkbox" />
</td>
<td>
789
</td>
<td>
135
</td>
</tr>
<tr>
<td>
<input id="Checkbox4" type="checkbox" checked="checked" />
</td>
<td>
789
</td>
<td>
135
</td>
</tr>
</table>
</body>
</html>
注:以上内容摘自——《锋利的jQuery》第二版
jQuery插件使用和写法的更多相关文章
- jquery插件的基本写法
(function($){ var a={name:'2222',age:5555} var b={sex:'男',grade:5555} var c=$.extend({},a,b);//合并到新的 ...
- JQuery插件的写法 (转:太棒啦!)
JQuery插件写法的总结 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提 ...
- jquery插件 - 学习笔记 (插件参数及函数的调用)
今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...
- 自己动手Jquery插件
最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时候 ...
- 用实例一步步教你写Jquery插件
最近Web应用程序中越来越多地用到 了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时 ...
- 动手Jquery插件
自己动手Jquery插件 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供 ...
- jQuery插件写法总结以及面向对象方式写法总结
前两个是jQuery插件,后面2个是以对象的形式开发,都类似. 写法一 (function($, window){ // 初始态定义 var _oDialogCollections = {}; // ...
- 第7章 jQuery插件的使用和写法
第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...
- Jquery插件写法及extentd函数
JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...
随机推荐
- [Xcode]SVN的使用
当发生冲突时: (p)postpone: -mark the conflict be resolved later 保持冲突,手动修改源文件解决冲突 (df)diff-full: -show all ...
- fragment Trying to instantiate a class com.example.testhuanxindemo.MyFragment that is not a Fragmen
在使用fragment的时候,先创建了一个fragment,然后为他创建布局,并在oncreateview中返回载入该视图的后返回的view,在activity的布局文件里,使用xml布局,用frag ...
- MVC Json 回报
/// <summary> /// 获取评论列表 /// </summary> /// <param name="pageIndex">< ...
- IE与FF脚本兼容性问题
(1) window.event: 表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 (2) 获取事件源 IE用srcElement获取事件源,而FF用target获取 ...
- poj 1991 Turning in Homework dp
这个可以证明必须从两边的任务开始交起,因为中间交的任务可以后面经过的时候再交,所以就变成了一个n*n的dp. #include <iostream> #include <cstdio ...
- Filezilla出现中文乱码
使用Filezilla client FTP客户端登陆某些FTP站点会出现中文乱码,原因是FTP服务器端编码与filezilla client端编码不一致造成的,解决方法如下:文件-站点管理-选中要登 ...
- HTTPS原理(转)
HTTPS是什么 HTTPS全称为Hypertext Transfer Protocol over Secure Socket Layer,及以安全为目标的HTTP通道,简单说就是HTTP的安全版本. ...
- hadoop在实现kmeans算法——一个mapreduce实施
写mapreduce程序实现kmeans算法.我们的想法可能是 1. 次迭代后的质心 2. map里.计算每一个质心与样本之间的距离,得到与样本距离最短的质心,以这个质心作为key,样本作为value ...
- 经常使用vi编辑命令
进入 vi 该命令 vi filename :打开或新建文件.在第一行和第一光标 vi +n filename :打开文件,并将光标置于第 n 行首 vi + filename :打开文件,并将 ...
- GDAL切割重采样遥感图像
一个小测试程序开发全过程实录,完全新手入门级的实例,如果你还在为处理大影像而发愁,来试试这个称手的工具吧. Imagec 开发日记 2013-6-25 需求: 影像数据切割,重采样 数据切割的要求是简 ...