・jQueryとは
-JavaScriptを便利に扱うためのライブラリ
・jQueryの型
$(function(){
})
・セレクタとは
-処理対象となるDOM要素を指定するための記法
・メソッドとは
-処理
・セレクタとメソッドの書き方
-$('セレクタ').メソッド();
#メソッドの種類
・hide:要素を隠す
・fadeOut:要素を隠す際に徐々に消えていくアニメーションを追加
⇒fadeIn
・slideUp:要素を隠す際に下から消えていくスライドアニメーションを追加
⇒slideDown
・attr:HTMLの属性の値を取得や変更ができる
・data:data属性を操作できる
・text:テキストを変更する
・html:HTMLを取得する
・val:value属性を取得する
・remove/empty:要素を削除する
・before/after:要素内の前/後にHTMLを挿入
・insertBefore/insertAfter:他の要素の前/後に要素を移動する
・prepend/append:要素内の先頭/最後にHTMLを挿入
・prependTo/appendTo:他の要素内に先頭/最後に要素を移動する
#id
jQueryではタグに名前を付ける方法としてidを使用します。
HTMLでのclassと同じような使い方ですが、idは一度しか使えません。
使用例
<ul id="list">
classとidをセレクタにする場合「#」と「.」を使用します。
使用例
$(#'id名').メソッド名
$(.'class名').メソッド名
#イベント
イベントを用いると、処理を行うタイミングを指定できる。
構文は
$('セレクタ').イベント名(function(){ })
・clickイベント
clickイベントを用いると、セレクタがクリックされたタイミングで処理を実行する。
・mouseover
マウスが被ったときに処理を実行
・mouseout
マウスが離れた時に処理を実行
・mousemove
マウスが移動したときに処理を実行
#CSSメソッド
CSSを変更できるメソッド
構文
$('セレクタ').css('プロパティ名','値');
#フィルタ
取得した要素を要素の順序や属性の値などによって絞り込むもの。
**$('element:filter')**のように記述する
・種類
1.eq()
要素から、~番目指定で単一エレメントを取得できる。
eq(2)なら0から数えて3番目の要素を取得
2.gt(),lt();
要素から~番目より後を全て取得,ltはその逆で前を全て取得
3.even,odd
要素から(0から数えて)偶数行のみ取得できる。oddは奇数行。
4.contains()
引数で渡された文字列を含む要素を取得できる
5.first,last
要素の最初だけ取得。lastは最後だけ取得
#メソッドを使ったDOM要素の指定方法
**$('要素').next(セレクタ)**のような書き方が基本
・parent(),children()
指定した要素が持つ親要素(perent)、子要素(chidren)を取得する
・next(),prev()
指定した要素の次(next)と前(prev)の要素を取得する
・siblings()
指定した要素と同階層の要素を全て取得できる