JQuery 가 XML 파일 데 이 터 를 읽 고 표시 하 는 구현 코드

2016 단어 JQueryXML
준비 작업 이 시작 되 기 전에 다음 과 같은 준 비 를 해 야 합 니 다.1.DEMO.html 공백 html 파일 을 만 듭 니 다.(Editplus 를 사용 하여 만 드 는 것 을 추천 합 니 다)2.JQuery 프레임 워 크 의 기본 문법 을 익히 기;(익숙 하지 않 으 면 괜 찮 습 니 다.나중에 자세히 설명 하 겠 습 니 다)3.data.xml 라 는 XML 파일 을 만들어 데 이 터 를 저장 합 니 다.XML 의 구조 아래 에 언급 될 것 입 니 다.제 가 포장 한 파일 을 다운로드 해서 볼 수도 있 습 니 다.4.loading.gif 그림 입 니 다.이 그림 은 XML 을 읽 어 내 는 대기 시간 에 빈 html 문서 에 표시 되 어 있 습 니 다.Step 1:먼저 이 data.xml 의 간단 한 구 조 를 보 여 줍 니 다.제 가 보 여 드 리 는 데 이 터 는'Saturn 이 추천 하 는 책 몇 권'이기 때문에 책 정보 입 니 다.그러면 xml 은 책의 이름,미리 보기 그림 과 책 설명 정 보 를 포함 합 니 다.다음은 XML 파일 코드 입 니 다.행 1:HTML 문서 준비 완료 후(즉 html 와 JavaScript 다운로드 완료)JQuery 의$(document).ready 방법 및 그 과정 이 자동 으로 실 행 됩 니 다.분명히 여기 서 먼저 실행 되 는 것 은$get 방법 입 니 다.줄 3:$.get 의 첫 번 째 매개 변 수 는 XML 파일 의 상대 경로 입 니 다.두 번 째 매개 변 수 는 Callback 함수,즉 반전 함수 입 니 다.이 XML 파일 의 내용 을 get 방법 으로 요청 한 다음 이 콜백 리 셋 함 수 를 통 해 데 이 터 를 조작 한 다 는 것 이다.한편,callback 의 매개 변수 d 는 XML 에서 반 환 된 모든 데 이 터 를 표시 합 니 다.이 매개 변수 d 가 있 으 면 다음 내용 을 진행 할 수 있 습 니 다.줄 4:자바 스 크 립 트 를 통 해 문서 의 BODY 에 동적 으로 탭

을 추가 합 니 다.이것 은 페이지 의 전체 제목 입 니 다.중요 하지 않 습 니 다.줄 5:같은 BODY 에 동적 으로 탭
을 추가 하여 순환 아래 내용 을 포함 하 는 용기 로 사용 합 니 다.(줄 20 은)줄 7:이 줄 은 매우 중요 합 니 다.왜냐하면 리 셋 함수 의 매개 변수 d 는 XML 에서 리 셋 된 모든 데 이 터 를 표시 하기 때문에 지금 우 리 는 이 데 이 터 를 처리(선별)하고 포맷 해 야 합 니 다.메모:북 탭(tag)을 찾 은 다음 xml 에 있 는 데이터 항목 이 완전히 순환 할 때 까지 each 뒤의 함 수 를 반복 합 니 다.(PHP 에 있 는 foreach 함수 와 같은 기능)행 9:$(this)는 실제로 대상 을 만 듭 니 다.d 의 현재 책 정보 대상 을 예화 하여 조작 하기 편리 하 게 하 는 것 이 목적 입 니 다.이것 이$book 입 니 다.줄 10-줄 12:현재 대상$book 의 책 이름,설명,미리 보기 그림 을 각각 가 져 옵 니 다.(속성 값 과 절 점 값 을 취 하 는 문법 이 다 릅 니 다)줄 14-줄 18:출력 할 수 있 도록 책 정 보 를 포맷 합 니 다.줄 20:문서 에 포맷 된 정 보 를 HTML 로 출력 합 니 다.줄 22:사용자 에 게 현재 정 보 를 XML 에서 읽 고 있다 는 것 을 알 리 기 위해 2000 밀리초(2 초)후에 그림 이 점점 사라 집 니 다.Step 3:이로써 큰 성 과 를 거 두 었 습 니 다.여러분 이 저 에 게 메 시 지 를 남 겨 주시 고 JQuery 의 개발 과 당신 이 직면 한 문 제 를 함께 토론 하 는 것 을 환영 합 니 다.아낌없이 가르쳐 주 십시오.또한 다운로드 한 폴 더 를 WEB 환경 에서 실행(IIS 또는 가상 호스트)하 십시오.직접 실행 하지 마 십시오코드 패키지 다운로드

좋은 웹페이지 즐겨찾기