JQuery は XML ファイル データを読み取り、実装 code_jquery を表示します。

準備作業

始める前に、次の準備作業を行う必要があります。

1. DEMO.html という名前の空の HTML ファイルを作成します (Editplus を使用して作成することをお勧めします)。

2 .JQuery フレームワークの基本的な構文を理解します (詳しくなくても問題ありません。後で詳しく説明します)。

3.データを保存するための data.xml という名前の XML ファイルです。XML の構造については以下で説明します。

4. ファイルをダウンロードして表示することもできます。 XML 読み込みの待機時間中に空の HTML ドキュメントに表示するために使用されます

正式スタート

ステップ 1: まず、この data.xml の簡単な構造を見てみましょう。ここで説明するデータは「Saturn があなたにおすすめするいくつかの本」です。つまり、これは本の情報であり、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 description = $book.find('description').text() ;
var imageurl = $book.attr('imageurl');

var html = '

;
html = '

';タイトル">' タイトル '';
html = '

' 説明 '

' ;
html = '

';

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

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



ステップ 2: ここでは JavaScript コードの原理と動作プロセスについてのみ説明しますが、構文についてはあまり説明しません。構文について質問がある場合は、メッセージを残すかチェックしてください。 JQuery関連のドキュメントを公開します。

1 行目: HTML ドキュメントが準備される (つまり、html と JavaScript の両方がダウンロードされる) と、JQuery の $(document).ready メソッドと内部のプロセスが自動的にトリガーされます。明らかに、ここでは $.get メソッドが最初に実行されます。
行 3: $.get の最初のパラメーターは XML ファイルの相対パスです (パスは正しく入力する必要があることに注意してください。ここでは XML ファイルと Web ページ ファイルを同じフォルダーに置きます)。 2 番目のパラメーターは Callback 関数、つまりコールバック関数です。つまり、この XML ファイルの内容は get メソッドを通じて要求され、内部のデータはこのコールバック関数を通じて操作されます。コールバックのパラメータ d は、XML コールバックから返されるすべてのデータを表します。このパラメータ d を使用して、次の内容に進むことができます。
行 4: JavaScript を使用してドキュメントの BODY にタグ

を追加します。これはページ全体のタイトルです。
行 5: タグ

も動的に追加します。 ;dl> BODY 内で、包含ループの下でコンテンツ コンテナとして使用されます。 (行 20 が使用されます)
行 7: コールバック関数のパラメーター d が XML からのすべてのデータ コールバックを表すとすでに述べたので、この行は重要です。次に、これらのデータとフォーマットを処理 (フィルター) する必要があります。 ; 注意してください: ここでは、book タグ (タグ) が検索され、XML 内のデータエントリが完全に循環されるまで、それぞれの後の関数が実行されます (PHP の foreach 関数の関数に似ています)。
行 9: $(this) は実際にオブジェクトを作成します。目的は、操作を容易にするために d の現在の書籍情報オブジェクトをインスタンス化することです。
行 10--行 12: 現在のオブジェクトを取得します。 $book それぞれ、ブック名、説明、サムネイル (属性値とノード値を取得するための構文が異なることに注意してください)
14 行目～18 行目: 出力用のブック情報をフォーマットします。 ：HTML出力モードで文書に出力する情報を整形します。
行 22: 現在の情報が XML から読み取られていることをユーザーに伝えるために、画像は 2000 ミリ秒 (2 秒) 後に消えます。

ステップ 3: この時点で作業は完了です。 JQuery の開発や遭遇した問題について、ぜひメッセージを残してください。お気軽にアドバイスをください。また、ダウンロードしたフォルダはWEB環境(IISまたは仮想ホスト)で実行してください。直接クリックして実行しないでください。


コードパッケージのダウンロード