javascript常用功能汇总

前端之家收集整理的这篇文章主要介绍了javascript常用功能汇总前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.javascript的数组API:

删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,5] b:1 //unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,5]; var b = a.unshift(-2,-1); //a:[-2,-1,1,5] b:7 //注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。 //pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined var a = [1,5]; var b = a.pop(); //a:[1,4] b:5 //push:将参数添加到原数组末尾,并返回数组的长度 var a = [1,5]; var b = a.push(6,7); //a:[1,5,6,7] b:7 //concat:返回一个新数组,是将参数添加到原数组中构成的 var a = [1,5]; var b = a.concat(6,5] b:[1,7] //splice(start,deleteCount,val1,val2,):从start位置开始删除deleteCount项,并从该位置起插入val1,var a = [1,5]; var b = a.splice(2,7,8,9); //a:[1,9,5] b:[3,4] var b = a.splice(0,1); //同shift a.splice(0,-2,-1); var b = a.length; //同unshift var b = a.splice(a.length-1,1); //同pop a.splice(a.length,7); var b = a.length; //同push //reverse:将数组反序 var a = [1,5]; var b = a.reverse(); //a:[5,1] b:[5,1] //sort(orderfunction):按指定的参数对数组进行排序 var a = [1,5]; var b = a.sort(); //a:[1,5] //slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组 var a = [1,5]; var b = a.slice(2,5); //a:[1,5] //join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符 var a = [1,5]; var b = a.join("|"); //a:[1,5] b:"1|2|3|4|5"

2.dom最常用API:

方法: getElementById(id) Node 返回指定结点的引用 getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合 createElement(name) Node Node createTextNode(text) Node 创建一个纯文本结点 ownerDocument Document 指向这个节点所属的文档 documentElement Node 返回html节点 document.body Node 返回body节点 //element方法: getAttribute(attributeName) String 返回指定属性的值 setAttribute(attributeName,value) String 给属性赋值 removeAttribute(attributeName) String 移除指定属性和它的值 getElementsByTagName(name) NodeList 返回结点内所有匹配的元素的集合 //node方法: appendChild(child) Node 给指定结点添加一个新的子结点 removeChild(child) Node 移除指定结点的子结点 replaceChild(newChild,oldChild) Node 替换指定结点的子结点 insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点 hasChildNodes() Boolean 如果结点有子结点则返回true //node属性: nodeName String 以字符串的格式存放结点的名称 nodeType String 以整型数据格式存放结点的类型 nodeValue String 以可用的格式存放结点的值 parentNode Node 指向结点的父结点的引用 childNodes NodeList 指向子结点的引用的集合 firstChild Node 指向子结点结合中的第一个子结点的引用 lastChild Node 指向子结点结合中的最后一个子结点的引用 prevIoUsSibling Node 指向前一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null nextSibling Node 指向后一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null

3.网上搜藏的一个map对象:

删除 **/ this.remove = function ( key ) { if( this.containsKey(key) && ( delete entry[key] ) ) { size --; } } /** 是否包含 Key **/ this.containsKey = function ( key ) { return (key in entry); } /** 是否包含 Value **/ this.containsValue = function ( value ) { for(var prop in entry) { if(entry[prop] == value) { return true; } } return false; } /** 所有 Value **/ this.values = function () { var values = new Array(); for(var prop in entry) { values.push(entry[prop]); } return values; } /** 所有 Key **/ this.keys = function () { var keys = new Array(); for(var prop in entry) { keys.push(prop); } return keys;

}
/ Map Size /
this.size = function ()
{
return size;
}
/ 清空 /
this.clear = function ()
{
size = 0;
entry = new Object();
}
}
var map = new HashMap();
/
map.put("A","1");
map.put("B","2");
map.put("A","5");
map.put("C","3");
map.put("A","4");
/
/
alert(map.containsKey("XX"));
alert(map.size());
alert(map.get("A"));
alert(map.get("XX"));
map.remove("A");
alert(map.size());
alert(map.get("A"));
/
/ 同时也可以把对象作为 Key /
/
var arrayKey = new Array("1","2","3","4");
var arrayValue = new Array("A","B","C","D");
map.put(arrayKey,arrayValue);
var value = map.get(arrayKey);
for(var i = 0 ; i < value.length ; i++)
{
//alert(value[i]);
}
/
/ 把对象做为Key时 ,自动调用了该对象的 toString() 方法 其实最终还是以String对象为Key/
/ 如果是自定义对象 那自己得重写 toString() 方法 否则 . 就是下面的结果 /
function MyObject(name)
{
this.name = name;
}
/
function MyObject(name)
{
this.name = name;
this.toString = function ()
{
return this.name;
}
}
/
var object1 = new MyObject("小张");
var object2 = new MyObject("小名");
map.put(object1,"小张");
map.put(object2,"小名");
alert(map.get(object1));
alert(map.get(object2));
map.remove("xxxxx");
alert(map.size());
/ 运行结果 小名 小名 size = 1 /
/ 如果改成复写toString()方法的对象,效果就完全不一样了 /

