□技術メモ - jQueryについて
※管理人の個人的な技術メモです。このページの内容を実行した結果について
管理人はいかなる責任も負いかねますのでご自身の責任でお試しください。
-----------------------------------------------------------
○jQueryについて
・jQueryは、JavaScript用のライブラリの１つであり、Web アプリケーションフレームワークである。
特徴として、for()などの繰り返しを記述しないということがあるらしい。
・以下のような特徴があるらしい。
ブラウザ間の違いを吸収する。
便利なファンクションが使用可能になる。
優れたUIを持つライブラリを使用可能になる。
・JS用ライブラリはprototype.jsなどがあるが、
jQueryはライセンスの自由度や軽量であることなどから広く利用されている。
--------
〇環境構築
・オフィシャルサイト http://jquery.com から入手する。
・コア機能を有する jQuery と、リッチUIの機能を有する jQuery UI がある。
両方の機能を導入する場合のコードの例は以下の通り。
これを記述する場合はダウンロードの必要はない。
--------
〇HTMLおよびCSSについて確認
・基本形について確認しておく。
・同じフォルダに、test.html styleCmn.css を配置する。
・の範囲はcss指定により緑色に設定される。
--------
test.html
タイトル
こんにちは jQuery！
--------
styleCmn.css
st1{
color:green;
font-size:20px;
}
st2{
color:blue;
font-size:20px;
}
--------
〇jQueryの基本型
○タグ によるセレクタの指定
・基本型について確認しておく。
・使用には jQuery という名前空間の指定が必要。これは $ で代用できる。
以下の２つは同じ動作をする。
jQuery.trim(str);
$.trim(str);
・基本構文は以下の通り。
セレクタ.メソッド
・セレクタには、タグ指定、id指定、クラス指定などある。
--------
test.html
タイトル
こんにちは jQuery！
ここがゆっくり消えます。
--------
○タグによるセレクタの指定
・タグによるセレクタの構文は以下の通り。
$('タグ名').メソッド
--------
〇id によるセレクタの指定
・id によるセレクタの構文は以下の通り。
$('#id').メソッド
--------
〇クラスによるセレクタの指定
・クラス名によるセレクタの構文は以下の通り。
$('.クラス名').メソッド
--------
〇タグの確認
・ UnorderedList
・- ListItem
--------
test.html
タイトル
--------
〇不等号記号 で直下のアイテムを指定する
〇空白 で直下およびその下のアイテムを指定する
○カンマで複数の条件を指定する
○ + 記号で隣接するアイテムを指定する(隣接セレクタ)
・不等号記号 > で直下のアイテムを指定できる
$("#st > .item").css('color', 'blue');
・空白 で直下およびその下のアイテムを指定できる
$("#st .item").css('color', 'blue');
・カンマ で複数の条件を指定できる
$("#st, .item").css('color', 'blue');
・隣接するアイテムを指定する
$(".item1 + .item2").css('color', 'blue');
//item1の隣にitem2がある場合に選択
--------
○セレクタにおけるフィルタ
・セレクタではフィルタを使用して選択条件を設定できる。
例えば、#sub の直下のリストアイテムで、index = 1 のみを選択するなら以下の通り。
$("#sub > li:eq(1)").css('color', 'red');
・他にも以下のようなフィルタがある。
:eq() //〜と等しい
:gt() //〜より大きい
:lt() //〜より小さい
:even, :odd //偶数、奇数
:contains() //〜を含む(タグ開始...終了までの内容に含まれるか)
:first, :last //最初、最後
--------
○メソッドを使ったDOM要素の指定
・DOM要素とは、DOM(Document Object Model)における要素のこと。
・DOM要素にアクセスするためのメソッドがある。例えば親にアクセスする場合は以下の通り。
$('#sub').parent().css('color', 'red');
・以下のような、DOM要素の指定のためのメソッドがある
.children() //子要素を取得
.parent() //親要素を取得
.prev() //前の要素
.next() //次の要素
.siblings() //自分以外の兄弟要素(同じ階層の要素)
--------
○属性セレクタ
・例えば以下のような要素があるとする。
Google
Yahoo
infoseek
この場合に、タグ指定[属性="属性値"] とすれば、指定の属性値のみを選択できます。
以下は属性セレクタの例。
$('a[href="https://www.google.co.jp"]').css('background','yellow');
・以下は属性セレクタで指定できる演算子
= //〜と同じ
!= //〜と同じではない
*= //〜を含む
^= //〜で始まる
$= //〜で終わる
--------
○cssメソッド
・以下はメソッドチェインを使って文字色と背景色を変える例
$('p').css('color', 'blue').css('background', 'yellow');
・値の取得の場合は以下の通り。
console.log($('p').css('color')); //カラーを取得して表示する
○スタイルを設定する
・スタイルを設定する場合はまずヘッダ内において、
・スタイルの適用は以下の通り。
$('p').addClass('style01');
・スタイルの解除は以下の通り。
$('p').removeClass('style01');
--------
○attrメソッド
・セレクタ . attr('属性名') で、属性の値を取得できる。
・セレクタ . attr('属性名', 属性値) で、属性の値を設定できる。
console.log($('a').attr('href')); //aタグの、httr属性の値をコンソールに表示する。
--------
○dataメソッド
・タグにカスタム属性を設定する場合は、data-新たな属性名 と設定する。
・カスタム属性を参照する場合は、dataメソッドを使う。
引数には data- に連なる新たな属性名を指定する。
test
//subnameというカスタム属性を設定した。
console.log($('a').data('subname'));
//カスタム属性を参照して、subtest1-2-3 と表示される。
--------