一些常用且實(shí)用的原生JavaScript函數(shù)
更新時(shí)間：2010年09月08日 11:47:34 作者：
日常開始中常用到的一些原生JavaScript函數(shù),比較實(shí)用, 今天特地整理一下,分享給大家,希望對(duì)大家有用,會(huì)常更新,同時(shí)也歡迎大家補(bǔ)充.
css及html方面的技巧總結(jié),點(diǎn)此前往: 前端開發(fā)中一些常用技巧總結(jié), 你還可以前往蘭芝博客, 查看由淘寶UED整理的前端tips: http://www.12sui.cn/category/css/.
1. document.getElementById的簡(jiǎn)寫: http://www.fzitv.net/article/24762.htm;
2. getElementsByTagName的簡(jiǎn)寫方式: http://www.fzitv.net/article/24026.htm;
3. 原生JavaScript中獲取元素索引的函數(shù): http://www.fzitv.net/article/24763.htm;
4. 替代window.onload,可多次調(diào)用的加載函數(shù):
function iLoad(func) {
var oLoad=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oLoad();
func();
}
}
}
5. 獲取下一個(gè)元素節(jié)點(diǎn):
function nextElem(node){
if(node.nodeType==1) return node;
if(node.nextSibling) return nextElem(node.nextSibling);
return null;
}
6. 獲取上一個(gè)元素節(jié)點(diǎn)(此函數(shù)須調(diào)用第五條中的函數(shù)):
function prevElem(node){
if(node.nodeType==1){
return node;
}else if(node.previousSibling){
return nextElem(node.previousSibling);
}else{
return null;
}
}
7. 原生JavaScript中有insertBefore方法,可惜卻沒有insertAfter方法,怎么辦?用如下函數(shù)實(shí)現(xiàn):
function insertAfter(newChild,refChild){
var parElem=refChild.parentNode;
if(parElem.lastChild==refChild){
refChild.appendChild(newChild);
}else{
parElem.insertBefore(newChild,refChild.nextSibling);
}
}
8. 為元素添加樣式[記住是添加不是替換,相當(dāng)于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. 檢測(cè)樣式
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, ' ');
}
}
原文發(fā)布于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（）
用來顯示或隱藏一個(gè)DOM元素。
function toggle(obj) {
var el = document.getElementById(obj);
el.style.display=(el.style.display !="none"?"none":"")
}
1. document.getElementById的簡(jiǎn)寫: http://www.fzitv.net/article/24762.htm;
2. getElementsByTagName的簡(jiǎn)寫方式: http://www.fzitv.net/article/24026.htm;
3. 原生JavaScript中獲取元素索引的函數(shù): http://www.fzitv.net/article/24763.htm;
4. 替代window.onload,可多次調(diào)用的加載函數(shù):
復(fù)制代碼 代碼如下:
function iLoad(func) {
var oLoad=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oLoad();
func();
}
}
}
5. 獲取下一個(gè)元素節(jié)點(diǎn):
復(fù)制代碼 代碼如下:
function nextElem(node){
if(node.nodeType==1) return node;
if(node.nextSibling) return nextElem(node.nextSibling);
return null;
}
6. 獲取上一個(gè)元素節(jié)點(diǎn)(此函數(shù)須調(diào)用第五條中的函數(shù)):
復(fù)制代碼 代碼如下:
function prevElem(node){
if(node.nodeType==1){
return node;
}else if(node.previousSibling){
return nextElem(node.previousSibling);
}else{
return null;
}
}
7. 原生JavaScript中有insertBefore方法,可惜卻沒有insertAfter方法,怎么辦?用如下函數(shù)實(shí)現(xiàn):
復(fù)制代碼 代碼如下:
function insertAfter(newChild,refChild){
var parElem=refChild.parentNode;
if(parElem.lastChild==refChild){
refChild.appendChild(newChild);
}else{
parElem.insertBefore(newChild,refChild.nextSibling);
}
}
8. 為元素添加樣式[記住是添加不是替換,相當(dāng)于jQuery中的addClass(value)]:
復(fù)制代碼 代碼如下:
function addClass(elem,value){
if(!elem.className){
elem.className=value;
}else{
var oValue=elem.className;
oValue+=" ";
oValue+=value;
elem.className=oValue;
}
}
9. 獲取元素的樣式:
復(fù)制代碼 代碼如下:
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. 兼容事件綁定:
復(fù)制代碼 代碼如下:
function addEventSamp(obj,evt,fn){
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
11. 移除事件
復(fù)制代碼 代碼如下:
function removeEventSamp(obj,evt,fn){
if(obj.removeEventListener){
obj.removeEventListener(evt,fn,false);
}else if(obj.detachEvent){
obj.detachEvent('on'+evt,fn);
}
}
12. 檢測(cè)樣式
復(fù)制代碼 代碼如下:
function hasClass(element, className){
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
return element.className.match(reg);
}
13. 刪除樣式
復(fù)制代碼 代碼如下:
function removeClass(element, className){
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
element.className = element.className.replace(reg, ' ');
}
}
原文發(fā)布于Mr.Think的博客： http://mrthink.net/javascript-common-function-tip/
$()
復(fù)制代碼 代碼如下:
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（）
用來顯示或隱藏一個(gè)DOM元素。
復(fù)制代碼 代碼如下:
function toggle(obj) {
var el = document.getElementById(obj);
el.style.display=(el.style.display !="none"?"none":"")
}
您可能感興趣的文章:
- 一些常用的Javascript函數(shù)
- 經(jīng)常用到的javascript驗(yàn)證函數(shù)收集
- 常用簡(jiǎn)易JavaScript函數(shù)
- 幾個(gè)常用的JavaScript字符串處理函數(shù) - split()、join()、substring()和indexOf()
- JavaScript 常用函數(shù)庫詳解
- Jquery作者John Resig自己封裝的javascript 常用函數(shù)
- JavaScript 常用函數(shù)
- JavaScript 匿名函數(shù)（anonymous function）與閉包（closure）
- javascript中動(dòng)態(tài)函數(shù)用法實(shí)例分析
- 跟我學(xué)習(xí)javascript的函數(shù)和函數(shù)表達(dá)式
- 跟我學(xué)習(xí)javascript的函數(shù)調(diào)用和構(gòu)造函數(shù)調(diào)用
- 詳解JavaScript中常用的函數(shù)類型
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于ES6入門教程之變量的解構(gòu)賦值的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本文主要介紹了JS中常用的四個(gè)基礎(chǔ)算法，主要介紹了冒泡排序，選擇排序，插入排序和快速排序這四種算法,需要的朋友可以參考下2023-05-05
VS?Code中JavaScript環(huán)境搭建配置全過程
node.js大部分基本模塊都用JavaScript語言編寫,JavaScript最早是運(yùn)行在瀏覽器中,通常作為客戶端程序設(shè)計(jì)語言使用,node.js的出現(xiàn)使JavaScript也能用于服務(wù)端編程,這篇文章主要給大家介紹了關(guān)于VS?Code中JavaScript環(huán)境搭建配置的相關(guān)資料,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了深入理解ES7的async/await的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
下面就結(jié)合我自己的體會(huì)和所學(xué)習(xí)的東東和大家一起來學(xué)習(xí)在JS中如何使用面向?qū)ο蟮木幊獭?/div> 2011-08-08
JavaScript 中的相等操作符詳解，包括 [] == []、[] == ![]、{} == !{}幾個(gè)操作符,需要的朋友可以參考下2019-12-12
JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法(基于localStorage與userData)
這篇文章主要介紹了JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法,基于localStorage與userData實(shí)現(xiàn)本地存儲(chǔ)的功能,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)電子時(shí)鐘入門操作，實(shí)現(xiàn)帶有表盤的時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
開發(fā)中常見的組件主要分為公共組件和頁面組件兩種,因此注冊(cè)組件的方式也分為兩種全局注冊(cè)和局部注冊(cè),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
plugin是插件的意思,通常是用于對(duì)某個(gè)現(xiàn)有的架構(gòu)進(jìn)行擴(kuò)展,下面這篇文章主要給大家介紹了關(guān)于webpack?Plugin的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04最新評(píng)論