4.常用的数字函数

:

方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number) //请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!! i = parseInt(str); if( isNaN(i) ){ } //4.数字型比较 //此知识与[字符串比较]相同 ///5.小数转整数 var f = 1.5; var i = Math.round(f); //结果:2 (四舍五入) var i = Math.ceil(f); //结果:2 (返回大于f的最小整数) var i = Math.floor(f); //结果:1 (返回小于f的最大整数) //6.格式化显示数字 var i = 3.14159; //格式化为两位小数的浮点数 var str = i.toFixed(2); //结果: "3.14" //格式化为五位数字的浮点数(从左到右五位数字,不够补零) var str = i.toPrecision(5); //结果: "3.1415" //7.X进制数字的转换 //不是很懂 -.- var i = parseInt("0x1f",16); var i = parseInt(i,10); var i = parseInt("11010011",2); //8.随机数 //返回0-1之间的任意小数 var rnd = Math.random(); //返回0-n之间的任意整数(不包括n) var rnd = Math.floor(Math.random() * n)

5.网上搜藏的js堆栈:

方法 this.unit[this.top]=pushvalue; this.top+=1; } this.readAllElements=function(){ //定义读取所有数据的方法 if(this.top==0){ alert("当前栈空,无法读取数据"); return(""); } var count=0; var outStr=""; for(count=0;count方法 if(this.top==0){ alert("当前栈空,无法弹出数据"); return(""); } var popTo=this.unit[this.top-1]; this.top--; return(popTo); /* 从堆栈弹出数据,顶部指针减一,不过这里没有做到资源的释放,也 就是说数据仍然存在于this.unit的数组中,只不过无法访问罢了。目前 我也没想到好的办法解决。*/ } }

6.最常用的JavaScript日期函数:

获取时间的某部份 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) 时间戳!! myDate.getHours(); //获取当前小时数(0-23) myDate.getMinutes(); //获取当前分钟数(0-59) myDate.getSeconds(); //获取当前秒数(0-59) myDate.getMilliseconds(); //获取当前毫秒数(0-999) myDate.toLocaleDateString(); //获取当前日期 myDate.toLocaleTimeString(); //获取当前时间 myDate.toLocaleString( ); //获取日期与时间 //3.计算之前或未来的时间 var myDate = new Date(); myDate.setDate(myDate.getDate() + 10); //当前时间加10天 //类似的方法都基本相同,以set开头,具体参考第2点 //4.计算两个日期的偏移量 var i = daysBetween(beginDate,endDate); //返回天数 var i = beginDate.getTimezoneOffset(endDate); //返回分钟数 //5.检查有效日期 //checkDate() 只允许"mm-dd-yyyy"或"mm/dd/yyyy"两种格式的日期 if( checkDate("2006-01-01") ){ } //正则表达式(自己写的检查 yyyy-mm-dd,yy-mm-dd,yyyy/mm/dd,yy/mm/dd 四种) var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/; if( r.test( myString ) ){ }

7.最常用字符串函数API:

-1 ){ } //结果: true ////7.查找替换字符串 var myString = "I is your father."; var result = myString.replace("is","am"); //结果: "I am your father." //8.特殊字符: //\b : 后退符 \t : 水平制表符 //\n : 换行符 \v : 垂直制表符 //\f : 分页符 \r : 回车符 //\" : 双引号 \' : 单引号 //\\ : 反斜杆 //9.将字符转换成Unicode编码 var myString = "hello"; var code = myString.charCodeAt(3); //返回"l"的Unicode编码(整型) var char = String.fromCharCode(66); //返回Unicode为66的字符 //10.将字符串转换成URL编码 var myString = "hello all"; var code = encodeURI(myString); //结果: "hello%20all" var str = decodeURI(code); //结果: "hello all" //相应的还有: encodeURIComponent() decodeURIComponent()

8.数学函数:

