JQuery는 XML 파일 데이터를 읽고 구현 code_jquery를 표시합니다.

준비 작업

시작하기 전에 다음 준비 작업을 수행해야 합니다.

1. DEMO.html이라는 이름의 빈 HTML 파일을 만듭니다(Editplus를 사용하여 만드는 것이 좋습니다).

2 .JQuery 프레임워크의 기본 구문을 숙지하세요. (익숙하지 않아도 상관없습니다. 나중에 자세히 설명하겠습니다.)

3. 데이터를 저장하기 위한 data.xml이라는 파일입니다. 예, 보기 위해 패키지한 파일을 다운로드할 수도 있습니다.

4. 이 이미지는 다음과 같습니다. XML을 읽기 위한 대기 시간 동안 빈 HTML 문서에 표시하는 데 사용됩니다.

공식 시작

1단계: 먼저 이 data.xml의 간단한 구조를 살펴보겠습니다. 여기서 보여드리는 데이터는 "새턴이 추천하는 여러 권의 책"이므로 책 정보이고, xml에는 책 이름, 썸네일, 책 설명 정보가 포함되어 있습니다.

다음은 XML 파일 코드입니다. :

코드 복사 코드는 다음과 같습니다.

개요는 다음과 같습니다(www.jb51.net)





개요는 다음과 같습니다(www.jb51.net)





개요는 다음과 같습니다(www.jb51.net)
🎜>

두 번째로, 빈 HTML 문서에 로드된 JavaScript 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function()
{
$.get('myData.xml', function(d){
$('body').append ('

Saturn이 추천하는 책은 다음과 같습니다.

> ;');
$('body').append('

')

$(d).find('book').each(function(){

var $book = $(this);
var title = $book.attr("title")
var 설명 = $book.find('description').text() ;
var imageurl = $book.attr('imageurl')

var html = '

< ;img class="bookImage" alt="" src="' imageurl '" />

';
html = '

'; title">' 제목 '';
html = '

' 설명 '

' ;
html = '

';

$('dl').append($(html));

$('.loadingPic').
}); 🎜>})



2단계: 여기서는 JavaScript 코드의 원리와 동작 과정에 대해서만 이야기하고 구문에 대해서는 너무 많이 논의하지 않을 것입니다. 구문에 대해 궁금한 점이 있으면 메시지를 남기거나 확인하십시오. JQuery 관련 문서를 꺼냅니다.

1행: HTML 문서가 준비되면(즉, html과 JavaScript가 모두 다운로드됨) JQuery의 $(document).ready 메서드와 내부 프로세스가 자동으로 실행됩니다. 분명히 여기서는 $.get 메소드가 먼저 실행됩니다.
3행: $.get의 첫 번째 매개변수는 XML 파일의 상대 경로입니다(경로를 올바르게 입력해야 합니다. 여기서는 XML과 웹 페이지 파일을 동일한 폴더에 넣습니다). 두 번째 매개변수는 콜백 함수, 즉 콜백 함수이다. 즉, 이 XML 파일의 내용은 get 메소드를 통해 요청되고 내부 데이터는 이 콜백 함수를 통해 조작됩니다. 콜백의 매개변수 d는 XML 콜백에서 반환된 모든 데이터를 나타냅니다. 이 매개변수 d를 사용하면 다음 내용을 진행할 수 있습니다.
4행: JavaScript를 통해 문서의 BODY에

태그를 동적으로 추가합니다. 이는 페이지의 전체 제목이므로 중요하지 않습니다.
5행: < 태그도 동적으로 추가합니다. BODY의 ;dl> 포함 루프 아래의 콘텐츠 컨테이너로 사용됩니다. (20행이 사용됩니다.)
7행: 콜백 함수의 매개변수 d가 XML의 모든 데이터 콜백을 나타낸다고 이미 말했기 때문에 이 행은 중요합니다. 이제 이러한 데이터를 처리(필터링)하고 서식을 지정해야 합니다. ; 참고하세요: 여기에서 책 태그(태그)가 검색된 다음 xml의 데이터 항목이 완전히 순환될 때까지 각 태그 이후의 함수가 루프에서 실행됩니다(PHP의 foreach 함수와 약간 비슷함).
9행: $(this)는 실제로 d의 현재 도서 정보 객체를 인스턴스화하여 작업을 용이하게 하는 것입니다.
10행--12행: 현재 객체를 가져옵니다. $book 각각. 책 이름, 설명 및 썸네일; (속성 값과 노드 값을 가져오는 구문이 다름)
14행 - 18행: 출력을 위한 서식 책 정보
20행; : 정보 출력을 HTML 출력 모드로 문서로 포맷합니다.
22행: 현재 정보가 XML에서 판독되고 있음을 사용자에게 알리기 위해 이미지는 2000밀리초(2초) 후에 사라집니다.

3단계: 이제 완료되었습니다. JQuery의 개발과 직면한 문제에 대해 논의하기 위해 메시지를 남기는 것은 누구나 환영합니다. 자유롭게 조언해 주시기 바랍니다. 또한, 다운로드한 폴더를 WEB 환경(IIS 또는 가상호스트)에서 실행하시기 바랍니다.

코드 패키지 다운로드