簡単なjquery教程Easy Ajax with jQuery中国語版全集第1/3ページ
Ajaxはウェブアプリケーションを変えています。これまでにないデスクトップアプリケーションに衝撃を与えました。しかし、これらの宣伝の背景には、ajaxはただのHTML、Javascript及びXMLに過ぎないということを認識しなければなりません。この教程では、ajaxを簡単にアプリケーションに追加する方法を示します。そして、流行のjavascriptライブラリJqueyをどのように使うかを教えます。 何がajaxですか？以前はajaxを聞いたことがあるかもしれません。あるいは少なくともajaxのアプリケーションを使ったことがあります。Gmailなどです。簡単に言えば、a javascriptを使ってデータを処理します。ページ全体を一気にアップロードするのではなく、atePointに教程aがあります。 good introduction ト Ajax.また、ajaxという言葉はJesseに由来します。 James Garrettのこの有名な文章です。残念なことに、ajaxに関する深い実践教程は少ないと言えます。そしてajaxで使われているXMLtpRequestです。 クラスは初めてウェブページの开発を学んだ人にとってはとても难しいです。でも、幸いにも多くのjavascriptライブラリが相次いで出てきて、ajaxを実现するために简単な方法を提供しました。私たちが今日使うJqueryはその中の一つです。 JQuery Jqueryとは、成熟したJavascriptライブラリであり、他の多くのライブラリにはない特性を提供しています。もちろん、19 Kの大きさが認められます。moo.fxのように3 KBの軽いだけではなく、多くのjavascriptライブラリの性能と他の比較データをここで見ることができます。 先にこの教程を勉強したいですが、基本的なjavascriptが必要です。ただ、c風の言語がわかれば、javascriptに対してすぐ上手になります。実は大括弧にすぎません。関数宣言と有無可の行末番号が必要です。javascriptを勉強したいなら、この教程を見てもいいです。 また、webアプリケーションを議論している以上、基本的なhtmlはもちろん必要です。 Jquery 101は簡単にjQueryを見てみましょう。jQueryを使うには、まずこのライブラリをダウンロードしなければなりません。ダウンロードアドレスはここです。jQueryの文法はとても簡単です。見つけてから作ります。ドキュメントから元素を選ぶには$()を使います。この記号はこれと同じです。 Dcument.getElementById()は、IDをサポートする以外に、css選択子およびいくつかのXPTh選択子をサポートします。 また、要素の配列を返します。いいです。例を挙げると、より良い説明ができるかもしれません。私たちは関数を使って、私たちの選択符を操作したいです。たとえば、「ハロー」 ワールド 各クラスのfooのdivに追加して、色を赤色に設定します。コードを書くことができます。 World！「.」css（「カラー」「レッド」）簡単ですね一般的には、この2つの行のコードが必要です。一般的には、このボタンに長いワンストップを加える必要があります。 イベント 時々、私たちはワンストップイベントでJavascript関数を呼び出します。 しかし、jQueryの中で、私達はいかなるhtmlコードを修正する必要はないと設定しています。私達は簡単に行動（事件処理）と構造（htmlコード）の分離を実現できます。クライアントコード（jQuery）はついにjQueryを使って私達のバックグラウンドとフロントを結合しました。前に私達はjQueryを使ってDOMから元素を選択することができます。このイベントコードではdivを選択してコンテンツを読み込むことができます。以下はclickイベント応答の書き方です。 expression").click(function() // コード goes here }); あなたはすでに知っているかもしれませんが、CSSで元素を選択する時、私達は元素のid属性を使うために、〹を使います。 jQueryでは同じ文法を使ってもいいです。そのボタンを選ぶなら、私達は使ってもいいです。 このような文法は、匿名のMarkとしてイベント処理関数を定義することができます。 Wuben JavaScript Terminology page 匿名関数に関する詳細な説明を提供しています。参考にしてください。jQueryの中の比較的高級なajax関数を使います。ロード() 私たちのコードがscript.phpとして保存されていると仮定します。これを私たちのクライアントと統合します。 $("#quot;.load("script.php") }); 3行のコードしかありません今は完全なajaxランダムステートメント生成器を作りました。いいですね問題はjavascriptコードは一つのブラウザでロードし終わったら実行する関数ではありません。このようにすれば、このコードはまだロードされていないかもしれない要素と関連させようとします。普通はwindow.loadを使ってこの問題を処理しますが、この方法の限界は、window.loadはすべてのもの（写真やその他）にロードされた後に一回だけロードされます。これらの画像を待つロードには興味がないかもしれません。私たちはDOMの中の元素を獲得したいだけです。ラッキーなことに、jQueryは一つあります。 $(document..ready()関数は、その名の通りDOMがロードされた後に実行されます。完全なコードの下には完全なコードがあります。 $(document).ready()と簡単なhtmlとcss:
1 2 3 次のページ 全文を読む
$("div.foo").append("Hello World!");
$("div.foo").css("color","red");
<?php
header("Cache-Control: no-cache");
// Ideally, you'd put these in a text file or a database.
// Put an entry on each line of 'a.txt' and use $prefixes = file("a.txt");
// You can do the same with a separate file for $suffixes.
$prefixes = array('Mashup','2.0','Tagging','Folksonomy');
$suffixes = array('Web','Push','Media','GUI');
// This selects a random element of each array on the fly
echo $prefixes[rand(0,count($prefixes)-1)] . " is the new "
. $suffixes[rand(0,count($prefixes)-1)];
// Example output: Tagging is the new Media
?>
<html>
<head>
<title>Ajax with jQuery Example</title>
<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$("#generate").click(function(){
$("#quote p").load("script.php");
});
});
</script>
<style type="text/css">
#wrapper {
width: 240px;
height: 80px;
margin: auto;
padding: 10px;
margin-top: 10px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="quote"><p> </p></div>
<input type="submit" id="generate" value="Generate!">
</div>
</body>
</html>
1 2 3 次のページ 全文を読む