原生javascript自己封装的常用小方法

var zycTools = {
//使用css选择器选择单个元素
$:function(elem){
return document.querySelector(elem);
},
//使用css选择器选择一组元素
$$:function(elem){
return document.querySelectorAll(elem);
},
//判断浏览器类型
browserType:function(){
var browser = window.navigator.userAgent; //获取浏览器
if (userAgent.indexOf("Opera") > -1) {
return "Opera"
}; //判断是否Opera浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FireFox";
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") > -1){
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判断是否Safari浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
}; //判断是否IE浏览器
},
//判断终端类型(手机端、PC端)
terminalType:function(){
var browser = window.navigator.userAgent; //获取浏览器
if (userAgent.indexOf("Android") > -1) {
return "Android"
}; //判断是否安卓手机
if (userAgent.indexOf("iPhone") > -1) {
return "iPhone";
} //判断是是否苹果手机
},
//移除所有节点
removeNode:function (elem){
for(var i = 0,len = elem.length;i < len;i++){
elem[i].parentNode.removeChild(elem[i]);
}
},
//清空所有子元素
emptyChildElem:function(elem){
elem.innerHTML = "";
},
//获取子元素
getChildNodes:function(elem){
var childNodes = [];
var node = elem.childNodes;
for(var i = 0;i < node.length;i++){
if(node[i].nodeType == 1){
childNodes[childNodes.length] = node[i];
}
}
return childNodes;
},
//获取所有兄弟元素
getSiblingElems:function (elem){
var result = [], parentNode ,childNodes;
parentNode = elem.parentNode;
childNodes = parentNode.childNodes;
for(var i = 0,len = childNodes.length;i < len;i++){
if(childNodes[i].nodeType == 1 && childNodes[i] != elem){
result[result.length] = childNodes[i];
}
}
return result;
},
//获取下一个兄弟元素
nextSiblingElem:function(elem){
var siblings = zycTools.getChildNodes(elem.parentNode);
var index = zycTools.getIndex(siblings,elem);
var result = siblings[parseInt(index)+1];
return result;
},
//获取指定元素所有后面的同辈元素
nextSiblingsAll:function(elem){
var index,result = [];
var childNodes = zycTools.getChildNodes(elem.parentNode);
for(var i = 0,len = childNodes.length;i < len;i++){
if(elem == childNodes[i]){
index = i+1;
}
}
for(var j = index;j < len;j++){
result[result.length] = childNodes[j];
}
return result;
},
//获取前一个兄弟元素
prevSiblingElem:function(elem){
var siblings = zycTools.getChildNodes(elem.parentNode);
var index = zycTools.getIndex(siblings,elem);
var result = siblings[parseInt(index)-1];
return result;
},
//获取指定元素所有前面的同辈元素
prevSiblingsAll:function(elem){
var index,result = [];
var childNodes = zycTools.getChildNodes(elem.parentNode);
for(var i = 0,len = childNodes.length;i < len;i++){
if(elem == childNodes[i]){
index = i-1;
}
}
for(var j = 0;j <= index;j++){
result[result.length] = childNodes[j];
}
return result;
},
//指定位置之后插入元素
insertAfter:function(newEl, targetEl){
var parentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl){
parentEl.appendChild(newEl);
}else{
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
},
//往数组里面添加Dom元素
addDom:function(elem, addelem){
elem[elem.length] = addelem;
return elem;
},
//查找后代元素
findElem:function (elemSelector, hasElemSelector){
var result = document.querySelector(elemSelector).querySelectorAll(hasElemSelector);
return result;
},
//获取元素对应的元素数组的索引
getIndex:function(elem, targetE){
var index;
for(var i = 0;i < elem.length;i++){
if(elem[i] == targetE){
index = i;
}
}
return index;
},
//获取元素的文本,获取的元素必须使$$()方法获取或者必须是一组Dom数组
getText:function(elem){
var text = "";
for(var j = 0, lenj = elem.length;j < lenj;j++){
for(var i = 0, leni = elem[j].childNodes.length;i < leni;i++){
if(elem[j].childNodes[i].nodeType == 3){
var empText = elem[j].childNodes[i].nodeValue.replace(/[ ]/g,"").replace(/[\r\n]/g,"");
text += empText + " ";
}
}
}
return text;
},
//添加class
addClass:function(elem,classname){
var oldClass = elem.className;
if(elem.className){
if(elem.className.indexOf(classname) == -1){
elem.className = oldClass + " " + classname;
}
}else{
elem.className = classname;
}
},
//移除class
removeClassName:function(elem,classname){
var oldClass = elem.className;
if(elem.className && oldClass.indexOf(classname) != -1){
elem.className = elem.className.replace(classname, "");
}else{
return false;
}
},
//获取元素样式
getStyle:function(elem,prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem)[prop];
}else{
return elem.currentStyle[prop];
}
},
//设置元素样式
setCss:function(elem, cssObj){
for(var i in cssObj){
elem.style[i] = cssObj[i]
}
},
//切换样式
toggleClass:function(elem,classname){
this.flag = false;
var oldClass = elem.className;
if(oldClass.indexOf(classname) != -1 && !flag){
flag = true;
elem.className = elem.className.replace(" "+classname,"");
}else{
flag = false;
elem.className = oldClass + " " + classname;
}
},
//元素左右或者上下运动
elemMove:function(elem, dir, time, callback){
var flag = true, value;
dir == "top" ? value = "height" : value = "width";
var elemWith = parseInt(zycTools.getStyle(elem,value)); //获取宽度值
var elemPosition = zycTools.getStyle(elem,"position"); //获取position属性
if(elemPosition == "static"){
elem.style.position = "relative";
elem.style[dir] = "0px";
}
setInterval(function(){
var left = parseInt(zycTools.getStyle(elem,dir));
if(left < elemWith && flag){
elem.style[dir] = (left + 1) + "px";
}else{
flag = false;
elem.style[dir] = (left - 1) + "px";
if(parseInt(zycTools.getStyle(elem,dir)) < 0){
elem.style[dir] = "0px";
flag = true;
}
}
},time);
},
//元素匀速向上运动
silderUp:function(elem, time, callback){
//var i = 1;
var timmerId = setInterval(function(){
var height = parseInt(zycTools.getStyle(elem,"height")); //获取元素高度
if(height > 0){
elem.style.height = (height - 1) + "px";
}else{
elem.style.height = "0px";
clearTimeout(timmerId);
if(typeof callback == "function"){
callback();
}
}
},time);
},
//元素匀速向下运动
silderDown:function(elem, time, callback){
var initHeight = parseInt(zycTools.getStyle(elem,"height")); //元素原始高度
elem.style.height = "0px";
elem.style.display = "block";
var timmerId = setInterval(function(){
var height = parseInt(zycTools.getStyle(elem,"height")); //每次循环就获取元素高度
if(height < initHeight){
elem.style.height = (height + 1) + "px";
}else{
clearTimeout(timmerId);
if(typeof callback == "function"){
callback();
}
}
},time);
},
//元素放大缩小,仅支持高版本浏览器
transformScale:function(elem, time, multiple, callback){
var flag = true;
elem.style.webkitTransform = "scale(1)";
var timeId = setInterval(function(){
var scaleStr = elem.style.webkitTransform.replace("scale(","");
var scale = parseFloat(scaleStr);
if(scale < multiple && flag){
elem.style.webkitTransform = "scale(" + (scale + 0.01) + ")";
}else{
flag = false;
elem.style.webkitTransform = "scale(" + (scale - 0.01) + ")";
if(scale < 1){
elem.style.webkitTransform = "scale(1)";
flag = true;
clearTimeout(timeId);
//函数执行完成回调执行callback
if(typeof callback == "function"){
callback();
}
}
}
},time);
},
//元素旋转Z轴
rotate:function(elem, time, deg, callback){
var flag = true;
elem.style.webkitTransform ? {}:elem.style.webkitTransform = "rotate(0deg)";
var timeId = setInterval(function(){
var rotateStr = elem.style.webkitTransform.replace("rotate(","");
//console.log(rotateStr);
var rotate = parseInt(rotateStr);
//console.log(rotate);
if(rotate < deg && flag){
elem.style.webkitTransform = "rotate(" + (rotate + 1) + "deg)";
}else{
flag = false;
elem.style.webkitTransform = "rotate(" + (rotate - 1) + "deg)";
if(rotate < 0){
elem.style.webkitTransform = "rotate(0deg)";
flag = true;
//函数执行完成回调执行callback
if(typeof callback == "function"){
callback();
}
}
}
},time);
},
//元素淡出消失
fadeOut:function(elem, time, callback){
var elemOpcity = zycTools.getStyle(elem,"opcity");
if(!elemOpcity){
elem.style.opacity = "1";
}
setInterval(function(){
var intOpacityValue = parseFloat(elem.style.opacity); //将透明度转变为整形
if(intOpacityValue > 0){
elem.style.opacity = (intOpacityValue - 0.05) + "";
}else{
elem.style.opacity = "0";
elem.style.display = "none";
if(typeof callback == "funtion"){
callback();
}
}
},time);
},
//元素淡入显示
fadeIn:function(elem, time, callback){
elem.style.dispaly = "block";
var elemOpcity = zycTools.getStyle(elem,"opcity");
if(!elemOpcity){
elem.style.opacity = "0";
}
var timerId = setInterval(function(){
var intOpacityValue = parseFloat(elem.style.opacity); //将透明度转变为整形
if(intOpacityValue < 1){
elem.style.opacity = (intOpacityValue + 0.05) + "";
}else{
elem.style.opacity = "1";
clearTimeout(timerId);
if(typeof callback == "funtion"){
callback();
}
}
},time);
},
//表单及常用验证
validate:{
//百家姓验证
chineseFirstName: function(str){
var firstName='赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐费廉岑薛雷贺倪汤滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹姚邵湛汪祁毛禹狄米贝明臧计伏成戴谈宋茅庞熊纪舒屈项祝董梁杜阮蓝闵席季麻强贾路娄危江童颜郭梅盛林刁钟徐丘骆高夏蔡田樊胡凌霍虞万支柯昝管卢莫经房裘缪干解应宗丁宣贲邓郁单杭洪包诸左石崔吉钮龚程嵇邢滑裴陆荣翁荀羊于惠甄曲家封芮羿储靳汲邴糜松井段富巫乌焦巴弓牧隗山谷车侯宓蓬全郗班仰秋仲伊宫宁仇栾暴甘钭厉戎祖武符刘景詹束龙叶幸司韶郜黎蓟薄印宿白怀蒲邰从鄂索咸籍赖卓蔺屠蒙池乔阴郁胥能苍双闻莘党翟谭贡劳逄姬申扶堵冉宰郦雍郤璩桑桂濮牛寿通边扈燕冀郏浦尚农柴瞿阎充慕连茹习宦艾鱼容向古易慎戈廖庾终暨居衡步都耿满弘匡国文寇广禄阙东欧殳沃利蔚越夔隆师巩厍聂晁勾敖融冷訾辛阚那简饶空曾毋沙乜养鞠须丰巢关蒯相查后荆红游竺权逯盖益桓公万俟司马上官欧阳夏候诸葛闻人东方赫连皇甫尉迟公羊澹台公治宗政濮阳淳于单于太叔申屠公孙仲孙辕轩令狐钟离宇文长孙幕容鲜于闾丘司徒司空丌官司寇仉督子车颛孙端木巫马公西漆雕乐正壤驷公良拓拔夹谷宰父谷梁晋楚阎法汝鄢涂钦段干百里东郭南门呼延归海羊舌微生岳帅缑亢况后有琴梁丘左丘东门西门商牟佘佴佰赏南官墨哈谯笪年爱阳佟第五言福百家姓终百家姓以外的:万俟司马上官欧阳夏候诸葛闻人东方赫连皇甫尉迟公羊澹台公治宗政濮阳淳于单于太叔申屠公孙仲孙辕轩令狐钟离宇文长孙幕容鲜于闾丘司徒司空丌官司寇仉督子车颛孙端木巫马公西漆雕乐正壤驷公良拓拔夹谷宰父谷梁晋楚阎法汝鄢涂钦段干百里东郭南门呼延归海羊舌微生岳帅缑亢况后有琴梁丘左丘东门西门商牟佘佴佰赏南官墨哈谯笪年爱阳佟第五言福';
var nameStr1=str.substring(0,1); //获取输入的第一个字
var nameStr2=str.substring(0,2); //获取输入的前两个字
var hasName=(firstName.indexOf(nameStr1)!=-1)||(firstName.indexOf(nameStr2)!=-1); //判断是否含有姓氏
//判断是否属于百家姓
if(hasName){
return true;
}else{
return false;
}
},
number: function(number){
var pattern = /^[0-9]$/;
if(pattern.test(number)){
return true;
}else{
return false;
}
},
//中文字符验证
chinese: function(str){
var pattern = /[\u4e00-\u9fa5]/;
if(pattern.test(number)){
return true;
}else{
return false;
}
},
//字母数字中文及下划线(一般用于用户名验证)
wordsNumber_: function(str){
var pattern = /[A-Za-z0-9_-\u4e00-\u9fa5]+/;
if(pattern.test(str)){
return true;
}else{
return false;
}
},
//英文验证
english: function(str){
var pattern = /^[a-zA-Z]$/;
if(pattern.test(str)){
return true;
}else{
return false;
}
},
//电子邮箱验证
email: function(str){
var pattern = /\w[-\w.+]@([A-Za-z0-9][-A-Za-z0-9]+.)+[A-Za-z]{2,14}/;
if(pattern.test(str)){
return true;
}else{
return false;
}
},
//手机号码验证非+86
cellphone: function(number){
var pattern = /^1[3|4|5|7|8]\d{9}$/;
if(pattern.test(number)){
return true;
}else{
return false;
}
},
//电话验证
tellphone: function(number){
var pattern = /[0-9-()()]{7,18}/;
if(pattern.test(number)){
return true;
}else{
return false;
}
},
//网址验证
website: function(str){
var pattern = /((https|http|ftp|rtsp|mms)?://)[\s]+/;
if(pattern.test(str)){
return true;
}else{
return false;
}
},
ipAddress: function(str){
var pattern = /(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d).(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d).(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d).(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)/;
if(pattern.test(str)){
return true;
}else{
return false;
}
},
//身份证验证
idCard: function(number){
var pattern = /\d{17}[\d|x]|\d{15}/;
if(pattern.test(number)){
return true;
}else{
return false;
}
},
//邮编验证
postCodes: function(number){
var pattern = /\d{6}/;
if(pattern.test(number)){
return true;
}else{
return false;
}
},
//QQ验证
tencentQQ: function(number){
var pattern = /1-9/;
if(pattern.test(number)){
return true;
}else{
return false;
}
},
//特殊字符验证
specialWord: function(str){
var pattern = /`~!@#$%^&
()_+-=[]{}|;:'"<,>.?//;
if(pattern.test(str)){
return true;
}else{
return false;
}
},
//强密码验证(必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-16之间)
strongPassword: function(str){
var pattern = /^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,16}$/;
if(pattern.test(str)){
return true;
}else{
return false;
}
},
//日期格式验证 2016-01-01这种格式
dataFormat: function(str){
var pattern = /^[1-9]{1}\d{3}-[0-1]{1}\d{0,1}-[0-1]{1}\d{0,1}/;
if(pattern.test(str)){
return true;
}else{
return false;
}
}
}
}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容