html所有函数文档,html中常用JavaScript函数有哪些?

本文档详细介绍了如何使用原生JavaScript编写实用函数,涵盖对象遍历、数字处理、Cookie操作、HTTP请求构建和解析、DOM操作、CSS选择器等,适合初学者快速上手JavaScript基础技巧。
摘要由CSDN通过智能技术生成

常用基础函数

使用原生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();

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值