html中常用JavaScript函数有哪些?
标签:
JavaScript
常用基础函数
使用原生JS编写,不依赖任何库文件
(看完不回复,写代码绝对会出BUG哦!)
基础函数
/**
* 遍历对象
* @param {Object} obj
* @param {Function} fun 需两个参数
*/
function foreach (obj,fun) {
for (key in obj) {
var value = obj[key];
fun(key,value);
}
}
数字处理
/**
* 数字前添加前导零
* @param {Number} num
* @param {Number} digit
* @return {String}
*/
function fillByZero (num,digit) {
var num = String(num);
for (var i = num.length; i < digit; i++) {
num = '0' + num;
}
return num;
}
/**
* 返回大于等于min小于等于max的随机数(也可只传一个参数,代表返回一个大于等于0小于等于min的随机数)(和PHP中rand函数用法完全一样)
* @param {number} min
* @param {number} max
* @return {number}
*/
function rand (min,max) {
if (!max) {
max = min;
min = 0;
}
var r = 0;
do {
r = Math.round(Math.random() * max);
} while(r < min);
return r;
}
字符串处理
/**
* 获取当前页面Cookie(需trim函数支持)
* @return {Object} Cookie集合
*/
function getCookie() {
cookie = document.cookie;
var arr = cookie.split(';');
var ret = {};
for (var i = 0; i < arr.length; i++) {
var c = arr[i].split('=');
ret[trim(c[0])] = c[1];
}
return ret;
}
/**
* 设置Cookie(需foreach函数支持)
* @param {Object} obj Cookie集合
*/
function setCookie(obj) {
var cookie = '';
foreach(obj,function (key,value) {
cookie += key + '=' + value + ';';
});
cookie = cookie.replace(/(;$)/,'');
document.cookie = cookie;
}
/**
* 创建一个HTTP请求地址(最适合AJAX请求传参数了)(需要foreach函数支持)
* @param {Object} param
* @param {String} url 可选参数
* @return {String}
*/
function buildHTTPQuery (param,url) {
var query = url ? url : '';
if (query && query.indexOf('?') == -1) {
query += '?';
}
foreach(param,function (key,value) {
query += key + '=' + value + '&';
});
query = query.replace(/(&$)/,'');
return query;
}
/**
* 解析HTTP请求(你可以这样玩:var $_GET = decodeHTTPQuery())
* @param {String} code 可以是完整的网址,也可以仅仅是search部分(如不填默认取当前网址的search部分)
* @return {Object} 解析后的对象
*/
function decodeHTTPQuery(code) {
code = code ? code : window.location.search;
var start = code.indexOf('?');
code = start == -1 ? code : code.substr(start+1);
var arr = code.split('&');
var ret = {};
for (var i = 0; i < arr.length; i++) {
var c = arr[i].split('=');
ret[c[0]] = c[1];
}
return ret;
}
/**
* 删除字符串两边的空格
* @param {String} str
* @return {String}
*/
function trim (str) {
return str.replace(/(^\s*)|(\s*$)/g,'');
}
DOM操作函数
/**
* 获取元素(需hasClass函数支持)
* @param {String} s
* @param {String} p 当以类名或标签名获取元素时,传入的父元素的id,不传默认使用document
* @return {NodeList}
*/
function $ (s,p) {
var tag = s.substr(0,1);
var name = s.substr(1);
var eles = [];
if (tag == "#") {
eles.push(document.getElementById(name));
} else if (tag == ".") {
var e = $("*",p);
for (var i = 0;i < e.length;i++) {
if (hasClass(e[i],name)) {
eles.push(e[i]);
}
}
} else {
var p = p ? $("#" + p) : document;
eles = p.getElementsByTagName(s);
}
return eles.length == 1 ? eles[0] : eles;
}
/**
* CSS3选择器匹配元素(IE8以下不支持)
* @param {String} e
* @return {NodeList}
*/
function $ (e) {
var e = document.querySelectorAll(e);
return e.length == 1 ? e[0] : e;
}
/**
* 获取元素样式(包括样式表)
* @param {HTMLElement} ele
* @param {String} type
* @return {String}
*/
function getStyle (ele,type) {
return ele.style[type] || getComputedStyle(ele)[type];
}
/**
* 获取所有子元素
* @param {Object} ele
* @return {Array}
*/
function getChildren (ele) {
var children = ele.childNodes;
var arr = [];
for (var i = 0; i < children.length; i++) {
if (children[i].nodeType == 1) {
arr.push(children[i]);
}
}
return arr;
}
/**
* 检查一个元素是否含有某个Class
* @param {HTMLElement} ele
* @param {String} className
* @return {Boolean}
*/
function hasClass (ele,className) {
var exp = new RegExp("\\b(" + className + ")\\b");
return exp.test(ele.className);
}
/**
* 添加Class(需hasClass函数支持)
* @param {HTMLElement} ele
* @param {String} cls
*/
function addClass (ele,cls) {
if (!hasClass(ele,cls)) {
ele.className += ' ' + cls;
}
}
/**
* 删除Class(需hasClass函数支持)
* @param {HTMLElement} ele
* @param {String} cls
*/
function removeClass (ele,cls) {
if (hasClass(ele,cls)) {
var exp = new RegExp("\\b(" + cls + ")\\b");
ele.className = ele.className.replace(exp,' ');
}
}
/**
* 如果一个元素有某个Class,则删除这个Class,否则添加(需hasClass、trim函数支持)
* @param {HTMLElement} ele
* @param {String} className
*/
function toggleClass (ele,className) {
if (hasClass(ele,className)) {
ele.className = ele.className.replace(className,'');
} else {
ele.className += ' ' + className;
}
ele.className = ele.className.trim();
}
点击查看更多内容
26人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