一些常用且实用的原生JavaScript函数

css及html方面的技巧总结,点此前往: 前端开发中一些常用技巧总结, 你还可以前往兰芝博客, 查看由淘宝UED整理的前端tips: http://www.12sui.cn/category/css/.
1. document.getElementById的简写: http://www.jb51.net/article/24762.htm;
2. getElementsByTagName的简写方式: http://www.jb51.net/article/24026.htm;
3. 原生JavaScript中获取元素索引的函数: http://www.jb51.net/article/24763.htm;
4. 替代window.onload,可多次调用的加载函数:


代码如下:

function iLoad(func) {
var oLoad=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oLoad();
func();
}
}
}

5. 获取下一个元素节点:


代码如下:

function nextElem(node){
if(node.nodeType==1) return node;
if(node.nextSibling) return nextElem(node.nextSibling);
return null;
}

6. 获取上一个元素节点(此函数须调用第五条中的函数):


代码如下:

function prevElem(node){
if(node.nodeType==1){
return node;
}else if(node.previousSibling){
return nextElem(node.previousSibling);
}else{
return null;
}
}

7. 原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法,怎么办?用如下函数实现:


代码如下:

function insertAfter(newChild,refChild){
var parElem=refChild.parentNode;
if(parElem.lastChild==refChild){
refChild.appendChild(newChild);
}else{
parElem.insertBefore(newChild,refChild.nextSibling);
}
}

8. 为元素添加样式[记住是添加不是替换,相当于jQuery中的addClass(value)]:


代码如下:

function addClass(elem,value){
if(!elem.className){
elem.className=value;
}else{
var oValue=elem.className;
oValue+=" ";
oValue+=value;
elem.className=oValue;
}
}

9. 获取元素的样式:


代码如下:

function getStyle(id,stylename){
var elem=$(id);
var realStyle=null;
if(elem.currentStyle){
realStyle=elem.currentStyle[stylename];
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(elem,null)[stylename];
}
return realStyle;
}

10. 兼容事件绑定:


代码如下:

function addEventSamp(obj,evt,fn){
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}

11. 移除事件


代码如下:

function removeEventSamp(obj,evt,fn){
if(obj.removeEventListener){
obj.removeEventListener(evt,fn,false);
}else if(obj.detachEvent){
obj.detachEvent('on'+evt,fn);
}
}

12. 检测样式


代码如下:

function hasClass(element, className){
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
return element.className.match(reg);
}

13. 删除样式


代码如下:

function removeClass(element, className){
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
element.className = element.className.replace(reg, ' ');
}
}

原文发布于Mr.Think的博客: http://mrthink.net/javascript-common-function-tip/

$()


代码如下:

function $() {
var elements = [];
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}

toggle()

用来显示或隐藏一个DOM元素。


代码如下:

function toggle(obj) {
var el = document.getElementById(obj);
el.style.display=(el.style.display !="none"?"none":"")
}

(0)

相关推荐

  • 一些常用的Javascript函数

    来公司后所在项目组开发的是一个客户端的软件,软件界面采用WEB界面来体现,因此要用到不少Javascript.来公司后所在项目组开发的是一个客户端的软件,软件界面采用WEB界面来体现,因此要用到不少Javascript.把自己写的一些通用JS函数整理了下:) /*判断浏览器版本*/ var w3c=(document.getElementById)? true: false; var agt=navigator.userAgent.toLowerCase(); var ie = ((agt.in

  • 跟我学习javascript的函数和函数表达式

    1.函数声明与函数表达式 在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符: 函数声明:function 函数名称 (参数:可选){ 函数体 } 函数表达式:function 函数名称(可选)(参数:可选){ 函数体 } 所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函

  • JavaScript 常用函数

    javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert函数:显示一个警告对话框,包括一个OK按钮. (2)confirm函数:显示一个确认对话框,包括OK.Cancel按钮. (3)escape函数:将字符转换成Unicode码. (4)eval函数:计算表达式的结果. (5)isNaN函数:测试是(true)否(false)不是一个数字. (6)parseFloat函

  • JavaScript 常用函数库详解

    为此,收集了自己平时常用到一些JavaScript函数,它们在其它的JS库也常见,现在整理并附上注释,方便查阅,希望对大家有所帮助.注:假设以下所有函数都放在一个CC对象中,方便引用. 复制代码 代码如下: //这个方法相信是最常用的了, //它虽然没有选择器那么强大,但也有个小增强版,可查指定结点下ID所在的子元素 function $(id, p) { //id是否是字符串,还是一个HTML结点 var iss = id instanceof String || typeof id == "

  • javascript中动态函数用法实例分析

    本文实例讲述了javascript中动态函数用法.分享给大家供大家参考.具体分析如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态函数</title> <script

  • 详解JavaScript中常用的函数类型

    网页中的java代码需要写在JavaScript中,里面部分少不了函数,介绍一下JavaScript中常用的函数类型. 1.可变函数 <script> function show(){ alert("第一个..."); } function show(str){ alert("第二个"); } function show(a,b){ alert("第三个..."); alert(a+":"+b); } </s

  • 跟我学习javascript的函数调用和构造函数调用

    一.函数调用 Function绝对是JavaScript中的重中之重.在JavaScript中,Function承担了procedures, methods, constructors甚至是classes以及modules的功能. 在面向对象程序设计中,functions,methods以及class constructor往往是三件不同的事情,由不同的语法来实现.但是在JavaScript中,这三个概念都由function来实现,通过三种不同的模式. 最简单的使用模式就是function 调用

  • 几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()

    函数 :split() 功能 :使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico|png"; arr=theString.split("|"); //arr是一个包含字符值"jpg"."bmp"."gif"."ico"和"png"的数组 函数 :John() 功能 :使用您选择的分隔符将一个数组合并为一个字符串 例子:

  • 经常用到的javascript验证函数收集第1/3页

    建议大家收藏javascript验证函数,以后遇到就可以直接拿来用了/* ================================================================== 是否为空,只判断字符串 null或0长为空,经过trim IsStringNull(string) ================================================================== */ function IsStringNull(str)

  • Jquery作者John Resig自己封装的javascript 常用函数

    复制代码 代码如下: //获取元素的样式值. function getStyle(elem,name){ if(elem.style[name]){ return elem.style[name]; }else if(elem.currentStyle){ return elem.currentStyle[name]; }else if(document.defaultView&&document.defaultView.getComputedStyle){ name=name.repla

  • 常用简易JavaScript函数

    //函数名:strByteLength //功能介绍:返回字符串的字节长度 //参数说明:str 要检查的字符串 //返回值:字符串长度 function strByteLength(str) { var i,sum; sum=0; for(i=0;i<str.length;i++) { if ((str.charCodeAt(i)>=0) & (str.charCodeAt(i)<=255)) sum=sum+1; else sum=sum+2; } return sum; }

  • JavaScript 匿名函数(anonymous function)与闭包(closure)

    引入 匿名函数 闭包 变量作用域 函数外部访问函数内部的局部变量 用闭包实现私有成员 引入 闭包是用匿名函数来实现.闭包就是一个受到保护的变量空间,由内嵌函数生成."保护变量"的思想在几乎所有的编程语言中都能看到. 先看下 JavaScript 作用域: JavaScript 具有函数级的作用域.这意味着,不能在函数外部访问定义在函数内部的变量. JavaScript 的作用域又是词法性质的(lexically scoped).这意味着,函数运行在定义它的作用域中,而不是在调用它的作用

随机推荐