如果项目中有些简单的页面需要某些JS库里的方法,但是又不想依赖其他库,于是就只能自己封装点常用的方法,不能什么都靠百度和插件。
给DOM添加或删除class类
/* 添加 class 类 和 移出 class 类 方法*/
function addClass(element, className) {
if(!new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className)) element.className += ' ' + className;
}
function removeClass(element, className) {
element.className = element.className.replace(new RegExp("(^|\\s)" + className + "(?=(\\s|$))", "g"), '');
}
添加class原理:正则去匹配DOM身上的class字符串,如果没有匹配到就增加这个class类。
删除class原理:用replace方法从获取的class字符串里用空字符串替换掉这个需要移出的class类,再赋值给这个DOM的className属性
。
获取DOM的属性
function getStyle(obj,attr){
if (attr =='left')
{
return obj.offsetLeft;
}
else if (attr =='top')
{
return obj.offsetTop;
}
else if (attr =='width')
{
return obj.offsetWidth;
}
else if (attr =='height')
{
return obj.offsetHeight;
}
else
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
}
设置DOM的属性
function setStyle(obj, json){
if(obj.length)
for(var i=0;i<obj.length;i++) setStyle(obj[i], json);
else{
if(arguments.length==2) //json
for(var i in json) setStyle(obj, i, json[i]);
else{ //name, value
switch(arguments[1].toLowerCase()){
case 'opacity':
obj.style.filter='alpha(opacity:'+arguments[2]+')';
obj.style.opacity=arguments[2]/100;
break;
default:
if(typeof arguments[2]=='number'){
obj.style[arguments[1]]=arguments[2]+'px';
}else{
obj.style[arguments[1]]=arguments[2];
}
break;
}
}
}
}
获取DOM四边距离左右上下的距离
function getClientRectAttr(el,direction){
if(direction==='top')
{
return el.getBoundingClientRect().top;
}
else if(direction==='bottom')
{
return el.getBoundingClientRect().bottom;
}
else if(direction==='left')
{
return el.getBoundingClientRect().left;
}
else if(direction==='right')
{
return el.getBoundingClientRect().right;
}
}
绑定和移出事件
function bindEvent(obj, ev, fn){
obj.addEventListener?obj.addEventListener(ev, fn, false):obj.attachEvent('on'+ev, fn);
}
function unbindEvent(obj, ev, fn){
obj.removeEventListener?obj.removeEventListener(ev, fn, false):obj.detachEvent('on'+ev, fn);
}
//ps:绑定和解绑的回调必须是同一个函数
获取一个数组的极值(最大或是最小值)
function getExtremeValue
(size
,arr
){
return size
==='min'?Math
.min.apply
(null,arr
):Math
.max.apply
(null,arr
);
}
function getExtremeValue
(size
,arr
){
return size
==='min'?Math
.min(...arr
):Math
.max(...arr
);
}
获取移动设备类型
function getEquipmentType () {
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
return "Android";
} else if (u.indexOf('iPhone') > -1) {//苹果手机
return "iPhone";
} else if (u.indexOf('iPad') > -1) {//iPad
return "iPad";
} else if (u.indexOf('Windows Phone') > -1) {//winphone手机
return "Windows Phone";
}else{
return 'other'
}
}
严格身份证号验证
// 严格的身份证校验
function isCardID
(sId
) {
if (!/(^\d
{15}$
)|(^\d
{17}(\d
|X
|x
)$
)/.test
(sId
)) {
alert
('你输入的身份证长度或格式错误')
return false
}
//身份证城市
var aCity
={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
if(!aCity
[parseInt
(sId
.substr(0,2))]) {
alert
('你的身份证地区非法')
return false
}
// 出生日期验证
var sBirthday
=(sId
.substr(6,4)+"-"+Number
(sId
.substr(10,2))+"-"+Number
(sId
.substr(12,2))).replace
(/-/g
,"/"),
d
= new Date(sBirthday
)
if(sBirthday
!= (d
.getFullYear
()+"/"+ (d
.getMonth
()+1) + "/" + d
.getDate())) {
alert
('身份证上的出生日期非法')
return false
}
// 身份证号码校验
var sum
= 0,
weights
= [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
codes
= "10X98765432"
for (var i
= 0; i
<
; sId
.length
- 1; i
++) {
sum
+= sId
[i
] * weights
[i
];
}
var last
= codes
[sum
% 11]; //计算出来的最后一位身份证号码
if (sId
[sId
.length
-1] != last
) {
alert
('你输入的身份证号非法')
return false
}
return true
}
数据或类型判断
//是否字符串
function isString (o) {
return Object.prototype.toString.call(o).slice(8, -1) === 'String'
}
//是否数字
function isNumber (o) {
return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
}
//是否对象
function isObj (o) {
return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
}
//是否数组
function isArray (o) {
return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
}
//是否时间
function isDate (o) {
return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
}
//是否boolean
function isBoolean (o) {
return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
}
//是否函数
function isFunction (o) {
return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
}
//是否为null
function isNull (o) {
return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
}
//是否undefined
function isUndefined (o) {
return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
}
//是否空数组
function isEmptyArray(a){
return Object.prototype.toString.call(a).slice(8, -1) === 'Array'&&a.length===0;
}
//是否是空字符串
function isEmptyString(s){
return Object.prototype.toString.call(s).slice(8, -1) === 'String'&&s.length===0;
}
guid生成
function guid() {
function S4() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
两种获取节点里的内容
<!DOCTYPE html
>;
<html lang
="en">;
<head
>;
<meta charset
="UTF-8">;
<title
>;获取DOM节点里面的纯内容
</title
>;
</head
>;
<body
>;
<div id
="box">;我是DOM节点的文本内容
<p
>;我是前端
<span
>;你呢?
</span
>;一起努力!
</p
>;好吗?
</div
>;
</body
>;
<script
>;
function $
(el
){
return document
.querySelector
(el
);
}
function text
(e
){
var t
="";
//如果传入的是元素,则继续遍历其子元素
//否则假定它是一个数组
e
=e
.childNodes
||e
;
//遍历所有子节点
for(var j
=0;j
<e
.length
;j
++){
//如果不是元素,追加其文本值
//否则,递归遍历所有元素的子节点
t
+=e
[j
].nodeType
!=1?
e
[j
].nodeValue
:text
(e
[j
].childNodes
);
}
//返回区配的文本
return t
;
}
function getTetx
(str
){
var aText
=[];
str
.replace
(/\
>;(.+?
)\
</g
,function(r1
,r2
){aText
.push
(r2
)})
return aText
.join('');
}
var str
='<div id="box">;我是DOM节点的文本内容<p>;我是前端<span>;你呢?</span>;一起努力!</p>;好吗?</div>;';
console
.log(getTetx
(str
));
console
.log(text
($
('#box')))
</script>;
</html
>
let a
='';
let b
=undefined
;
let c
=null;
let d
=false;
let e
=0;
let f
=[];
let j
={};
console
.log(judge
(a
))
console
.log(judge
(b
))
console
.log(judge
(c
))
console
.log(judge
(d
))
console
.log(judge
(e
))
console
.log(judge
(f
))
console
.log(judge
(j
))
function judge
(o
){
var type
=Object
.prototype
.toString
.call
(o
).slice
(8, -1);
switch(type
){
case 'Undefined':
return true;
break;
case 'Null':
return true;
break;
case 'String':
return o
.length
==0?
true:false;
break;
case 'Array':
return o
.length
==0?
true:false;
break;
case 'Object':
return Object
.getOwnPropertyNames
(o
).length
==0?
true:false;
break;
case 'Boolean':
return o
===false?
true:false;
break;
case 'Number':
return o
===0?
true:false;
break;
default:
return false;
}
}
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - 原生js版块(方法封装)