Jqueryとは

ユーザーへのリアクション処理とDOM操作を分かりやすく単純に記述できるJavascriptのライブラリ

Jqueryの記述方法

実行処理

$(function(){
//この中に実行したい処理
});
全ての処理をこの中に書くことで、html要素が全て読み込まれてからJavascriptが実行される
※この記述は省略されたものであり、省略せずに書くと下記となる
$('document').ready(function () {
//この中に実行したい処理
});

HTML要素の指定

&('セレクタ名')と記述することで、クラス、IDなどのセレクタを指定できる

CSSの操作

&('セレクタ名').css({
"color": "#000",
"font-size": "16px"
});
cssメソッドを使用することで対象のCSSの追加や変更ができる
※cssの変更記述のため"を使用する

id,classの追加・変更・削除

idの追加
$('.hello').attr('id', 'hello2');
「クラス名：hello」に「ID名：hello2」を追加する
//※既にidが存在する場合は、既存のid名がhello2に変更される
idの変更
$('#hello').attr('id', 'hello2');
「ID名：hello」を「ID名：hello2」に変更する
idの削除
$('#hello').removeAttr('id');
「ID名：hello」を削除する
classの追加・変更
$('#hello').attr('class', 'hello2');
「ID名：hello」に「クラス名：hello2」を追加する
既にクラスが設定されている場合はhello2に変更される

$('#hello').attr('class', 'hello2 hello3');
「ID名：hello」に「クラス名：hello2、hello3」を追加する
既にクラスが設定されている場合はhello2とhello3に変更される
classの追加
$('#hello').addClass('hello2');
「ID名：hello」に「クラス名：hello2」を追加する

$('#hello').addClass('hello2 hello3');
「ID名：hello」に「クラス名：hello2、hello3」を追加する
classの削除
$('#hello').removeClass('hello2');
「ID名：hello」から「クラス名：hello2」を削除する

$('#hello').removeClass('hello2 hello3');
「ID名：hello」から「クラス名：hello2、hello3」を削除する

要素の値を取得・変更する

テキストの取得
$('.hello').text();
「クラス名：hello」のテキストを取得する
テキストの変更
$('.hello').text('テキストテキストテキスト');
// 「クラス名：hello」のテキストを変更する
valueの取得
$('input[name="hello"]').val();
「input名：hello」のvalueを取得する
valueの変更
$('input[name="hello"]').val('テキストテキストテキスト'); 「input名：hello」のvalueを変更する
属性値の取得
$('.hello').attr('src');
imgタグに設定された「クラス名：hello」のsrcを取得する
属性値の変更
$('.hello').attr('src', 'img/hello.jpg');
// imgタグに設定された「クラス名：hello」のsrcを変更する