jQuery

jQueryについて

jQueryとは

JavaScriptとHTMLの相互作業を強化する軽量なJavaScriptライブラリ。
簡単に説明すると、JavaScriptを簡単に扱うためのライブラリです。

特徴

  • クロスブラウザ対策
  • 軽量かつ高速
  • MITライセンス
  • CSSライクに書ける
  • ドキュメントが充実
  • JavaScriptフレームワークの中で圧倒的なシェア
  • 豊富なプラグイン

簡単な例

warning というクラスをつけたpタグのテキストカラーを赤くする場合

JavaScript
<script type="text/javascript">
var targets = document.getElementsByTagName("p");
for(i=0; targets.length; i++){
  if(targets[i].className === "warning"){
    target.style.color = "red";
  }
}
</script>

このようにJavaScriptだと、8行書く必要があった処理を、jQueryだと1行で書くことができる。

jQuery
$("p.warning").css( "color", "red" );

jQueryを使うための準備

Rails3.1以降で使う場合は、デフォルトでGemfileに記述されインストールされるので作業は不要です。

jQuery関連の設定項目

Gemfile
gem "jquery-rails"
設定
/app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
/app/views/layouts/application.html

<%= javascript_include_tag "application" %>

jQueryの書き方

説明

jQueryの基本的な書き方は、セレクターを指定して、メソッドをドット(.)で繋げて書きます。
メソッドの後ろに(引数)を指定することもできます。

使い方

$("セレクター").メソッド(引数);

セレクタを使って、HTMLのタグなどを特定して、対象のタグに対して処理を行います。

jQueryのセレクター

セレクターとは

セレクターとは、操作が発生した要素や変更したい要素を指定すること
jQueryでは、id属性やclass属性などCSSのセレクターとほぼ同じものが利用できます。

使い方

$("セレクター")

基本

要素セレクター
説明

特定のHTML要素

使い方
$("要素名")
IDセレクター
説明

特定のid属性を持つ要素

使い方
$("#ID名")
クラスセレクター
説明

特定のclass属性を持つ要素

使い方
$(".クラス名")
ユニバーサルセレクター
説明

すべての要素

使い方
$("*")
属性セレクター
説明

特定の属性を持つ要素

使い方
$("[属性名]")
グループセレクター
説明

複数のセレクターをまとめて指定する

使い方
$("要素1, 要素2")

階層

子孫セレクター
説明

特定の要素の内側にある要素

使い方
$("要素1 要素2")
子セレクター
説明

特定の要素の直下の子要素

使い方
$("親要素 > 子要素")
隣接セレクター
説明

特定の要素の次の要素

使い方
$("要素1 + 要素2")
間接セレクター
説明

特定の要素の後に出現する要素

使い方
$("要素1~要素2")
否定擬似セレクター
説明

特定の要素内で指定した要素以外の要素

使い方
$("要素1:not(要素2)")
empty擬似セレクター
説明

子要素やテキストを含まない要素

使い方
$("(要素:empty")

フィルタ

firstフィルター
説明

指定した要素の最初の要素

使い方
$("要素:first")
lastフィルター
説明

指定した要素の最後の要素

使い方
$("要素:last")
evenフィルター
説明

指定した要素の偶数番目の要素

使い方
$("要素:even")
oddフィルター
説明

指定した要素の奇数番目の要素

使い方
$("要素:odd")
oddフィルター
説明

指定した要素の奇数番目の要素

使い方
$("要素:odd")
eqフィルター
説明

指定した番号の要素

使い方
$("要素:eq(番号)")
gtフィルター
説明

指定した番号より後の要素

使い方
$("要素:gt(番号)")
ltフィルター
説明

指定した番号より前の要素

使い方
$("要素:lt")
headerフィルター
説明

h1からh6までのheader要素

使い方
$("要素:header")
containsフィルター
説明

特定の文字列が含まれている要素

使い方
$("要素:contains(文字列)")
hasフィルター
説明

特定の要素が含まれている要素

使い方
$("要素1:has(要素2)")
parentフィルター
説明

子要素やテキストを含む要素

使い方
$("要素:parent")

jQueryのメソッド

メソッドとは

セレクターで指定した要素に対して、何らかの処理を加える部分のこと

使い方

$("セレクター").メソッド(引数);

引数はメソッドによっては省略可能

メソッドチェーン

説明

メソッドチェーンとは、ドット(.)で繋げて、複数を指定すること

使い方
$("セレクター").メソッド1.メソッド2;

CSSや属性に関するメソッド

