首页 > 代码库 > 编写jQuery插件的方法

编写jQuery插件的方法

2024-09-11 19:11:08   215人阅读

声明:详细内容请看<<锋利的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.所有的方法和函数插件,都应当以分号结尾,否则压缩的时候可能出现问题 .为了更稳妥,可以先在插件头部添加分号,以免其它人的不规范带来的yingx
         6.插件应该返回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>

 

编写jQuery插件的方法


联系
我们