javaScript常用工具库
对应于百度前端技术学院2015年春季的课程2相关内容
https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0002
http://sso.portal.unicom.local/eip_sso/ssoLogin.html?appid=np000&success=http%3A%2F%2Fwww.portal.unicom.local%2Fuser%2Ftoken&error=http%3A%2F%2Fwww.portal.unicom.local%2Fuser%2Ferror&return=http%3A%2F%2Fwww.portal.unicom.local%2F
一、类型判断工具库
//判断arr是否是一个数组,返回bool值 function isArray(arr){ return Object.prototype.toString.call(arr)==='[object Array]'; } //判断fn是否是一个函数 function isFunction(fn){ return Object.prototype.toString.call(fn)==='[object Function]'; } //判断一个值是否为假值 //js中有大量的假值,包括 //1:0 //2:Nan //3:''(空字符串) //4:false //5:null //6:undefined function isFalse(a){ if(!a){ return true; } } //判断是否是邮箱地址 function isEmail(a) { ,})+$/; return reg.test(a); } //判断是否是电话号码 function isPhoneNumber(a){ \d{}$/; return reg.test(a); }
类型判断工具库
二、dom相关工具库(轻量级jquery)
1.类和事件的相关操作
//判断元素是否包含某个类 function hasClass(element, className) { var oldClass = element.className; if (!oldClass) { return false; } var oldClassArr = oldClass.split(/\s+/); , len = oldClass.length; i < len; i++) { if (oldClassArr[i] === className) { return true; } } return false; } //为元素增添一个新样式类 function addClass(element, newClassName) { if (hasClass(newClassName)) { return; } element.className = element.className ? [element.className, newClassName].join(' ') : newClassName; } //移除元素element中的样式oldClassName function removeClass(element, oldClassName) { if (!hasClass(element, oldClassName)) { return; } var oldClassArr = element.className.split(/\s+/); ; i >= ; i--) { if (oldClassArr[i] === oldClassName) { oldClassArr.splice(i, ); break; } }; element.className = oldClassArr.join(' '); } //判断siblingNode和element是否为同一个父元素下的同一级的元素,返回bool值 function isSiblingNode(elem, siblingNode) { return elem.parentNode === siblingNode.parentNode; } //实现一个简单的jquery,可以实现$('#adom'),$(a),$('.aclass'),$('[data-log]'),$('[data-time=2015]'),$('#adom .classA') function $(selector) { var regExps = { id: /^#([\w_\-]+)/, className: /^\.([\w_\-]+)/, tag: /^\w+$/, attribute: /(\w+)?\[([^=\]]+)(?:=(["'])?([^\]"']+)\3?)?\]/ }; var queryActions = { id: function(id) { return document.getElementById(id); }, tag: function(tag) { return document.getElementsByTagName(tag); }, className: function(className) { var elems = document.getElementsByTagName('*'); var result = []; , len = elems.length; i < len; i++) { if (hasClass(elems[i], className)) { result.push(elems[i]); } } return result; }, attribute: function(tag, key, value) { var elems = document.getElementsByTagName(tag || '*'); var result = []; , len = elems.length; i < len; i++) { if (elems[i].getAttribute(key)) { if (!value) { result.push(elems[i]); } else if (elems[i].getAttribute(key).toLowerCase() === value.toLowerCase()) { result.push(elems[i]); } } } return result; } }; //准备函数以及对应的参数 function direct(part, actions) { var fn, result; var params = []; if (result = part.match(regExps['id'])) { fn = 'id'; ]); } if (result = part.match(regExps['tag'])) { fn = 'tag', ]); } if (result = part.match(regExps['className'])) { fn = 'className', ]); } if (result = part.match(regExps['attribute'])) { fn = 'attribute', ], result[], result[]); } ]) { ]); } var elemResult = actions[fn].apply(null, params); return elemResult; } var parentActions = { id: function(idText, parentNode) { if (parentNode.getAttribute('id') === idText) { return true; } else { return false; } }, className: function(classText, parentNode) { if (hasClass(parentNode, classText)) { return true; } else { return false; } }, tag: function(tagText, parentNode) { if (parentNode.nodeName.toLowerCase() === tagText.toLowerCase()) { return true; } else { return false; } }, attribute: function(tag, key, value, parentNode) { if (tag) { if (parentNode.nodeName.toLowerCase() !== tag.toLowerCase()) { return false; } } if (parent.getAttribute(key)) { if (!value) { return true; } if (parent.getAttribute(key) === value) { return true; } } return false; } }; function filterParents(parts, queryArr) { var result = []; var pText = parts.pop(); //首先检验当前第一个父元素文本 ; i >= ; i--) { var curPNode = queryArr[i].parentNode; while (curPNode) { if (direct(pText, parentActions, curPNode) === true) { //说明该层匹配成功 result.push(queryArr[i]); break; } curPNode = curPNode.parentNode; } }; ] && parts[] ? filterParents(parts, result) : result; } //console.log(selector); var parts = selector.split(/\s+/); //对于非组合的情况应该可以找到 var selectorLast = parts.pop(); //根据最后一个元素查找,如果是id查找,那么得到一个元素,其他得到类数组对象 var queryResult = direct(selectorLast, queryActions); //console.log(queryResult); //下面这句话,如果是类数组对象,那么转换为一个数组,否则得到的是空数组 //根据id查询的结果,[].slice.call返回的结果是[];为了统一,令其返回长度为1的数组 var queryArr = []; if (queryResult.length) { queryArr = [].slice.call(queryResult); } else { queryArr.push(queryResult); } //如果根据id查找的,或者查找结果为空,那么直接返回;否则递归过滤父节点(这里默认了不会出现a #test类似的组合) ] && parts[] ? filterParents(parts, queryArr) : queryArr; } $.event = { //定义这个数组的作用在于,除了删除指定type上绑定的特定listener事件之外,还可以删除指定type上绑定的所有事件 listeners: [] }; //为元素element绑定event事件的处理函数listener //1.DOM0级(IE8之前),采用onClick=listener的方式,这种方法的缺点是不能为一个事件绑定多个处理函数 //2.DOM2级别:addEventListener,其作用域是所属元素的作用域 //3.IE:attachEvent,其作用域是全局作用域 $.event.addEvent = function(element, type, listener) { type = type.replace(/^on/i, '').toLowerCase(); //将作用域this都限制到元素的作用域 var lis = $.event.listeners; var realListener = function(e) { listener.call(element, e); } if (element.addEventListener) { element.addEventListener(type, realListener, false); } else if (element.attachEvent) { element.attachEvent('on' + type, realListener); } else { element['on' + type] = realListener; } $.event.listeners.push([element, type, listener, realListener]); //返回元素,便于链式操作 return element; }; $.event.removeEvent = function(element, type, listener) { type = type.replace(/^on/i, '').toLowerCase(); //var isRemoveAll=listener?false:true; var isRemoveAll = !listener; var lis = $.event.listeners; , len = $.event.listeners.length; i < len; i++) { var curLis = lis[i]; ] === element && curLis[] === type && (isRemoveAll || curLis[] === listener)) { if (element.removeEventListener) { element.removeEventListener(type, curLis[], false); } else if (element.detachEvent) { element.detachEvent(]); } else { element['on' + type] = null; } lis.splice(i, ); } } return element; }; //完成click事件的绑定 $.event.addClickEvent = function(element, listener) { $.event.addEvent(element, 'click', listener); }; //实现当用户按下enter按键时候的绑定 $.event.addEnterEvent = function(element, listener) { $.event.addEvent(element, 'keypress', function(e) { //IE中event位于全局对象中 var event = e || window.event; var keyCode = event.charCode || event.keyCode; ) { listener.call(element, event); } }); }; //实现事件代理功能 //根据冒泡原理,为父元素绑定监听事件 $.event.delegateEvent = function(element, tag, type, listener) { $.event.addEvent(element, type, function(e) { var event = e || window.event; var target = event.target || event.srcElement; if (target && target.tagName.toLowerCase() === tag.toLowerCase()) { listener.call(target, event); } }); }; //进行进一步的封装 $.on = function(selectorText, type, listener) { $.], type, listener); }; $.un = function(selectorText, type, listener) { $.], type, listener); }; $.click = function(selectorText, listener) { $.], listener); }; $.delegate = function(selectorText, tag, type, listener) { $.], tag, type, listener); }; //如果需要更改dom结构 //javascript原生的方法有appendChild(),insertBefore(),replaceChild()
domUtil.js
2.dom节点操作类库
//原生js的DOM操作功能有限,主要包括以下 //1.每个节点都有parentNode属性,childNodes属性(包含各种类型的节点,不仅限于element类型) //2.通过每个节点的previousSibling和nextSibling属性,访问相邻节点(不限于element) //3.firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点 //4.还有一个children属性,只包含element子节点 //5.操作节点的方法包括appendChild(),removeChild(),cloneNode()(复制节点并不能复制节点上的时间),replaceChild(),insertBefore() //以下方法是对原生js中节点操作方法的扩展 /** * 删除elem这个节点本身 */ function remove(elem){ if(elem.parentNode){ elem.parentNode.removeChild(elem); } } /** * 在targetElement元素之后添加元素newElement */ function insertAfter(newElem,targetElem){ var parent=targetElem.parentNode; if(parent.targetElem===targetElem){ parent.appendChild(newElem); }else{ parent.insertBefore(newElem,targetElem.nextSibling) } }
js中DOM操作相关方法
四、ajax工具库
五、相关格式化工具
5.1字符串自定义格式化工具,使用方法可以参照test函数
/** * 对字符串进行格式化 * * @param {String} source 待替换的目标字符串 * @param {Object|String ...} opts提供替换数据的对象或者多个字符串 * @remark opts参数为"object"时,替换目标字符串中的#{property name}部分 * opts为'String ...'时,替换目标字符串中的#{0},#{1}...部分 * */ function stringFormat(source, opts) { ); if (data.length) { //opts对象,字符串数组,一个字符串或者多个字符串 data = (data.length !== ? data : (opts !== null && (/\[object Array\]|\[object Object\]/.test(Object.prototype.toString.call(opts))) ? opts : data)); return source.replace(/#\{(.+?)\}/g, function(match, key) { var replacer = data[key]; if ('[object Function]' === Object.prototype.toString.call(replacer)) { replacer = replacer(key); } return 'undefined' === typeof replacer ? '' : replacer; }); } return source; } (function test() { console.log(stringFormat('我的名字是#{name},年龄是#{age}', { 'name': 'bobo', ' })); console.log(stringFormat(')); console.log(stringFormat('我的名字是#{0}', 'bobo')); console.log(stringFormat('])); })();
字符串格式化工具
5.2日期格式化工具,类似于java中的日期格式化工具
六、和类相关的工具类
//判断元素是否包含某个类 function hasClass(element, className,tagName) { var oldClass = element.className; if (!oldClass) { return false; } var oldClassArr = oldClass.split(/\s+/); , len = oldClass.length; i < len; i++) { if (oldClassArr[i] === className) { return true; } } return false; } //为元素增添一个新样式类 function addClass(element, newClassName) { if (hasClass(newClassName)) { return; } element.className = element.className ? [element.className, newClassName].join(' ') : newClassName; } //根据类名进行查找 function getElementByClassName(oElem, className) { var result = []; var condiArr = oElem.getElementsByTagName('*'); var reg = new RegExp('\\s+' + className + '\\s+'); ; i < condiArr.length; i++) { if (reg.test(' ' + condiArr[i].className + ' ')) { result.push(condiArr[i]); } } return result; }
类操作工具类
javaScript常用工具库的更多相关文章
- Tippy.js – 轻量的 Javascript Tooltip 工具库
工具提示(Tooltip)在网站中的一个小功能,但却有很重要的作用,常用于显示一些温馨的提示信息.如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象.Tippy.js 是一款帮助你快速创 ...
- javascript常用工具类整理(copy)
JavaScript常用工具类 类型 日期 数组 字符串 数字 网络请求 节点 存储 其他 1.类型 isString (o) { //是否字符串 return Object.prototype.to ...
- Lodash JavaScript 实用工具库
地址:https://www.lodashjs.com/ Lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库.
- vue项目工具文件utils.js javascript常用工具类,javascript常用工具类,util.js
vue项目工具文件utils.js :https://blog.csdn.net/Ajaxguan/article/details/79924249 javascript常用工具类,util.js : ...
- JavaScript常用工具方法
JavaScript常用工具方法 1.日期格式化 2.将日期字符串转换为Date,字符串格式为(yyyy-mm-dd hh:mm:ss) 3.JS获取当天00:00:00时间和23:59:59的时间 ...
- C++常用工具库(C语言文件读写,日志库,格式化字符串, 获取可执行文件所在绝对路径等)
前言 自己常用的工具库, C++ 和C语言实现 使用cmake维护的项目 持续更新..... 提供使用范例, 详见example文件夹 windows使用的VS通过了的编译. Linux(Ubuntu ...
- iOS 常用工具库LFKit功能介绍
简介:LFKit包含了平时常用的category,封装的常用组件,一些工具类. 需要LFKit中所有自定义控件的pod 'LFKit/Component' 需要LFKit中所有category的pod ...
- JavaScript常用工具函数
检测数据是不是除了symbol外的原始数据 function isStatic(value) { return ( typeof value === 'string' || typeof value ...
- JavaScript常用工具方法封装
因为工作中经常用到这些方法,所有便把这些方法进行了总结. JavaScript 1. type 类型判断 isString (o) { //是否字符串 return Object.prototype. ...
随机推荐
- fastjson生成json时Null属性不显示
举个例子 生成JSON代码片段 Map < String , Object > jsonMap = new HashMap< String , Object>(); jsonM ...
- 《Java核心技术卷二》笔记(三)正则表达式
正则表达式语法 一个正则表达式描述了字符串的构成规则(模式).如果一个具体的字符串正好符合正则表达式描述的这个规则,这个字符串就是与表达式匹配的.先看一下怎么描述这种规则,也就是正则表达式语法.正则表 ...
- Shader Model 3.0:Using Vertex Textures SM3:使用顶点纹理 (NVIDIA spec, 6800支持使用D3DFMT_R32F and D3DFMT_A32B32G32R32F的纹理格式实现Vertex Texture。)
翻译者 周波 zhoubo22@hotmail.com 版权所有 Philipp Gerasimov Randima (Randy) Fernando Simon Green NVIDIA Corpo ...
- PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [6] 版本升级接口开发
判定 app 是否需要加密:通过 app 表中的 status 字段来判定,加密的字符串为 app 表中的 key 字段. 在获取的客户端和服务器端(数据库表中相应字段)的版本号不一致时,返回 dat ...
- 达内培训:php在线端口扫描器
达内培训:php在线端口扫描器 [来源] 达内 [编辑] 达内 [时间]2012-12-21 这个扫描器很简单.就是用了一个数组来定义端口的相关信息,原理就是用fsockopen函数连接,如 ...
- Jquery scrollTop animate 實現動態滾動到頁面頂部
這個方法之前都是用的錨點實現的,但是效果僵硬,動感不足! 之後參考了一些網站,發現都是用的js,於是自己想到用jquery 來做一個插件也來實現以下這個小功能. $.fn.backTop = func ...
- MVC 扩展方法特点
.NET MVC 3中扩展方法特点: (1)扩展类的名称以Extensions结尾: (2)扩展类的类型是static: (3)扩展方法至少有一个参数,第一个参数必须指定该方法作用于哪个类型,并且该参 ...
- 【php学习】数组操作
1.json字符串和数组之间的转换 json_decode($jsonStr) json字符串解码为php变量,若第二个参数默认为false,返回一个对象:若第二个参数设置true,则返回一 ...
- Bluetooth SDP介绍
目录 1. 概念 2. 服务记录(Service Record) 3. 服务属性(Service Attribute) 4. 服务类(Service Class) 5. 服务查找 5.1 UUID 5 ...
- Mongo中的数据类型
一.null null用于表示空值或者不存在的字段 {"X" : null} 二.布尔型 布尔类型有两个值true和false {"x" : true} 三.数 ...