テキストの取得(text)
説明

テキストを取得する

使い方
$("セレクター").text()
テキストの変更(text)
説明

テキストを変更する

使い方
$("セレクター").text("変更後のテキスト")
HTMLの取得(html)
説明

HTMLを取得する

使い方
$("セレクター").html()
HTMLの変更(html)
説明

HTMLを変更する

使い方
$("セレクター").html("変更後のHTML")
指定したCSSプロパティの値を設定(css)
説明

css(プロパティ名,値)

使い方
$("セレクター").css(プロパティ名,値)
指定したCSSプロパティの値を取得(css)
説明

指定したCSSプロパティの値を取得する

使い方
$("セレクター").css(プロパティ名)

エフェクト系のメソッド

エフェクト系のメソッドとは、コンテンツをフェードさせて表示させたり、スライドさせたりといった、動きをつける処理のこと

表示の切り替え
説明

表示されてるものを隠したり、非表示のもを表示する。

使い方
$("セレクター").toggle()
フェードイン
説明

フェードインさせて表示する。

使い方
$("セレクター").fadeIn()
フェードアウト
説明

フォードアウトさせて非表示にする。

使い方
$("セレクター").fadeOut()
要素を表示
説明

要素を表示する。

使い方
$("セレクター").show()
要素を隠す
説明

要素を隠す。

使い方
$("セレクター").hide()

トラバース系のメソッド

トラバース系のメソッドとは、HTMLのDOMツリー内から、指定条件に合うものを選択したり、検索するのに使う処理のこと

検索
説明

条件に合うものと検索する。

使い方
$("セレクター").find()
初めの要素
説明

初めの要素

使い方
$("セレクター").first()
最後の要素
説明

最後の要素

使い方
$("セレクター").last()
次の要素
説明

次の要素

使い方
$("セレクター").next()

マニュピレーション系のメソッド

マニュピレーション系のメソッドとは、HTML に要素を追加したり、削除したりする処理のこと

先頭にHTMLの挿入
説明

先頭にHTMLを挿入する

使い方
$("セレクター").prepend("挿入するHTML")
最後にHTMLの挿入
説明

最後にHTMLを挿入する

使い方
$("セレクター").append("挿入するHTML")
要素の前にHTMLの挿入
説明

属性の前にHTMLを挿入する

使い方
$("セレクター").before("挿入するHTML")
要素の後にHTMLの挿入
説明

要素の後にHTMLを挿入する

使い方
$("セレクター").after("挿入するHTML")
先頭に要素を移動
説明

他の要素内の先頭に要素を移動する

使い方
$("セレクター").prependTo(移動先のセレクター)
最後に要素を移動
説明

他の要素内の最後に要素を移動する

使い方
$("セレクター").appendTo(移動先のセレクター)
前に要素を移動
説明

他の要素の前に要素を移動する

使い方
$("セレクター").insertBefore(移動先のセレクター)
後に要素を移動
説明

他の要素の後に要素を移動する

使い方
$("セレクター").insertAfter(移動先のセレクター)
他の要素で包む
説明

要素を他の要素で包む

使い方
$("セレクター").wrap(<要素名></要素名>)
まとめて他の要素で包む
説明

要素をまとめて他の要素で包む

使い方
$("セレクター").wrarpAll(<要素名></要素名>)
子要素のテキストを他の要素で包む
説明

子要素のテキストを他の要素で包む

使い方
$("セレクター").wrapInner(<要素名></要素名>)
他の要素に置き換える
説明

要素を他の要素に置き換える

使い方
$("セレクター").replaceWith(置換後の要素)
要素を削除
説明

要素を削除する

使い方
$("セレクター").remove()
指定した属性の値を変更
説明

指定した属性の値を変更する

使い方
$("セレクター").attr(属性名, 属性値)
指定した属性の値を取得
説明

指定した属性の値を取得する

使い方
$("セレクター").attr(属性名)
指定した属性を削除
説明

指定した属性を削除する

使い方
$("セレクター").removeAttr(属性名)
class属性を追加
説明

class属性を追加する

使い方
$("セレクター").addClass(class属性値)
class属性を削除
説明

class属性を削除する

使い方
$("セレクター").removeClass(class属性値)

その他

変数の利用

変数を利用することもできる

var #div = $("div");
$div.addClass("hoge");

$について

$は関数名 JQuertは全て$を起点に展開 $はjQueryのエイリアス
$("div").css("color", "red");
jQuery("div").css("color", "red");

