よく使用される実用的なネイティブ JavaScript 関数_JavaScript スキル

CSS と HTML のスキルの概要については、ここをクリックして次のサイトにアクセスしてください: フロントエンド開発におけるいくつかの一般的なスキルの概要 また、Taobao UED が主催するフロントエンドのヒントを表示するには、Lanezhi ブログにアクセスすることもできます。 12sui.cn/category/css/ .
1. document.getElementById の略語: http://www.jb51.net/article/24762.htm2. getElementsByTagName の:
http:// /www.jb51.net/article/24026.htm3. ネイティブ JavaScript で要素インデックスを取得する関数: http://www.jb51 .net/article/24763.htm
; 4. window.onload の代わりに、読み込み関数を複数回呼び出すことができます:

コードをコピー🎜> コードは次のとおりです。 function iLoad(func) {

var oLoad=window.onload

if(typeof window.onload!=) '関数'){
window.onload=func;
}else{
window.onload=function(){
oLoad(); 🎜>}
}


5. 次の要素ノードを取得します:

コードをコピーします

コードは次のとおりです。 function nextElem(node){ if(node.nodeType==1) return node; if(node.nextSibling) return nextElem(node. nextSibling); return null;

}

6. 前の要素ノードを取得します (この関数は項目 5 の関数を呼び出す必要があります):

コードをコピー

コードは次のとおりです: function prevElem(node){ if(node.nodeType==1) { return ノード; }else if(node.previousSibling){

return nextElem(node.previousSibling);

return null;


7. ネイティブ JavaScript には insertBefore メソッドがありますが、残念ながらありません。insertAfter メソッドがない場合はどうすればよいですか?




コードをコピーします

コードは次のとおりです:

function insertAfter(newChild,refChild){ var parElem=refChild.親ノード; if(parElem.lastChild==refChild){ refChild.appendChild(newChild); 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 =value; 🎜>} 9. 要素のスタイルを取得します:

コードをコピーします


コードは次のとおりです。次のように:


function getStyle(id,stylename){
var elem=$(id);
if(elem.currentStyle){

realStyle=elem.currentStyle[スタイル名];
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(elem,null)[スタイル名];

return realStyle; } 10. 互換性のあるイベント バインディング:

コードをコピー


コードは次のとおりです。 :


function addEventSamp(obj,evt,fn){
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false) ; (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. 検出スタイル

コードをコピー コードは次のとおりです。

関数 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, ' ')
}
}


元の記事Think 氏のブログで公開:
http://mrthink.net/javascript-common-function-tip/

$()

コードをコピーします コードは次のとおりです。 function $() {

var elements = []

for (var i = 0; i var element = = 'string')
element = document.getElementById(element);
if (arguments. length == 1)
return element;
elements.push(element);
return elements;
DOM 要素を表示または非表示にするために使用されます。




コードをコピーします

コードは次のとおりです。


function toggle(obj) {

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