`

编写Jquery插件

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
	<style type="text/css">
	table		{ border:0;border-collapse:collapse;}
	td	{ font:normal 12px/17px Arial;padding:2px;width:100px;}
	th			{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px	solid #333;}
	.even		{ background:#FFF38F;}  /* 偶数行样式*/
	.odd		{ background:#FFFFEE;}  /* 奇数行样式*/
	.selected	{ background:#FF6500;color:#fff;}
	</style>
	<!--   引入jQuery -->
	<script src="jquery-1.3.1.js" type="text/javascript"></script>
	<script type="text/javascript">
	//插件编写
	;(function($) {
		$.fn.extend({
			"alterBgColor":function(options){
				//设置默认值
				options=$.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() {
					//判断当前是否选中
					var hasSelected=$(this).hasClass(options.selected);
					//如果选中,则移出selected类,否则就加上selected类
					$(this)[hasSelected?"removeClass":"addClass"](options.selected)
						//查找内部的checkbox,设置对应的属性。
						.find(':checkbox').attr('checked',!hasSelected);
				});
				// 如果单选框默认情况下是选择的,则高色.
				$('tbody>tr:has(:checked)',this).addClass(options.selected);
				return this;  //返回this,使方法可链。
			}
		});
	})(jQuery);

	//插件应用
	$(function(){
		$("#table2")
				.alterBgColor()  //应用插件
				.find("th").css("color","red");//可以链式操作
	})
    
</script>
</head>
<body>
<table id="table2">
	<thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
	<tbody>
		<tr>
			<td><input type="checkbox" name="choice" value=""/></td>
			<td>张山</td>
			<td>男</td>
			<td>浙江宁波</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" /></td>
				<td>李四</td>
			<td>女</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
					<td>王五</td>
			<td>男</td>
			<td>湖南长沙</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" /></td>
			<td>找六</td>
			<td>男</td>
			<td>浙江温州</td>	
		</tr>
		<tr>
		<td><input type="checkbox" name="choice" value="" /></td>
				<td>Rain</td>
			<td>男</td>
			<td>浙江杭州</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
			<td>MAXMAN</td>
			<td>女</td>
			<td>浙江杭州</td>
		</tr>
	</tbody>
</table>
</body>
</html>
分享到:
评论

相关推荐

    如何编写jquery插件

    本文将详细介绍如何编写jQuery插件 类型 jQuery的插件主要分为3种类型 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。此类插件可以发挥出jQuery...

    jQuery插件开发学习

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

    jquery插件编写指南

    ### jQuery 插件编写指南详解 #### 一、引言 在前端开发中,jQuery 是一个非常流行的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画等操作,同时也支持丰富的插件机制。本文将详细介绍如何编写 ...

    用JS编写JQuery插件版的动画播放器

    我们将深入理解jQuery插件的构造,动画原理,并通过分析`player.js`文件中的代码来学习如何创建和控制动画。 首先,jQuery插件的基本结构通常包含两个部分:封装和扩展。封装是为了保持原有jQuery对象的干净,而...

    jQuery插件编写步骤详解

    编写jQuery插件不仅能够提高代码的可复用性,还能提升开发效率。理解并掌握这些步骤和技巧,对于深入学习jQuery和Web开发是非常有帮助的。通过不断实践和优化,开发者可以创造出功能强大、易于使用的jQuery插件,为...

    jquery插件开发文档

    在编写jQuery插件时,首先要了解其基本结构。开发者通常往`jquery.fn`对象中添加一个特定的函数对象,从而创建一个新的插件。例如,创建一个名为`myPlugin`的插件,可以这样定义: ```javascript jQuery.fn....

    jQuery插件开发全解析

    这种方式的好处在于可以在编写jQuery插件时使用 `$` 这个别名,而不会与其他库(如Prototype)的全局变量冲突。 #### 四、小结 通过学习以上两种类型的jQuery插件开发,开发者不仅能够更好地理解和利用jQuery的...

    Jquery快速学(五,常用的插件应用与编写)

    2. **插件编写技巧**:编写jQuery插件时,需要注意几个核心元素,如设置默认选项、接收参数、处理DOM元素、封装代码等。通常,插件会接受用户自定义的配置项,并在内部进行处理。此外,良好的插件设计应考虑到代码的...

    关于JQUERY插件的编写帮助

    当你需要扩展jQuery的功能时,编写jQuery插件是理想的选择。本篇将详细介绍如何编写jQuery插件,帮助你在JavaScript编程中更加得心应手。 一、jQuery插件基础 1. 插件创建结构: 一个基本的jQuery插件定义通常包括...

    Jquery插件-弹窗

    - 编写jQuery插件:在jQuery插件中,你可以定义一个方法,如`.popup()`,在调用这个方法时,显示弹窗;提供关闭方法,如`.closePopup()`,用于关闭弹窗。还可以添加动画效果,如淡入淡出,滑动等。 4. 插件的调用...

    利用jQuery插件构建无限级分类Tree

    在编写jQuery插件时,我们需要考虑以下几个关键点: 1. **数据处理**:接收并解析JSON数据,构建树结构。 2. **HTML结构**:生成具有正确父子关系的HTML元素。 3. **事件绑定**:为展开/折叠按钮绑定事件监听器,...

    jQuery插件开发精品教程(让你的jQuery更上一个台阶)

    最后,编写jQuery插件时,重要的是遵循良好的编码实践。确保插件的代码清晰、结构化,并且提供必要的文档说明和示例。良好的插件不仅方便其他开发者使用,同时也能为自己或社区贡献价值,这也是在软件开发领域中常...

    jQuery插件

    学习如何编写jQuery插件,不仅能够提升个人技能,还能在实际工作中提升开发效率。 在实际应用中,jQuery插件通常遵循以下步骤: 1. 定义插件函数,并将其绑定到jQuery.fn对象上。 2. 在插件内部,使用`this`关键字...

    jquery 插件开发

    jQuery库因其简洁的API和丰富的功能而广受欢迎,而编写jQuery插件则是利用其强大能力的一种方式。 首先,要理解jQuery插件的基本结构。一个简单的jQuery插件通常包含以下部分: 1. **封装器函数**:这是jQuery插件...

    jQuery第5天知识点:隐式迭代、链式编程、jQuery插件.7z

    编写jQuery插件通常涉及以下步骤: - 创建一个函数,接收jQuery对象作为参数。 - 在函数内部,使用`$.fn.extend`将新方法添加到jQuery的原型上,使该方法能作用于jQuery对象。 - 在插件方法中,处理DOM操作、数据...

    jquery插件

    总结来说,学习和编写jQuery插件对于提升JavaScript和前端开发能力大有裨益。通过实践和理解"jQueryPlugin"中的代码,你可以更好地掌握jQuery插件的原理和技巧,进一步提升你的Web开发技能。记得深入研究代码,尝试...

    jQuery插件,jQuery插件

    通过编写或使用jQuery插件,开发者可以轻松地实现特定功能,而无需从零开始编写大量的JavaScript代码。 创建一个jQuery插件通常涉及到以下几个步骤: 1. **封装函数**:首先,你需要将你的功能封装成一个函数,这...

    eclipse上支持jquery插件

    标题“eclipse上支持jquery插件”所指的就是这种能够为Eclipse添加jQuery智能提示和代码辅助功能的扩展。这样的插件使得开发者在编写jQuery代码时,可以享受到如同使用Java或其他语言一样的代码补全、错误检查和调试...

    sublime2 jquery插件

    在编写jQuery代码时,只需按下`Ctrl + Shift + P`,输入`jQuery`,编辑器会自动识别并应用相应的高亮样式,使得代码中的jQuery函数、选择器等元素一目了然。 此外,jQuery插件可能还会提供其他辅助功能,例如代码...

Global site tag (gtag.js) - Google Analytics