일반적으로 사용되며 실용적인 기본 JavaScript 기능_javascript 기술

CSS 및 HTML 기술 요약을 보려면 여기를 클릭하여 프런트 엔드 개발의 몇 가지 일반적인 기술 요약으로 이동하세요. 또한 Lanezhi 블로그로 이동하여 Taobao UED에서 정리한 프런트 엔드 팁을 볼 수도 있습니다: http://www. 12sui.cn/category/css/
1. document.getElementById의 약어: http://www.jb51.net/article/24762.htm2. 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!= '함수'){
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. 이전 요소 노드를 가져옵니다(이 함수는 항목 5의 함수를 호출해야 함):

코드 복사 코드는 다음과 같습니다. 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. 요소에 스타일 추가 [교체보다는 추가를 기억하세요. addClass(jQuery의 값)와 동일함]:

코드 복사

코드는 다음과 같습니다. 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[스타일 이름]; }else if(window.getCompulatedStyle){

realStyle=window.getComputeStyle(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 var element =args[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements
DOM 요소를 표시하거나 숨기는 데 사용됩니다.

코드 복사

코드는 다음과 같습니다. functionggle(obj) { var el = document.getElementById(obj); el.style.display=(el.style.display !="none"?"none":"") }