jQuery Prev. Page Next Page
jQuery とは
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
jQueryは、FierfoxのJavaScriptエバンジェリスト(evangelist)を務めていたJohn Resig が2006年1月に発表した軽量なJavaScriptライブラリです。
jQueryは、少ないコードで、より多くのことを実行できる優れたライブラリです。
jQueryは、ブラウザに依存しないクロスブラウザな動作を与えてくれます。そのため、無数のブラウザ依存コードへの対処に悩まされる苦労から開放されます。
さらに、この軽量なjQuery本体の他に、jQueryの機能を更に拡張してくれる豊富な「plug ins」の存在も魅力です。「プラグイン」は、自作できる拡張メソッドであり、世界中の多くの開発者によって作成されています。
さらに、さらに「jQuery UI」には、公式な拡張ライブラリで、多彩なビジュアルエフェクトやドラッグドロップ処理からアコーディオン、タブ、スライダー、日付ピッカー、カラーピッカー、ダイアログといった完成度の高いウィジェットなどが含まれています。
日本語逆引きサンプル集
How jQuery works?
■基礎
先ずは、下記のようなテストHTMLを作成してみましょう。
jquery.js の設置場所によって、src="xxxxx"の箇所の記述は変わります。下記は、あなたのHTMLファイルと同じディレクトリーに置いた場合です。
jQuery.jsは下記のURLからダウンロードしましょう。
Downloading jQuery page
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
jquery.js の設置場所によって、src="xxxxx"の箇所の記述は変わります。下記は、あなたのHTMLファイルと同じディレクトリーに置いた場合です。
<script type="text/javascript" src="jquery.js"></script>
jQuery.jsは下記のURLからダウンロードしましょう。
Downloading jQuery page
■ 出だしのコード Document Ready
多くのJavaScript プログラマーは下記のようなスクリプトから始めます。
でも、JavaScript codeは、全てのイメージがダウンロードされるまで開始しないので、最初のトライヤルでは、まだ、ダウンロードが完了していないので、実行されません。 jQueryのReady Eventとして知られる簡単なstatementは、実行しても問題ない状態（ready状態）まで待つことにより、この問題を回避してくれます。
下記の例はReady Eventの中にクリックハンドラーでのリンクに対して、警報を表示するように設定しています。
上記のコードを書き込んで、最新状態に更新して、リンクを呼び出した時に警報が表示されること確認してください。
ここでは、eventハンドラーDefaultのevent.preventDefault()を警報表示後、呼び出してみます。
window.onload = function(){ alert("welcome"); }
でも、JavaScript codeは、全てのイメージがダウンロードされるまで開始しないので、最初のトライヤルでは、まだ、ダウンロードが完了していないので、実行されません。 jQueryのReady Eventとして知られる簡単なstatementは、実行しても問題ない状態（ready状態）まで待つことにより、この問題を回避してくれます。
$(document).ready(function(){
// Your code here
});
下記の例はReady Eventの中にクリックハンドラーでのリンクに対して、警報を表示するように設定しています。
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
上記のコードを書き込んで、最新状態に更新して、リンクを呼び出した時に警報が表示されること確認してください。
ここでは、eventハンドラーDefaultのevent.preventDefault()を警報表示後、呼び出してみます。
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
■上記例の完成版
下記は、上記例の完成品です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
</div>
サンプル １
■Adding and Removing an HTML Class
重要：その他の例も$(document).ready()の中で実行してください。
他の常用タスクにaddingとremoving クラス があります。
<head>と</head>の間に以下のスクリプトを記述してください。
次に、addClass で"test"クラスを呼び出し、実行します。
全てのa 要素が太文字になります。
removeClassを使って、"test"クラスを解除します。
ボタンのクリックイベントに上記スクリプトを記述しました。
サンプル ２
他の常用タスクにaddingとremoving クラス があります。
<head>と</head>の間に以下のスクリプトを記述してください。
<style type="text/css">
a.test { font-weight: bold; }
</style>
次に、addClass で"test"クラスを呼び出し、実行します。
$("a").addClass("test");
全てのa 要素が太文字になります。
removeClassを使って、"test"クラスを解除します。
$("a").removeClass("test");
(HTML allows multiple classes to be added to an element.)
ボタンのクリックイベントに上記スクリプトを記述しました。
サンプル ２
■Special Effects
いくつかの簡単なエフェクト効果があります。サンプル１プログラムに $(this).hide("slow");を加えてクリックしてみてください。
サンプル ３
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
リンクをクリックすると表示が消えます。
サンプル ３
■Callback and Functions
コールバックについて、「正」のような書き方をしないといけない。よく間違えるので注意がひつようです。
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes. Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes. Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.
Callback without arguments
For a callback with no arguments you pass it like this:
$.get('myhtmlpage.html', myCallBack);
Note that the second parameter here is simply the function name (but not as a string and without parentheses). Functions in Javascript are 'First class citizens' and so can be passed around like variable references and executed at a later time.
Callback with arguments
"What do you do if you have arguments that you want to pass?", you might ask yourself.
In the below usage, an anonymous function is created (just a block of statements) and is registered as the callback function. Note the use of 'function(){'. The anonymous function does exactly one thing: calls myCallBack, with the values of param1 and param2 in the outer scope.
誤
The Wrong Way (will not work!)
$.get('myhtmlpage.html', myCallBack(param1, param2));
This will not work because it calls
myCallBack(param1, param2)
and then passes the return value as the second parameter to $.get()
正
The problem with the above example is that myCallBack(param1, param2) is evaluated before being passed as a function. Javascript and by extension jQuery expects a function pointer in cases like these. I.E. setTimeout function.In the below usage, an anonymous function is created (just a block of statements) and is registered as the callback function. Note the use of 'function(){'. The anonymous function does exactly one thing: calls myCallBack, with the values of param1 and param2 in the outer scope.
$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});
param1 and param2 are evaluated as a callback when the '$.get' is done getting the page.
サーバー亭
高級補正下着
囲碁ソフト開発
===============
