javascript dom 코드 는 간단 한 앨범[fireforx only]을 사용 합 니 다.

그러나 나 는 이것 이 아직 안 된다 고 생각한다.왜냐하면 모든 것 은 다른 사람 이 포장 한 것 이기 때문에 스스로 원생 의 자바 script 을 깊이 공부 해 야 성실 하 다.오늘 은 좋 은 박문 을 보고 js dom 프로 그래 밍 을 바탕 으로 하 는 앨범 인 스 턴 스 를 소개 했다.비록 이 예 는 매우 작 지만 개인 적 으로 학습 가치 가 있다 고 생각 하고 html 와 효과 도 를 먼저 제시 하면 뒤의 js 이해 에 도움 이 된다.

 
<body> 
<div id="content"> 
<h1>Snapshots</h1> 
<ul id="imagegallery"> 
<li> 
<a href="photo/fireworks.jpg" title="A fireworks display"> 
<img src="photo/thumbnail_fireworks.jpg" alt="Fireworks" /> 
</a> 
</li> 
<li> 
<a href="photo/coffee.jpg" title="A cup of black coffee"> 
<img src="photo/thumbnail_coffee.jpg" alt="Coffee" /> 
</a> 
</li> 
<li> 
<a href="photo/rose.jpg" title="A red, red rose"> 
<img src="photo/thumbnail_rose.jpg" alt="Rose" /> 
</a> 
</li> 
<li> 
<a href="photo/bigben.jpg" title="The famous clock"> 
<img src="photo/thumbnail_bigben.jpg" alt="Big Ben" /> 
</a> 
</li> 
</ul> 
</div> 
</body>

구 조 는 매우 간단 합 니 다.여기 a 요소 의 href 속성 값 은 큰 그림 을 표시 하 는 경로 이 고 img 은 대응 하 는 작은 그림 입 니 다.효 과 는 아래 의 작은 그림 을 클릭 하고 위 에 대응 하 는 큰 그림 을 표시 하 는 것 입 니 다.다음은 js 실현:

 
<script type="text/javascript"> 
/*3         ，     a  */ 
function showPic(whichpic) { 
if(!document.getElementById("placeholder")) return true; 
/*  a   href*/ 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
/*    : img   src  a   href*/ 
placeholder.setAttribute("src",source); 
if(!document.getElementById("description")) return false; 
/*  a   title*/ 
if(whichpic.getAttribute("title")) { 
var text = whichpic.getAttribute("title"); 
} else { 
var text = ""; 
} 
/* a   title      */ 
var description = document.getElementById("description"); 
if(description.firstChild.nodeType == 3) { 
description.firstChild.nodeValue = text; 
} 
return false; 
} 
/*2    imagegallery a   click      */ 
function prepareGallery() { 
if(!document.getElementsByTagName) return false; 
if(!document.getElementById) return false; 
if(!document.getElementById("imagegallery")) return false; 
var gallery = document.getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 
for(var i=0; i < links.length; i++) { 
links[i].onclick = function() { 
return showPic(this); 
} 
links[i].onkeypress = links[i].onclick; 
} 
} 
/*  load         */ 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if(typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 
} 
} 
} 
/* 1.    */ 
function preparePlaceholder() { 
if(!document.createElement) return false; 
if(!document.createTextNode) return false; 
/*    img  ,      */ 
var placeholder = document.createElement("img"); 
placeholder.setAttribute("id", "placeholder"); 
placeholder.setAttribute("src", "photo/placeholder.gif"); 
placeholder.setAttribute("alt", "my image gallery"); 
/*      ,    */ 
var description = document.createElement("p"); 
description.setAttribute("id","description"); 
var desctext = document.createTextNode("choose an image"); 
description.appendChild(desctext); 
/*imagegallery     ul*/ 
var gallery = document.getElementById("imagegallery"); 
/*            */ 
gallery.parentNode.insertBefore(placeholder, gallery); 
gallery.parentNode.insertBefore(description, gallery); 
} 
/*      */ 
addLoadEvent(preparePlaceholder); 
addLoadEvent(prepareGallery); 
</script>

우 리 는 preparePlaceholder 함 수 를 먼저 보고 이 함수 에 img 요소 placeholder 를 만 들 었 으 며 해당 하 는 속성(id,src,alt)을 설정 하고 p 요소 description 을 만 들 었 습 니 다.p 요소 에 appendChild 방법 으로 텍스트 노드 를 삽입 하여 사진 에 대한 설명 을 했 습 니 다.처음에'choose an image'였 습 니 다.그리고 document.getElement ById 를 통 해 ul 을 찾 고 생 성 된 img 과 p 를 그림 목록 에 삽입 합 니 다.insert Before 의 용법 을 설명 하고 Mozilla developer center 을 찾 아 보 았 습 니 다.
　　　　　　var insertedElement = parentElement.insertBefore(newElement, referenceElement);
inserted Element 는 사실 new Element 입 니 다.결 과 를 되 돌려 줍 니 다.
parentElement 는 부모 급 요 소 를 삽입 하 는 것 입 니 다.어떤 요 소 를 삽입 하 는 것 입 니까?
뉴 엘 리 먼 트 는 당연히 그 새로운 요 소 를 삽입 해 야 죠.
reference Element 는 어떤 요소 이전에 삽입 해 야 하 는 지 를 말 합 니 다.
    이 어 prepareGallery 함 수 를 살 펴 보 겠 습 니 다.모든 a 요소 에 클릭 이 벤트 를 부여 하 는 역할 을 합 니 다.그 중에서 return showPic(this)는 기본적으로 false 로 돌아 갑 니 다.a 요 소 를 클릭 한 후의 기본 행동 을 막 기 위해 서 입 니 다.(새 페이지 에 직접 그림 을 표시 합 니 다)
    다음은 가장 핵심 적 인 쇼 픽 함수 입 니 다.패키지 에 대응 하 는 작은 그림 을 가 져 오 는 a 요소 의 href 와 title 속성 값(href 의 값 은 작은 그림 에 대응 하 는 큰 그림 의 경로)을 통 해 preparePlaceholder 함수 에서 생 성 된 img 에 src 속성 을 설정 하고 p 의 설명 텍스트 와 최종 효 과 를 냅 니 다.이 안에 node Type 이 있 는데 구체 적 으로 Mozilla developer center 에서 도 찾 을 수 있 습 니 다.
    마지막 으로 재 미 있 는 함수 가 하나 더 있 습 니 다.바로 addLoadEvent 입 니 다.재 미 있 습 니 다.재 미 있 습 니 다.재 미 있 습 니 다.이벤트 함 수 를 대기 열 처럼 넣 고 순서대로 실행 합 니 다.
하하,이 앨범 은 여기까지 분 석 했 습 니 다.제 가 처음으로 박문 을 발 표 했 습 니 다.뭔 가 잘못 되 거나 향상 시 켜 야 할 부분 이 있 습 니 다.박 우 들 이 많이 지적 해 주 셨 으 면 좋 겠 습 니 다.겸허 하 게 받 아들 이 겠 습 니 다.감사합니다.코드 패키지 다운로드

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

JavaScript DOM 조작③ 「태그명을 키로 요소를 취득」

이 기사에서는 JavaScript DOM 작업 "태그 이름을 키로 요소 가져오기" 에 대해 설명한다. 역할 HTML 내의 지정된 태그명을 가지는 요소를 취득하는 메소드 구문 구문은 다음과 같다. index.js 보충...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

javascript dom 코드 는 간단 한 앨범[fireforx only]을 사용 합 니 다.

좋은 웹페이지 즐겨찾기