atan(num) : 返回num的反正切值 5. Math.atan2(y,x) : 返回y除以x的商的反正切值 6. Math.ceil(num) : 返回大于num的最小整数 7. Math.cos(num) : 返回num的余弦值 8. Math.exp(x) : 返回以自然数为底,x次幂的数 9. Math.floor(num) : 返回小于num的最大整数 10.Math.log(num) : 返回num的自然对数 11.Math.max(num1,num2) : 返回num1和num2中较大的一个 12.Math.min(num1,num2) : 返回num1和num2中较小的一个 13.Math.pow(x,y) : 返回x的y次方的值 14.Math.random() : 返回0到1之间的一个随机数 15.Math.round(num) : 返回num四舍五入后的值 16.Math.sin(num) : 返回num的正弦值 17.Math.sqrt(num) : 返回num的平方根 18.Math.tan(num) : 返回num的正切值 19.Math.E : 自然数(2.718281828459045) 20.Math.LN2 : 2的自然对数(0.6931471805599453) 21.Math.LN10 : 10的自然对数(2.302585092994046) 22.Math.LOG2E : log 2 为底的自然数(1.4426950408889634) 23.Math.LOG10E : log 10 为底的自然数(0.4342944819032518) 24.Math.PI : π(3.141592653589793) 25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476) 26.Math.SQRT2 : 2的平方根(1.4142135623730951)

9.浏览器特征函数:

名称 //IE : "Microsoft Internet Explorer" //NS : "Netscape" var browserName = navigator.appName; //2.浏览器版本 var browserVersion = navigator.appVersion; //3.客户端操作系统 var isWin = ( navigator.userAgent.indexOf("Win") != -1 ); var isMac = ( navigator.userAgent.indexOf("Mac") != -1 ); var isUnix = ( navigator.userAgent.indexOf("X11") != -1 ); //4.判断是否支持某对象,方法,属性 //当一个对象,属性未定义时会返回undefined或null等,这些特殊值都是false if( document.images ){ } if( document.getElementById ){ } //5.检查浏览器当前语言 if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); } //6.检查浏览器是否支持Cookies if( navigator.cookieEnabled ){ }

10.JavaScript面向对象的方法实现继承:call方法

修改它的话~~) animal.SEX_G = new Object(); // 雌性 animal.SEX_B = new Object(); // 雄性 // 动物子类 鸟 function bird(bSex){ animal.call(this,bSex); this.fly = function(iSpeed){ alert("飞行时速高达 " + iSpeed); } } // 动物子类 鱼 function fish(bSex){ animal.call(this,bSex); this.swim = function(iSpeed){ alert("游动时速高达 " + iSpeed) } } // 鱼 鸟 杂交品种。。。 function crossBF(bSex){ bird.call(this,bSex); fish.call(this,bSex); } var oPet = new crossBF(animal.SEX_G); // 雌性 鱼鸟 alert(oPet.getSex() == animal.SEX_G ? "雌性" : "雄性"); oPet.fly(124) oPet.swim(254)

11.用面向对象的编程方式写JavaScript:

12.常用的js方法,

包括表单校验的一些方法,下拉菜单常用的方法等等:

= v2) { alert(msg); v2.focus(); return false; } return true; } /** * 比较两个金额大小的方法. * @param {较小的金额} smallNum * @param {较大的金额} bigNum * @param {出错提示信息} msg * @return {Boolean} */ function compareTwoNum(smallNum,bigNum,msg) { var v1 = $(smallNum).value; var v2 = $(bigNum).value; if (parseFloat(v1) >= parseFloat(v2)) { alert(msg); v2.focus(); return false; } return true; } /** * 检查文本框的长度是否超出指定长度. * @param {文本id} textId * @param {文本框的最大长度} len * @param {文本框描述内容} msg * @return {有错就返回false,否则返回true} */ function checkLength(textId,len,msg) { obj = $(textId); str = obj.value; str = str.replace(/[^\x00-\xff]/g,"**"); realLen = str.length; if (realLen > len) { alert("[" + msg + "]" + "长度最大为" + len + "位," + "请重新输入!\n注意:一个汉字占2位。"); obj.focus(); return false; } else return true; } /** * 判断某个文本框不可以为空. * @param {文本框id} textId * @param {文本框描述内容} msg * @return {有错就返回false,否则返回true} */ function checkIfEmpty(textId,msg) { var textObj = $(textId); var textValue = textObj.value; if (trim(textValue) == '') { alert('[' + msg + ']不得为空!'); textObj.focus(); return false; } else { return true; } } /** * 判断指定文本框内容必须为邮件. * @param {文本框id} textId * @param {文本框描述} msg * @return {如果是邮件内容就返回true否则返回false} */ function checkIsMail(textId,msg) { var obj = $(textId); if (!_isEmail(obj.value)) { alert('[' + msg + ']不是合法的邮件地址!'); obj.focus(); return false; } else return true; } /** * 验证是不是邮件. * @param {要验证的字符串} strEmail * @return {Boolean} */ function _isEmail(strEmail) { //接下来的验证是否有两个以上的‘.'号,有的话就是错的! var first = strEmail.indexOf('.'); if (strEmail.indexOf('@')== -1) { return false; } var tempStr = strEmail.substring(first + 1); if (tempStr.indexOf('.') != -1) { return false; } if (strEmail .search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) { return true; } else return false; } /** * 判断某个文本框是否数字. * @param {文本框id} textId * @param {文本框描述内容} msg * @return {Boolean} */ function checkIsNum(textId,msg) { obj = $(textId); if (isNaN(obj.value)) { alert('[' + msg + ']必须为数字。'); obj.focus(); return false; } else return true; } /** * 判断某个文本框是否含有非法字符. * @param {文本框的id} textId * @param {文本框描述内容} msg * @return {有错就返回false否则返回true} */ function checkIsValid(textId,msg) { obj = $(textId); if (!_isValidString(obj.value,'[' + msg + ']不得含有非法字符。')) { obj.focus(); return false; } return true; } /** * 判断是不是合法字符串. * @param {要进行判断的字符串} szStr * @param {文本描述} errMsg * @return {合法则返回true否则返回false} */ function _isValidString(szStr,errMsg) { voidChar = "'\"><`~!@#$%^&\(\)()!¥……??“”‘'*"; for (var i = 0; i < voidChar.length; i++) { aChar = voidChar.substring(i,i + 1); if (szStr.indexOf(aChar) > -1){ alert(errMsg) return false; } } return true; } /*************** 以下方法和下拉菜单相关*************************************************/ /** * 控制下拉菜单不可以为-1(未选择情况value=-1) * @param {下拉菜单id} selectId * @param {下拉菜单描述内容} msg * @param {下拉菜单的空值对应的value,默认为-1} nullValue * @return {Boolean} */ function checkChooseSelect(selectId,msg,nullValue) { var obj = $(selectId); if (obj.value == notNull(nullValue,'-1')) { alert('[' + msg + ']必选!'); obj.focus(); return false; } else return true; } /** * 得到下拉菜单显示文字. * @param {下拉菜单dom对象} selectObj * @return {返回下拉菜单显示的"文本"} */ function getSelectText(selectObj) { return selectObj.options[selectObj.selectedIndex].text; } /** * 得到下拉菜单显示的值. * @param {下拉菜单dom对象} selectObj * @return {得到下拉菜单显示的"值"} */ function getSelectValue(selectObj) { return selectObj.options[selectObj.selectedIndex].value; } /** * 设置下拉菜单的选择状态到指定的值. * @param {下拉菜单对象} obj * @param {要选择的值} value */ function setSelectValue(obj,value) { /*for (i = obj.options.length - 1; i >= 0; i--) { if (obj.options[i].value == value) { obj.options[i].selected = true; return; } } */ obj.value= value; } /** * 根据键值串的内容进行下拉菜单的动态组装 * @param {要进行下拉菜单组装的dom对象} obj * @param {键值对用,和;分割,例如'1,男;2,女;3,未知'} valAndText */ function setSelectContent(obj,valAndText){ if(trim(valAndText)==''){ alert('没有要进行组装下拉菜单的数据!'); return false; } clearSelect(obj); var keyandvalues = valAndText.split(';'); for(var i=0;i0; i--) { obj.remove(0); } } /*************** 以下方法和多选框相关*************************************************/ /** * 返回选中的checks的id组成的字符串,逗号隔开. * @param {checks数组} checks * @return 选择的id组成的字符串 */ function getCheckedIds(checks){ var selectedValue = ''; var len = checks.length; for(var index=0; index0) return selectedValue.substring(0,selectedValue.length-1); return selectedValue; }

下面的代码放到html标签里,并在head里调用上面的js:

大的日期: 错误!') 大的数: 菜单非空校验: 得到下拉菜单的值 菜单的键值字符串(如右所示)

以上所述就是本文的全部内容了,希望大家能够喜欢。

原文链接:https://www.f2er.com/js/53520.html

猜你在找的JavaScript相关文章