English Example Sentences
JQueryとは、Javascriptのオープンソースのライブラリで、画像を自動的に表示させたり、スライドショーのように画像を切り替えたりすることが実現できます。
HTMLファイルの中でJQueryを読込むと、Javascriptと同様に処理を記述できます。
JQueryは、バージョンアップされていくので、読込む時はバージョンに注意する。
ready()メソッドは、ドキュメント(HTMLファイル)がJQueryが実行できる準備ができたら実行される。 以下のように記述しておけば、HTMLファイルが最後まで(</body>まで)読込まれてからready()メソッドが実行される。 (※ ただし、画像の読込みの完了は待たない)
readyメソッドの引数に直接「無名関数」を記述するのが一般的で、jQuery()関数の省略形が「$()」である。
jQuery(document).ready(function(){
… 省略 …
});
// または
$(document).ready(function(){
… 省略 …
});
// または
$(function(){
… 省略 …
});
window.onloadメソッドはonloadイベント発生時に実行されるが、画像や他の全てのデータの読込みが完了した時になる。
$("p").css("color", "red");
要素をそのまま指定する方法で、HTML上の全てのp要素が対象となる。
$("#container").css("color", "red");
一意なid属性で指定するセレクタで、#(ハッシュ, 井桁)の後にid名で指定する。
$(".indent").css("color", "red");
クラスを指定するセレクタで、.(ドット)の後にclass名で指定する。
$("div p").css("color", "red");
特定の要素の子孫の要素を指定できる。
$("ul *").css("color", "red");
ul内のすべての子孫要素が指定できる。
$("ul, ol").css("color", "red");
複数の要素を一度にまとめて指定できる。
$("ul > p").css("color", "red");
子どもの要素だけを指定できる。
$("div").css("color").width(250);
メソッドはピリオドでつないで記述することが推奨されている。
<style>
.indent{ text-indent:10px; }
</style>
$(function(){
$("p").addClass("indent");
});
指定した要素にクラス属性をつけるメソッドで、パラメータには、クラス名を指定する。
<style>
.indent{ text-indent:10px; }
</style>
$(function(){
$("p").removeClass("indent");
});
クラスを削除するメソッドで、パラメータには削除するクラス名を指定する。
$("p").css("background-color", "red");
$("p").css({ backgroundColor: "red" });
$("p").css({ "background-color": "red" });
css()メソッドには3種類の記述方法がある。
$("p").css({ "background-color": "blue", "color": "#fff" });
css()メソッドでは複数のプロパティを指定することができる。
$("#footer").text("This is a footer.");
$(".footer").text("This is a footer.");
要素の中のテキストを入れ替えるメソッドで、text()とパラメータを空にすると、テキストを取得することができる。
※ $("#footer")と指定するのが決まりなので、基本的にクラス名やid名は要素に関わらずuniqueでなければならない。
$("#footer").html('<a href="#">This is a footer.</a>');
$(".footer").html('<a href="#">This is a footer.</a>');
HTMLのマークアップごと設定できるメソッドで、html()とパラメータを空にすると、ソースに記述されたHTMLを取得することができる。
※ quotationが入れ子になっている場合は、「"」と「'」を上手く使い分ける。
//JavaScript側の数値チェック処理
$(".num-input").on('input', function(){
//半角変換
var halfVal = $(this).val().replace(/[！-～]/g,
function (tmpStr) {
//文字コードをシフト
return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0);
}
);
//数字以外の不要な文字を削除
$(this).val(halfVal.replace(/[^0-9]/g, ''));
});