自定义插件

 工具类方法：
        扩展的语法：$.extend({
            "方法名":function(){}

        })
        调用：$.方法名()


 对象级别的方法： 
        扩展语法：$.fn.extend({
            "方法名"：function(){}
        })
        调用：$(选择器).方法名()
    */

工具类

   //工具类方法：$.extend()
        $.extend({
            //"方法名":方法  函数
            "ltrim":function(str){
                return str.replace(/^\s+/,"");
            },
            "rtrim":function(str){
                return str.replace(/\s+$/,"");
            },
            "randomCode":function(num){ //4：数字+字母   6：纯数字
                var s1 = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
                if(num==6){
                    //x-y   *(y-x)+x  0-x *x
                    return parseInt(Math.random()*(999999-100000)+ 100000);
                }else if(num == 4){
                    var str = "";
                    for(var i = 0;i<4;i++){
                        str += s1[parseInt(Math.random()*s1.length)];
                    }
                   return str;
                }
            }
        });

        var str = "                      hello world             ";
        console.log("|"+$.trim(str)+"|");

        console.log("|"+$.ltrim(str)+"|")
        console.log("|"+$.rtrim(str)+"|");

        console.log($.randomCode(6));
        console.log($.randomCode(4));

对象

  $.fn.extend({
            "first":function(){
                //this-----选择器选中的对象  ul
               //console.log(this.children()); 
               return $(this.children()[0])
            }
        })

        $("ul").first().css("background","red")  //获取父元素中第一个子元素
        $("p").first().css("background","green");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <table border="1" width='500' class="tab">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>李钰</td>
                <td>不详</td>
                <td>48</td>
            </tr>
            <tr>
                <td>2</td>
                <td>芳芳</td>
                <td>女</td>
                <td>18</td>
            </tr>
            <tr>
                <td>3</td>
                <td>苗苗</td>
                <td>女</td>
                <td>16</td>
            </tr>
            
        </tbody>
    </table>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jquery.ujiuye.js"></script>
    <script>
    /* 
        工具类方法：
        扩展的语法：$.extend({
            "方法名":function(){}

        })
        调用：$.方法名()


        对象级别的方法： 
        扩展语法：$.fn.extend({
            "方法名"：function(){}
        })
        调用：$(选择器).方法名()
    */
   //工具类方法：数组去重
   $.extend({
       "goWeight":function(arr){
            for(var i = 0;i<arr.length;i++){
                for(var j = i+1;j<arr.length;j++){
                    if(arr[i]===arr[j]){
                        arr.splice(j,1);
                        j--;
                    }
                }
            }
            return arr;
       }
   });
  var arr = $.goWeight([4,6,8,3,5,7,8,4,5,6,43,6,6,4,5,6,7]);
  console.log(arr);
    

  //对象级别方法的扩展  隔行变色
  $.fn.extend({
      "changeColor":function(){
        //this--- 选择器选中的标签   this----->$(".tab")
        this.find("tbody tr:nth-of-type(odd)").css("background","pink");
        this.find("tbody tr:nth-of-type(even)").css("background","skyblue");
        return this; //扩展的方法后面需要返回一个jquery对象，方面后面的链式操作
      }
  });
  $(".tab").changeColor();
console.log($.randomCode(4));
    </script>
</body>
</html>

yee只鸟儿.

发布了18 篇原创文章 · 获赞 0 · 访问量 141

私信关注

猜你喜欢