HTML、JSON、XML を解析する JQuery の詳細な説明 example_jquery

1. HTML

HTML フラグメントが HTML ファイルに保存され、その HTML ファイルが別のメイン ページで直接読み取られ、その後、内部の HTML コード フラグメントが解析されてメイン ページに統合されることがあります。

fragment.html ファイル、その内容:

コードをコピー コードは次のとおりです:

< ;div>こんにちは、Jquery

メイン ページのコードを解析します
Test.html

コードをコピーします コードは次のとおりです:

$("#a1").click(function(){
$("#div2").load('fragment.html');
return false;
});[コード]

2. JSON
JSON ファイルは test.json で、その内容は次のとおりです:
[code]
[{"name":"jim","age":" 20 "},{"名前":"ユリ","年齢":"18","趣味":["水泳","映画"]}]

メイン ページのコードを解析します
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 author=$(this).children('author').text();
varprice=$(this).children('price' ).text();
s =id " " 名前 " " 著者 " " 価格 "
;
$('#div2');
});
}); 

对JQuery 解析異文档做了一デモ，Test.html の原コードは

复制代代码如下:

 
 
 
 
 

ブラウザが開いたときTest.html ファイルの効果は次のとおりです。





最初のハイパーリンクをクリックすると、新しく挿入された HTML フラグメントが [コンテンツの表示] 領域に表示されます




2 番目のハイパーリンクをクリックすると、JSON データが表示されます:

3 番目のハイパーリンクをクリックすると、XML データが表示されます: