全て展開

すべて折りたたむ

jQuery の構文は、開発者が簡単に DOM 要素を選択し、その要素に何らかのアクションを実行できるように設計されています。基本的な構文は次のとおりです。

$(selector).action()

$ は jQuery を参照し、(selector) は１つまたは複数の DOM 要素を問い合わせ、.action()は要素にアクションを実行します。

Query 構文の例：

• $(this).hide()は現在の要素を非表示にします。
• $("p").hide()はすべてのパラグラフを非表示にします。
• $("p.wow").hide()は、クラス "wow" のすべてのパラグラフを非表示にします。
• $("#wow").hide()は、ID が "wow" の要素を非表示にします。

jQuery セレクタ

jQuery の使用を開始する前に、jQuery セレクタの概念を理解しておくことが重要です。jQuery セレクタでは CSS 構文を使用するため、効果を適用する要素を正確に選択できます。これらのセレクタを使用することで、特定の DOM 要素または要素のグループを、属性名、タグ名、ID で指定して選択できます。さらにコンテンツによって選択することも可能です。次のように複数のタイプのセレクタがあります。

jQuery要素セレクタ

jQuery 属性セレクタ

jQuery CSS Sセレクタ

$("div").css("background-color","red");

ドキュメントの ready 関数

ドキュメントが完全にロードされる前に jQuery コードが実行されないようにするため、すべてのjQuery 関数は$(document).ready 関数の中に配置する必要があります。たとえば、次のようになります。

ドキュメントの ready 関数を作成する方法

$(document).ready(function(){   
// ドキュメントの ready で何らかの処理を行います。
});

ドキュメントの短縮バージョンを使用する方法

$(function() {
// ドキュメントの ready で何らかの処理を行います
});
                        

$(document).ready 関数内のすべてのスクリプトは、DOM がロードされた直後、ページコンテンツがロードされる前にロードされます。

jQuery オプション

jQuery オプションは、単純に引数としてウィジェットに渡されるプロパティです。各 Wijmo ウィジェットにはオプションのデフォルト設定があります。そしてもちろん、デフォルトをオーバーライドしてウィジェットをカスタマイズすることができます。

たとえば、wijprogressbar ウィジェットに maxValue オプションがあり、デフォルト値が 100 とします。しかし、この値を 85 にしたいとします。maxValue オプションをデフォルから 85 に変更するのは簡単で、次のように wijprogressbar に引数を渡します。

wijprogressbar に maxValue 引数を渡す方法

$(‘#progressbar’).wijprogressbar({
    maxValue: 85
});     

maxValue オプションが 85 に設定されたため、wijprogressbar ウィジェットの値範囲は 0〜85 になります。minValue プロパティはデフォルトで 0 に設定されています。minValue オプションを 25 に変更したい場合は、maxValue 引数の後ろにコンマ（,）を足して、その後ろに minValue 引数を書きます。

もう1つの引数を渡す方法

$(‘#progressbar’).wijprogressbar({
    maxValue: 85,
    minValue: 25
});                     

このようにしていくつでもウィジェットにオプションを渡せます。コンマだけ忘れないでください。

関連トピック

参照

Copyright © GrapeCity inc. All rights reserved.