js自定义封装方法
CreateTime--2016年10月16日15:18:18
Author:Marydon
声明：该文章主要是记录了需要使用javascript实现对日常需要的方法进行封装，封装方法大部分都是百度解决的，（这里只是针对我用到的做个汇总），特此声明！
使用方法：将需要的方法复制到<script>标签体中，在下面直接调用对应的方法即可
一、自定义js的添加&移除类名方法
//自定义js的addClass()和removeClass()方法
<style type="text/css">
.redColor {
color: red;
}
</style>
<script type="text/javascript">
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}
</script>
<!-- 进行调用 -->
<div onmouseover="addClass(this,'redColor')" onmouseout="removeClass(this,'redColor')">
js自定义addClass()和removeClass()方法
</div>
UpdateTime--2017年1月15日14:49:15
三、js自定义window.onload方法
<script type="text/javascript">
/**
* 页面中声明一次window.onload事件，否则后面的会将前面的覆盖
* 解决办法：
* 使用window.onload同时执行多个函数
* @param {Object} func
*/
function addLoadEvent(func) {
var oldonload = window.onload; //得到上一个onload事件的函数
if(typeof oldonload != "function") { //判断类型是否为function,注意TYPROF返回的是字符串
window.onload = func;
} else {
window.onload = function() {
oldonload(); //调用前覆盖的onload事件的函数
func(); //调用当前的函数
}
}
}
function testOnload() {
alert(2);
};
function testOnload2() {
alert(3);
}
用法：
//直接把上面addLoadEvent()方法复制在所有代码的前面，这样后面就可以直接调用，相当于多个window.onload
//页面加载完毕想要执行的函数，调用addLoadEvent(入参函数)多次即可
//页面加载完毕，要运行的函数
如：
addLoadEvent(testOnload);//调用位置在函数上下都行
addLoadEvent(testOnload2);
</script>
/**
* 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()迭代数组的问题
原文链接：http://www.jb51.net/article/81955.htm
/**
* 数组遍历（从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, '');
}
具体用法请移步至文章：javascript string
八、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部分
<div id="test">
手术
<input id="test2" type="text"/>
</div>
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或其他对象)
