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の機能を更に拡張してくれる豊富な「plug ins」の存在も魅力です。「プラグイン」は、自作できる拡張メソッドであり、世界中の多くの開発者によって作成されています。
さらに、さらに「jQuery UI」には、公式な拡張ライブラリで、多彩なビジュアルエフェクトやドラッグドロップ処理からアコーディオン、タブ、スライダー、日付ピッカー、カラーピッカー、ダイアログといった完成度の高いウィジェットなどが含まれています。


How jQuery works?


<!doctype html>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

</script> </head> <body> <a href="">jQuery</a> </body> </html>

jquery.js の設置場所によって、src="xxxxx"の箇所の記述は変わります。下記は、あなたのHTMLファイルと同じディレクトリーに置いた場合です。
<script type="text/javascript" src="jquery.js"></script>

Downloading jQuery page

■ 出だしのコード Document Ready

多くのJavaScript プログラマーは下記のようなスクリプトから始めます。
 window.onload = function(){ alert("welcome"); }

でも、JavaScript codeは、全てのイメージがダウンロードされるまで開始しないので、最初のトライヤルでは、まだ、ダウンロードが完了していないので、実行されません。 jQueryのReady Eventとして知られる簡単なstatementは、実行しても問題ない状態(ready状態)まで待つことにより、この問題を回避してくれます。
   // Your code here

下記の例はReady Eventの中にクリックハンドラーでのリンクに対して、警報を表示するように設定しています。
     alert("Thanks for visiting!");

     alert("As you can see, the link no longer took you to");


 <!DOCTYPE html>
 <html lang="en">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="" type="text/javascript"></script>
   <script type="text/javascript">
         alert("As you can see, the link no longer took you to");

   <a href="">jQuery</a>

サンプル 1

■Adding and Removing an HTML Class

他の常用タスクにaddingとremoving クラス があります。

 <style type="text/css">
    a.test { font-weight: bold; }

次に、addClass で"test"クラスを呼び出し、実行します。

全てのa 要素が太文字になります。
(HTML allows multiple classes to be added to an element.)
サンプル 2

■Special Effects

いくつかの簡単なエフェクト効果があります。サンプル1プログラムに $(this).hide("slow");を加えてクリックしてみてください。

サンプル 3

■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.

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.
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.