js自定义封装方法

CreateTime--2016年10月16日15:18:18

Author:Marydon

声明：该文章主要是记录了需要使用javascript实现对日常需要的方法进行封装，封装方法大部分都是百度解决的，（这里只是针对我用到的做个汇总），特此声明！

使用方法：将需要的方法复制到<script>标签体中，在下面直接调用对应的方法即可

一、自定义js的添加&移除类名方法

　　参考链接--

//自定义js的addClass()和removeClass()方法

      
      
           js自定义addClass()和removeClass()方法
      

 

UpdateTime--2017年1月15日14:49:15

三、js自定义window.onload方法

 

/** * addLoadEvent()函数的详细说明     * 相当于对window.onload方法的进一步封装 * 当此函数addLoadEvent()只调用一次时，只执行if{}内容，执行完后，再执行func函数； * 当addLoadEvent()被调用2次时，执行顺序：if{}内容-->else{oldonload()代表的是：第一次调用的函数-->执行oldonload()-->第二次调用的函数} * 当addLoadEvent()被调用3次时，执行顺序：if{}内容-->else{oldonload()代表的是：前两次的函数：window.onload = function() {第一次调用的函数及第二次调用的函数}-->第三次调用的函数} * 当addLoadEvent()被调用n次时，oldonload()代表的是：前n-1个函数，func()代表的是：最后一调用addLoadEvent()函数时的入参函数 */ 

 六、自定义javascript的forEach()方法

　　作用：用于迭代数组，解决IE9以下不支持forEach()迭代数组的问题

原文链接：

/** * 数组遍历（从Array原型扩展forEach()方法） * @param {Array|NodeList} * @param {Function}  遍历执行方法，执行方法中返回false值，则停止继续遍历 * @param {Object} [scope] 执行方法的this指针 */if (!Array.prototype.forEach && typeof Array.prototype.forEach !== "function") {    Array.prototype.forEach = function(callback, context) {        // 遍历数组,在每一项上调用回调函数，这里使用原生方法验证数组。        if (Object.prototype.toString.call(this) === "[object Array]") {            var i, len;            for (i = 0, len = this.length; i < len; i++) {                if (typeof callback === "function"  && Object.prototype.hasOwnProperty.call(this, i)) {                    if (callback.call(context, this[i], i, this) === false) {                        break; // or return;                    }                }            }        }     }; }

　　用法：第一个参数：数组元素值；第二个参数：数组元素索引；第三个参数：数组（一般用不到）

　　举例：

var array = new Array();array.push("张三");array.push("李四");array.push("王五");/** * 迭代数组 */array.forEach(function(value,index) {    console.log(value, index);});

UpdateTime--2017年7月20日09:07:07

七、js自定义trim()方法

　　定义：用于去除字符串前后空格（中间空格不能去除）

String.prototype.trim = function(){      return this.replace(/^\s+(.*?)\s+$/, "$1");}

　　或者

String.prototype.trim=function() {    return this.replace(/(^\s*)|(\s*$)/g, '');}

 

　　具体用法请移步至文章：

八、js自定义contains()方法

　　定义：用于判断指定元素内是否包含另一个元素，即：判断另一个DOM元素是否是指定DOM元素的后代

　　返回值：Boolean类型，如果指定元素包含另一个元素，则返回true，否则返回false。

/** * 兼容火狐，增加contains方法。如果A元素包含B元素，则返回true，否则false * @param {Object} obj DOM元素 * @memberOf {TypeName}  * @return {TypeName} true,false */if (window.HTMLElement) {    HTMLElement.prototype.contains = function(obj) {        if (!obj) return false;        if (obj == this)            return true;        while (obj = obj.parentNode)            if (obj == this)                return true;        return false;    }}

　　举例：

　　HTML部分

      
           手术    
       
      

　　JAVASCRIPT部分

window.onload = function() {    var divTag = document.getElementById('test');    var inputTag = document.getElementById('test2');    var inputTags = document.getElementsByTagName('input');    console.log("使用封装好的函数测试是否包含指定子元素：" +　divTag.contains(inputTag));    console.log("contains方法测试div中是否包含不存在的input标签：" +　divTag.contains(inputTags[2]));    // 错误用法1    console.log("contains方法测试div中是否包含指定的文本：" +　divTag.contains('手术'));    // 错误用法2    console.log("contains方法测试div中是否包含存在的input标签：" +　divTag.contains(inputTags));}

　　小结：

　　　　contains方法传的参数只能是DOM元素(Element类型，不能是NodeList或其他对象)