脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 原生JavaScript函数

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

 更新时间：2010年09月08日 11:47:34   作者：  
日常开始中常用到的一些原生JavaScript函数,比较实用, 今天特地整理一下,分享给大家,希望对大家有用,会常更新,同时也欢迎大家补充.
css及html方面的技巧总结,点此前往: 前端开发中一些常用技巧总结, 你还可以前往兰芝博客, 查看由淘宝UED整理的前端tips: http://www.12sui.cn/category/css/.
1. document.getElementById的简写: https://www.jb51.net/article/24762.htm;
2. getElementsByTagName的简写方式: https://www.jb51.net/article/24026.htm;
3. 原生JavaScript中获取元素索引的函数: https://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":"")
}
您可能感兴趣的文章:

相关文章

  • ES6入门教程之变量的解构赋值详解

    ES6入门教程之变量的解构赋值详解

    这篇文章主要给大家介绍了关于ES6入门教程之变量的解构赋值的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-04-04
  • 详解js中常用4个基础算法

    详解js中常用4个基础算法

    本文主要介绍了JS中常用的四个基础算法，主要介绍了冒泡排序，选择排序，插入排序和快速排序这四种算法,需要的朋友可以参考下
    2023-05-05
  • VS Code中JavaScript环境搭建配置全过程

    VS Code中JavaScript环境搭建配置全过程

    node.js大部分基本模块都用JavaScript语言编写,JavaScript最早是运行在浏览器中,通常作为客户端程序设计语言使用,node.js的出现使JavaScript也能用于服务端编程,这篇文章主要给大家介绍了关于VS Code中JavaScript环境搭建配置的相关资料,需要的朋友可以参考下
    2024-02-02
  • 深入理解ES7的async/await的用法

    深入理解ES7的async/await的用法

    本篇文章主要介绍了深入理解ES7的async/await的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS面向对象编程浅析

    JS面向对象编程浅析

    下面就结合我自己的体会和所学习的东东和大家一起来学习在JS中如何使用面向对象的编程。
    2011-08-08
  • JavaScript中的相等操作符使用详解

    JavaScript中的相等操作符使用详解

    JavaScript 中的相等操作符详解，包括 [] == []、[] == ![]、{} == !{}几个操作符,需要的朋友可以参考下
    2019-12-12
  • JS实现本地存储信息的方法(基于localStorage与userData)

    JS实现本地存储信息的方法(基于localStorage与userData)

    这篇文章主要介绍了JS实现本地存储信息的方法,基于localStorage与userData实现本地存储的功能,需要的朋友可以参考下
    2017-02-02
  • JS实现电子时钟入门操作

    JS实现电子时钟入门操作

    这篇文章主要为大家详细介绍了JS实现电子时钟入门操作，实现带有表盘的时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序自定义组件和通信的方法

    微信小程序自定义组件和通信的方法

    开发中常见的组件主要分为公共组件和页面组件两种,因此注册组件的方式也分为两种全局注册和局部注册,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • 超级详细的webpack Plugin讲解

    超级详细的webpack Plugin讲解

    plugin是插件的意思,通常是用于对某个现有的架构进行扩展,下面这篇文章主要给大家介绍了关于webpack Plugin的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04

最新评论