>  기사  >  웹 프론트엔드  >  JQuery 구문 분석 HTML, JSON 및 XML에 대한 자세한 설명 example_jquery

JQuery 구문 분석 HTML, JSON 및 XML에 대한 자세한 설명 example_jquery

WBOY
WBOY원래의
2016-05-16 16:53:581228검색

1. HTML

때때로 HTML 조각이 HTML 파일에 저장되고 HTML 파일을 다른 메인 페이지에서 직접 읽은 다음 내부의 HTML 코드 조각이 구문 분석되어 메인 페이지에 통합됩니다.

fragment.html 파일 내용:

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

< ;div>hello Jquery

메인 페이지의 코드를 파싱합니다.
Test.html

코드를 복사합니다 코드는 다음과 같습니다. 🎜>
$("#a1").click(function(){
$("#div2").load('fragment.html');
false 반환;
});[ 코드]

2. JSON
JSON 파일은 test.json이며 내용은
[코드]
[{"name":"jim","age":"입니다. 20 "},{"name":"lily","age":"18","hobby":["swim","movie"]}]

메인 페이지의 코드를 파싱합니다.

Test.html

코드를 복사합니다 코드는 다음과 같습니다. 🎜>
$("#a2").click(function(){
$.getJSON('test.json',function(data){
var html = '                                                                                                                        td>'
                                 ​) {
html = 줄 ","
                                  html = ''
}); '';                                                                                                 


3. XML

XML 파일은 test.xml이고 내용은 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.

 
<루트> 
     
        深入浅出extjs 
        张三 
        88 
   
 
     
        锋利的jQuery 
        이사 
        <가격>99 
   
 
     
        深入浅流flex 
        王五 
        108 
   
 
     
        java编程思想 
        钱七 
        128 
   
 
 

주요면
Test.html中解析代码
复代码 代码如下:

$("#a3").click(function(){ 
        $.get('test.xml',function(data){ 
            var s="";
            $(data).find('book').each(function(i){ 
               var id=$(this).attr('id'); 
               var name=$(this) .children('name').text(); 
               var 작성자=$(this).children('author').text(); 
              var 가격=$(this).children('price' ).text(); 
               s =id "    " 이름 "    " 작성자 "    " 가격 "
"; 
          }); 
           $('#div2').html(s);
        });
    }); 

对JQuery解析不同文档做了一个Demo,Test.html적의 原码是
复主代码 代码如下:

 
 
    <제목>