js自定义封装方法

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

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

使用方法:将需要的方法复制到<script>标签体中,在下面直接调用对应的方法即可
一、自定义js的添加&移除类名方法
  参考链接--http://www.cnblogs.com/kuikui/archive/2011/12/26/2302375.html

//自定义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或其他对象)

 

js 自定义方法的更多相关文章

  1. js 自定义方法 设置可选参数的方法

    原链接 http://www.cnblogs.com/RightDear/p/3156652.html PHP有个很方便的用法是在定义函数时可以直接给参数设默认值,如: function simue ...

  2. js 自定义方法 实现停留几秒 sleep

    function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; wh ...

  3. 7.25 js 自定义方法 a.b

    调用: $(function(){ Starinput.initiate({name:'qr1_z.startlevel',tar: $("#sitelogo1"), stars: ...

  4. js自定义方法绑定元素事件

    //事件绑定封装 function addEvent(elem, type, handle){ if(elem.addEventListener){ elem.addEventListener(typ ...

  5. JS如何定义方法及调用 精选

    简单搜索了下,遇到点问题1,经常在JS中看到如var foo = function(){}的形式foo是方法名还是对象名,如果想调用此方法,是用foo(),foo.function(),还是该如何正确 ...

  6. <button> 标签 id 与 function 重复时发生的问题

    今天遇到一种情况,在调用js自定义方法的时候,总是提示“import:660 Uncaught TypeError: ... is not a function”. 仔细检查了代码,并没有问题.甚至把 ...

  7. javascript Array(数组)

      迁移时间:2017年5月25日08:05:33 UpdateTime--2017年3月31日16:29:08 一.数组(Array) (一)用法 //js声明数组的两大类方式 // 第一类(通常使 ...

  8. javascript 中文与Unicode相互转化

      javascript 中文与Unicode相互转化 CreateTime--2018年3月30日11:26:50 Author:Marydon /** * 中文与Unicode的相互转换 */ v ...

  9. vue自定义插件

    1.新建js文件 utils.js,自定义方法 let local = { say() { console.log('我是插件里面自定义的方法') } } export default { insta ...

随机推荐

  1. HDU4548+筛素数

    先筛出素数,再筛出美素数. 简单题. /* 筛素数 */ #include<stdio.h> #include<string.h> #include<stdlib.h&g ...

  2. Selenium2+Python自动化-处理浏览器弹窗(转载)

    本篇转自博客:上海-小T 原文地址:http://blog.csdn.net/real_tino/article/details/59068827 我们在浏览网页时经常会碰到各种花样的弹窗,在做UI自 ...

  3. Serializable java序列化

    Bean Serializable Interface 的接口让BEAN可以串行化,将其变成一个可保存为以后使用的二进制流.当一个BEAN被系列化到磁盘上或者其他任何地方,其状态被保存起来,其中的属性 ...

  4. 实现工资的按天统计(X:日期 Y:姓名)

    案例:工人工资按天按班别存入数据库,想实现一根据部门及员工姓名还有日期的汇总表... 汇总表效果如下: 还可以根据XY坐标对应的值查询显示该日期的明细记细 2013-09-06升级(如是当月最多只能显 ...

  5. Android之ListView和GridVIew加载图片

    清除缓存:ImageLoader 对象 . clearCache(); 使用: ImageLoader loader = new ImageLoader(ApplicationContext cont ...

  6. select点击option获取文本输入框的焦点事件

    HTML文件: <select id="secOrderNum" style="margin-bottom:10px;width:90px;" data- ...

  7. 【UOJ Round #8】

    A 一道不错的题,虽然大家都觉得是水题,然而蒟蒻我想出来的好慢……Orz alpq 发现其实就是一个网格图,每一个大块都是同一颜色……横纵坐标互不干扰…… //UOJ Round #8 A #incl ...

  8. ffmpeg 2.3版本号, 关于ffplay音视频同步的分析

    近期学习播放器的一些东西.所以接触了ffmpeg,看源代码的过程中.就想了解一下ffplay是怎么处理音视频同步的,之前仅仅大概知道通过pts来进行同步,但对于怎样实现却不甚了解,所以想借助这个机会, ...

  9. scala编程第17章学习笔记(2)——集和映射

    默认情况下在使用“Set”或“Map”的时候,获得的都是不可变对象.如果需要的是可变版本,需要先写明引用. 如果同一个源文件中既要用到可变版本,也要用到不可变版本的集合或映射,方法之一是引用包含了可变 ...

  10. 搭建个人博客-hexo+github

    自己也算是摸爬滚打搭建成功,然后自己再重新安装部署一遍,把完整步骤分享给大家,同时最后有一些连接,如果我的步骤不行,大家可以参考其他人的(这个有点花费时间,大家提前有个心理准备 - _-) 一.第一步 ...