jQuery插件使用和写法
2024-10-18 01:50:00
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》第二版
最新文章
- ubuntu14.04下直接修改apache2默认目录导致wordpress样式改变的解决办法
- 【转载】使用Pandas对数据进行筛选和排序
- zeppelin-0.6.0安装配置
- GridView中DropDownList
- 作业七:团队项目——Alpha版本冲刺阶段-01
- Jquery-处理iframe的高度自适应
- CollectionsAPI
- USACO Section 3.2: Stringsobits
- 【原】实战-Java如何使用Redis
- 初次了解CSS3
- hdu 4712 Hamming Distance ( 随机算法混过了 )
- Redis介绍及Jedis测试
- 可以让你神操作的手机APP推荐 个个都是爆款系列
- RPM打包原理、示例、详解及备查
- ResourceExhaustedError 解决方案
- flask框架get post方式
- java json与map互相转换(一)
- iOS:UIToolBar、toolbarItems、BarButtonItem的几种关系
- PHP 多线程采集
- https://github.com/wytings
热门文章
- Queue 消息的发送与接收(PTP 消息传递模型)
- [C++]Hello C++
- HDOJ 4862 Jump
- 基于HTTP和TFTP的PXE批量自动化安装Linux系统
- win7下硬盘安装win7+CentOS双系统方法
- 网页favicon.ico图标设置(转)
- Android_多媒体_SoundPool声音池使用
- AndroidMainFest.xml file missing!
- 解决eclipse project前出现红色感叹号 但没有提示错误出在什么地方build path jar包也没报错
- 关于AIX VG中 LV 的状态问题,LV STATE