js⾃定义⽅法
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 = place(reg, ' ');
}
}
</script>
<!-- 进⾏调⽤ -->
<div onmouseover="addClass(this,'redColor')" onmouseout="removeClass(this,'redColor')">
js⾃定义addClass()和removeClass()⽅法
</div>
UpdateTime--2017年1⽉15⽇14:49:15
三、js⾃定义load⽅法
<script type="text/javascript">
/**
* 页⾯中声明⼀次load事件，否则后⾯的会将前⾯的覆盖
* 解决办法：
* 使⽤load同时执⾏多个函数
* @param {Object} func
*/
function addLoadEvent(func) {
var oldonload = load; //得到上⼀个onload事件的函数
if(typeof oldonload != "function") { //判断类型是否为function，注意TYPROF返回的是字符串
} else {
oldonload(); //调⽤前覆盖的onload事件的函数
func(); //调⽤当前的函数
}
}
}
function testOnload() {
alert(2);
};
function testOnload2() {
alert(3);
}
⽤法：
//直接把上⾯addLoadEvent()⽅法复制在所有代码的前⾯，这样后⾯就可以直接调⽤，相当于多个load
//页⾯加载完毕想要执⾏的函数，调⽤addLoadEvent(⼊参函数)多次即可
//页⾯加载完毕，要运⾏的函数
如：
addLoadEvent(testOnload);//调⽤位置在函数上下都⾏
addLoadEvent(testOnload2);
</script>
/**
* addLoadEvent()函数的详细说明
* 相当于对load⽅法的进⼀步封装
* 当此函数addLoadEvent()只调⽤⼀次时，只执⾏if{}内容，执⾏完后，再执⾏func函数；
* 当addLoadEvent()被调⽤2次时，执⾏顺序：if{}内容-->else{oldonload()代表的是：第⼀次调⽤的函数-->执⾏oldonload()-->第⼆次调⽤的函数}
* 当addLoadEvent()被调⽤3次时，执⾏顺序：if{}内容-->else{oldonload()代表的是：前两次的函数：load = 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 (String.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()⽅法
  定义：⽤于去除字符串前后空格（中间空格不能去除）
im = function(){
place(/^\s+(.*?)\s+$/, "$1");
}
  或者
im=function() {
place(/(^\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) {
ains = function(obj) {
if (!obj) return false;
if (obj == this)
return true;
typeof arraywhile (obj = obj.parentNode)
if (obj == this)
return true;
return false;
}
}
  举例：
  HTML部分
<div id="test">
⼿术
<input id="test2" type="text"/>
</div>
  JAVASCRIPT部分
var divTag = ElementById('test');
var inputTag = ElementById('test2');
var inputTags = ElementsByTagName('input');
console.log("使⽤封装好的函数测试是否包含指定⼦元素：" +　ains(inputTag));
console.log("contains⽅法测试div中是否包含不存在的input标签：" +　ains(inputTags[2])); // 错误⽤法1
console.log("contains⽅法测试div中是否包含指定的⽂本：" +　ains('⼿术'));
// 错误⽤法2
console.log("contains⽅法测试div中是否包含存在的input标签：" +　ains(inputTags));
}
  ⼩结：
    contains⽅法传的参数只能是DOM元素(Element类型，不能是NodeList或其他对象)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。