编写jQuery插件的方法

声明:详细内容请看<<锋利的jquery>>这本书 这里没对自定义选择器作介绍 因为我感觉jQuery已经为我们定义足够的选择器已经满足使用 <!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编写jquery插件</title></head>
<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>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script><script type="text/javascript">/*   一: jquery的插件主要分为三种类型1.封装对象方法的插件 这种方法是将对象方法封装起来,用于对通过选择器获取的jquery对象进行操作,是醉常见的操作2.封装全局函数的插件:可将独立的函数加到jquery命名空间之下3.选择器插件:选择器插件 用来扩充自己喜欢的选择器二:插件的基本要点:1.命名要点:jquery.[插件名].js; jquery.color.js 以免和其他javascript库插件混淆2.所有的对象方法应该附件到jquery.fn对象上,而所有的全局函数都应附件到jquery对象本身上3.在插件内部,this指向的是当前通过选择器获得jquery对象,而不像一般的方法那样,例如click()方法内部的this指向dom元素4.可以通过this.each()来遍历所有的元素5.所有的方法和函数插件,都应当以分号结尾,否则压缩的时候可能出现问题 .为了更稳妥,可以先在插件头部添加分号,以免其它人的不规范带来的yingx6.插件应该返回jquery对象,以免他人不规范代码给插件带来影响.7.避免在插件内部使用$作为Jquery对象的别名,而应使用完整的Jquery来表示 这样可以避免冲突 当然也可以利用闭包这种技巧回避这个问题 使用插件内部继续使用$作为Jquery的别名三:jquery插件机制: jquery提供了两个扩展Jquery的方法 :1.jquery.fn.extend()方法:用于扩展封装对象方法的插件2.jquery.extend()方法:用于扩展封装全局函数 和选择器插件的方法     */ ;(function($){$.fn.extend({"alterBgColor":function(options){//插件代码//jQuery.extend()方法经常被设置插件的方法的一系列默认的参数 而且可以很方便地的传入参数覆盖默认值
                options=$.extend({//m默认的设置
                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);$(this)[hasSelected ? "removeClass":"addClass"](options.selected)//查找内部的checkbox设置对应的属性
              .find(":checkbox").prop("checked",!hasSelected);//如果默认情况下选中则高亮
           });$("tbody>tr:has(:checked)",this).addClass(options.selected);return this;}});})(jQuery);//封装全局函数的插件
    ;(function($){$.extend({ltrim :function(text){//去掉左边的空格//(test || "")防止传进来的字符串变量处于未定义之类的特殊状态 如果test是undefined 则返回字符串""return(text || "").replace(/^\s+/g,"");},rtrim:function(text){//去掉右边的空格return(text || "").replace(/\s+$/g,"");}});})(jQuery);//应用该插件 可以链式操作
    $(function(){$("#table2").alterBgColor().find("th").css("color","red");$("#trimTest").val (jQuery.rtrim("  text  "));});</script>
<body><table id="table1"><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>
<br /><br />
<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><!-- 有些东西真的那么脆弱 -->  <textarea id="trimTest" rows="5" cols="20"></textarea></body>
</html>

转载于:https://www.cnblogs.com/hu-bo/p/6655245.html

编写jQuery插件的方法相关推荐

扩展编写jquery插件的方法
比如要扩展验证功能(jquery.validate.js)中的 messages: { required: "This field is required.", remote: & ...
自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
编写JQuery插件-2
继续上一节的代码 (function(){/* code */ })() 来我们介绍一下吧,首先定义一个匿名函数 fnction(){/* 这里放置代码 */} 然后用括号括起来, (fnction( ...
如何编写一个Jquery插件
首先我们来搞清楚一些关于Jquery插件的知识: 一.插件的种类: 封装对象方法的插件这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件封装全局函数的 ...
[置顶] 编写自己的JQUERY插件
如何编写自己的jquery插件 Jquery的插件主要分为三类: 1.封装对象方法的插件:大部分插件都是封装对象的插件 2.封装全局函数的插件:将独立的函数添加到jquery的命名空间之下.Jquer ...
jQuery插件编写，
jQuery插件编写 jQuery插件最近搞jquery插件的编写这里做下笔记给jquery扩展的方式很多,看的我眼花缭乱方式1 $.fun=function(){} 方式2 $.fn.fun= ...
jquery封装插件的方法
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 一.入门编写一个jQuery插件开始于给jQuery.fn ...
jquery插件封装指南
入门编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn.myPlugin = function(){//你自己的插 ...
锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件类似于jQuery中的live()方法 4.jQuer ...
jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

编写jQuery插件的方法

编写jQuery插件的方法相关推荐

最新文章

热门文章