イベントが発生した要素($(this))

イベントが発生した要素を取得する。

$(this)

繰り返し処理

説明

要素に対しての繰り返し処理

使い方
$("セレクター").each(function(){
});

jQueryの記述する場所

概要

jQueryは、headに書かれることが多く、その時点ではbodyを読み込んでいないため、処理することができない。
そのためHTMLが読み込まれた後にスクリプトが実行できる状態になったら実行するという記述が必要になります。

使い方

$(function(){
  jQueryの処理を記述
}
$(document).ready(function(){
  jQueryの処理を記述
}

「$()」は、「$(document).ready()」の省略形

jQueryのイベント

クリックイベント

説明

特定の要素がクリックされたとき

使い方
$("セレクター").click(function(){
});

ダブルクリックイベント

説明

特定の要素がダブルクリックされたとき

使い方
$("セレクター").dblclick(function(){
});

マウスダウンイベント

説明

特定の要素の上でマウスのボタンを押されたとき

使い方
$("セレクター").mousedown(function(){
});

マウスアップイベント

説明

特定の要素の上でマウスのボタンを離したとき

使い方
$("セレクター").mouseup(function(){
});

クリックされるたびに異なるイベント

説明

クリックするたびに異なる処理を実行するとき

使い方
$("セレクター").toggle(function(){
});

マウスオーバー

説明

特定の要素の上にマウスが重なったとき

使い方
$("セレクター").mouseover(function(){
});

マウスアウト

説明

特定の要素の上からマウスが離れたとき

使い方
$("セレクター").mousout(function(){
});

マウスムーブ

説明

特定の要素の上でカーソルが動いたとき

使い方
$("セレクター").mousemove(function(){
});

イベントを取り消す

説明

設定されているイベントを取り消す。

使い方
$("セレクター").unbind("条件");

1度だけ実行

説明

指定した要素に対して、イベントを1度だけ実行する

使い方
$("セレクター").one("条件", function(){
});

将来追加されるイベント

説明

新たに追加された要素などの将来追加されるイベントが実行されたとき

使い方
$("セレクター").live("条件", function(){
});

on

説明

使い方
$("セレクター").on(イベント名, 実行する処理)

off

説明

使い方
$("セレクター").off(イベント名, 外したい要素)

要素を更新(load)

説明

要素を更新する。

使い方
$("セレクター").load(ファイル名)

jQueryのフォーム

フォームの値を取得・変更

フォームの入力値を変更(val)
説明

フォームの入力値(val ue属性の値)を変更する

使い方
$("セレクター").val("入力値")
フォームの入力値を取得(val)
説明

フォームの入力値(val ue属性の値)を取得する

使い方
$("セレクター").val()

フォームのイベント

フォーカスを取得
説明

フォームが選択された状態のとき

使い方
$("セレクター").focue(function(){
});
フォーカスが外れたことを感知
説明

フォームが外れたことを感知する。

使い方
$("セレクター").blur(function(){
});
フォームの変更を感知
説明

フォームが変更されたことを感知する。

使い方
$("セレクター").change(function(){
});
フォームの変更を感知
説明

フォームが変更されたことを感知する。

使い方
$("セレクター").change(function(){
});
フォームの送信を感知
説明

フォームの送信ボタンが押されたとき

使い方
$("セレクター").submit(function(){
});

フォームのセレクター

全てのフォームを一括で指定
説明

全てのフォームを一括で指定する

使い方
$(":input")
テキストフォームを指定
説明

テキストフォームを指定する。

使い方
$(":text")
パスワードフォームを指定
説明

パスワードフォームを指定する。

使い方
$(":password")
ラジオボタンを指定
説明

ラジオボタンを指定する。

使い方
$(":radio")
チェックボックスを指定
説明

チェックボックスを指定する。

使い方
$(":checkbox")
送信ボタンを指定
説明

送信ボタンを指定する。

使い方
$(":submit")
イメージボタンを指定
説明

イメージボタンを指定する。

使い方
$(":image")
リセットボタンを指定
説明

リセットボタンを指定する。

使い方
$(":reset")
ボタンを指定
説明

ボタンを指定する。

使い方
$(":button")
ファイル選択フォームを指定
説明

ファイル選択フォームを指定する。

使い方
$(":file")
チェックされているフォームを指定
説明

ラジオボタンやチェックボックスのチェックされているフォームを指定する。

使い方
$(":checked")
選択されているフォームを指定
説明

セレクトボックスで選択されているフォームを指定する。

使い方
$(":selecred")