TIPS |
jQueryコードの基本構文 |
$(セレクタ).メソッド(パラメータ);
例)
$('p').css('color','red');
$('p').css({color : 'red', fontSize: 15px});
$('div').css({width : function(){return $(this).width()*2} });
$('#content').text('hello');
$('p').addClass('row-class');
$('p').removeClass('row-class');
$('p').text('sample');
$('p').html('sample');
//メソッドチェインも可能
$('p').text('sample').html('sample');
$('p').text('sample')
.html('sample');
|
xxxxxx |
//for
for(var i = 0 ; i < 30 ; i++){}
//each 配列
var items = [1,2,3,5,8];
$.each(items, function(i,v){
//i : index, v : 1,2,3,5,8
});
//while
while(a < b){}
|
jQuery高速化の工夫 |
・セレクタにid属性で指定する
$("#id")
・セレクタに要素名とclass属性を追加する
$("div")->$("div.nav")
・セレクタを単純化する
$("#nav ul li a") -> $("$nav a")
・findメソッドを利用する
$("#nav a") -> $("#nav").find("a")
・キャッシュを使う
$("#nav a").text(...);
$("#nav a").css(...);
↓
var e = $("#nav a");
e.text(...);
e.css(...);
|
セレクタの記述パターン |
セレクタ | 例 | 説明 |
#id | $('#id') | id属性を持つ要素 |
.クラス名 | $('.red') | classを持つ要素 |
要素1,要素2 | $('h1,h2') | 複数のセレクタを指定する |
要素1 要素2 | $('p span') | 要素1の内側の要素2 |
要素1 > 要素2 | $('p > span') | 要素1の直下の子要素2 |
要素1 + 要素2 | $('h2 + p') | 要素1の次の要素2 |
要素1 ~ 要素2 | $('h2 + p') | 要素1の後に出現する要素2 |
[属性=値] | $('a[target=_blank]') | 指定した属性が特定の値を持つ要素 |
要素:first | $('tr:first') | 最初の要素 |
要素:last | $('tr:last') | 最後の要素 |
要素:odd | $('tr:odd') | 偶数番目の要素 |
要素:even | $('tr:even') | 奇数番目の要素 |
要素:eq(n) | $('tr:eq(n)') | n番目(0〜)の要素 |
要素:gt(n) | $('tr:gt(n)') | n番目(0〜)より後の要素 |
要素:lt(n) | $('tr:lt(n)') | n番目(0〜)より前の要素 |
:header | $(':header') | h1〜h6要素 |
要素:animated | $(':header') | アニメーションしている要素 |
要素:nth-child(n) | $('ul:nth-child(2)') | 要素のn番目の子要素 |
要素:first-child | $('ul:first-child') | 要素の最初の子要素 |
要素:last-child | $('ul:last-child') | 要素の最後の子要素 |
要素:only-child | $('ul:only-child') | 要素の単一の要素 |
:checked | $('input:checked') | チェックされた要素(チェックボックス)を選択する |
:selected | $('select option:selected') | リストボックスから選択された要素を選択する |
|
メソッド(HTML要素の操作) |
メソッド | 例 | 説明 |
.css() | $('p').attr('color','red'); / var c = $('p').attr('color'); | style属性の設定または取得 |
.attr() | $('img').attr('src','p.png'); / var f = $('img').attr('src'); | 要素の属性値の設定または取得 |
.removeAttr() | $('img').removeAttr('src'); | 要素の属性値を削除 |
.text() | $('p').text('sample'); / var text = $('p').text(); | 要素のテキストの設定または取得 |
.html() | $('p').html('hello'); / var html = $('p').html(); | 要素のHTMLの設定または取得 |
.prepend() | $('p').prepend('hello'); | 要素のHTMLの前に設定 |
.append() | $('p').append('hello'); | 要素のHTMLの後に設定 |
.before() | $('p').before('hello'); | 要素のHTMLの前に設定 |
.after() | $('p').after('hello'); | 要素のHTMLの後に設定 |
$(挿入するHTML).prependTo(要素) | $('hello').prependTo('p'); | 要素のHTMLの前に設定 |
$(挿入するHTML).appendTo(要素) | $('hello').appendTo('p'); | 要素のHTMLの後に設定 |
$(挿入するHTML).insertBefore(要素) | $('hello').insertBefore('p'); | 要素のHTMLの前に設定 |
$(挿入するHTML).insertAfter(要素) | $('hello').insertAfter('p'); | 要素のHTMLの後に設定 |
.addClass() | $('p').addClass('row-class'); | クラスを追加する |
.removeClass() | $('p').removeClass('row-class'); | クラスを削除する |
.toggleClass() | $('p').toggleClass('row-class'); | クラスが付与されていれば削除、なければ追加する |
.width() | $('div').width(300); / var w = $('div').width(); | 要素の幅をピクセルの設定または取得する |
.height() | $('div').height(200); / var h = $('div').height(); | 要素の高さをピクセルの設定または取得する |
.innerWidth() | var w = $('div').innerWidth(); | 要素の幅(paddingを含む)をピクセルで取得する |
.innerHeight() | var h = $('div').innerHeight(); | 要素の高さ(paddingを含む)をピクセルで取得する |
.outerWidth() | var w = $('div').outerWidth(); | 要素の幅(paddingとborderを含む)をピクセルで取得する |
.outerHeight() | var h = $('div').outerHeight(); | 要素の高さ(paddingとborderを含む)をピクセルで取得する |
.val() | $('input').val('name'); / var v = $('input').val(); | input要素に値を設定または取得する |
.offset().top | $(セレクタ).offset().top; | ブラウザの上からの距離 |
.offset().left | $(セレクタ).offset().left; | ブラウザの左からの距離 |
.position().top | $(セレクタ).position().top; | 親要素の上からの距離 |
.position().left | $(セレクタ).position().left; | 親要素の左からの距離 |
.scrollTop() | $(window).scrollTop(100); | 縦スクロールの位置を指定 |
.scrollLeft() | $(window).scrollLeft(100); | 横スクロールの位置を指定 |
|
メソッド(アニメーション系) |
メソッド | 例 | 説明 |
.fadeIn() | $('xxx').fadeIn('fast'); | 要素をフェードインで出現させる |
.fadeOut() | $('xxx').fadeOut(100); | 要素をフェードアウトで非表示にする |
.slideDown() | $('xxx').slideDown('slow'); | 要素をスライドしながら非表示にする |
.slideUp() | $('xxx').slideUp(500); | 要素をスライドしながら出現させる |
.show() | $('xxx').show(); | 要素を出現させる |
.hide() | $('xxx').hide(); | 要素を非表示にする |
.animate() | $('xxx').animate('opacity:0.25', 500); | 指定したCSSプロパティを変化させる |
|
メソッド(イベント系) |
メソッド | 例 | 説明 |
.click() | $('xxx').click(...); | 要素をクリックした時に処理を行なう |
.toggle() | $('xxx').toggle(xxx, xxx, xxx); | 要素をクリックした時に処理(順番に切替)をを行なう |
.dblclick() | $('xxx').dblclick(...); | 要素をダブルクリックした時に処理を行なう |
.change() | $('xxx').change(...); | input要素の値が変更された時に行なう |
.hover() | $('xxx').hover(..., ...); | 要素にマウスが載った時/外に出た時に処理を行なう(2つの関数を順番に指定する) |
.on() | $('xxx').on('click', ...); | イベント名を指定して処理を行なう |
.load() | $(window).load(...); / $(セレクタ).load(...); | HTMLの読み込みが完了(外部ファイルを含む)した時に処理を行なう(このメソッドはreadyに記述しない) |
.ready() | $(document).ready(...); | HTMLの読み込みが完了した時に処理を行なう |
.resize() | $(window).resize(...); | ウィンドウサイズが変更された時に処理を行なう |
.scroll() | $(window).scroll(...); / $('xxx').scroll(...); | スクロールが発生した時に処理を行なう |
.mousedown() | $('xxx').mousedown(...); | マウスボタンを押された時に処理を行なう |
.mouseup() | $('xxx').mouseup(...); | マウスボタンを戻された時に処理を行なう |
.mousemove() | $('xxx').mousemove(...); | マウスカーソルが動いた時に処理を行なう |
.mouseenter() | $('xxx').mouseenter(...); | マウスカーソルが載った時に処理を行なう |
.mouseover() | $('xxx').mouseover(...); | マウスカーソルが載った時に処理を行なう(イベントバブリング発生時も動作する) |
.mouseleave() | $('xxx').mouseleave(...); | マウスカーソルが外れた時に処理を行なう(イベントバブリング発生時も動作する) |
.hover() | $('xxx').hover(...); | マウスカーソル載ったタイミングもしくは離れたタイミング時に処理を行なう |
.change() | $('xxx').change(...); | フォームの値が変更された時に処理を行なう |
.select() | $('xxx').select(...); | 入力フォーム(text,textarea)でテキストが選択された時に処理を行なう |
.focus() | $('xxx').focus(...); | フォーム要素やa要素にフォーカスが当たった時に処理を行なう |
.focusin() | $('xxx').focusin(...); | フォーム要素やa要素にフォーカスが当たった時に処理を行なう(イベントバブリング発生時も動作する) |
.blur() | $('xxx').blur(...); | フォーム要素やa要素にフォーカスが外れた時に処理を行なう |
.focusout() | $('xxx').focusout(...); | フォーム要素やa要素にフォーカスが外れた時に処理を行なう(イベントバブリング発生時も動作する) |
.submit() | $('xxx').submit(...); | 送信ボタンが押された時に処理を行なう |
.keydown() | $('xxx').keydown(...); | キーが押された時に処理を行なう(Shiftなども対応) |
.keypress() | $('xxx').keypress(...); | キーが押された時に処理を行なう(文字キーのみ) |
.keyup() | $('xxx').keyup(...); | キーが戻った時に処理を行なう(Shiftなども対応) |
.bind() | $('xxx').bind(イベント種類,...); | イベントとイベント処理を対応づける |
.one() | $('xxx').one(イベント種類,...); | イベントを一度だけ実行する(2回目以降は実行されない) |
.trigger() | $('xxx').trigger(イベント種類); | 特定要素で特定イベントを処理を行なう |
.unbind() | $('xxx').unbind(イベント種類); | イベントとイベント処理の対応づけを解除する |
.live() | $(存在不明のセレクタ).live(イベント種類,function(){}); | 要素が存在しない段階でイベント処理を設定する |
.die() | $(存在不明のセレクタ).die(イベント種類); / .die(); | liveで設定したイベント処理を削除する |
.delegate() | $(セレクタ).delegate(存在不明のセレクタ,イベント種類,function(){}); | 存在する要素の存在しない子要素にイベント処理を設定する |
.undelegate() | $(セレクタ).delegate(存在不明のセレクタ,イベント種類); / .delegate(存在不明のセレクタ); | delegateで設定したイベント処理を解除する |
※イベントバブリング=子要素で発生したイベントが親要素に伝わること
|
readyの別の記載 |
$(function(){jQueryのコード});
|
JSONデータを扱う |
$.getJSON("data.json",function(data){
$("h3").text(data.title); //data.jsonの"title"の値を設定
$.each(data.list,function(){ //"list"のリスト分ループ
$("ul").append(""+this.key+""); //"list"の"key"の値を設定
}); //each
});
(JSON)
{
"title" : "タイトル",
"list" : [
{"key" : "キー1"},
{"key" : "キー2"},
{"key" : "キー3"}
]
}
|
ブラウザ独自のイベントを止める |
//aタグでhrefのURLに移動するイベントを止める
$('a').click(function(e){
//デフォルトイベントをprevent(妨げる)する
e.preventDefault();
});
//別解
$('a').click(function(e){
//デフォルトイベントをprevent(妨げる)する
return false;
});
※dblclickイベントで止めてもその前にclickイベントが発火するので
clickイベントも停止する等の対応が必要
|
繰り返し処理 |
$(セレクタ).each(function(){
if($(this).text() == "sample"){
$(this).text("hello");
}
});
//通し番号(index=0,1,2,...)あり
$(セレクタ).each(function(index){
if($(this).text() == "sample"){
$(this).text("hello" + index);
}
});
|
if |
//
if($.support.opacity){
//opacityをサポートしているブラウザ
}else if($("div").length == 3){
//
}else{
//
}
|
load |
//別ファイルの内容をロードする
function(){
$("#id1").load("contents.html #id2");
}
(contents.html)
<div id="id2">
<p>xxxxxxx</p>
</div>
|
イベントオブジェクト |
$("#foo").click(function(event){
//イベントオブジェクトが「event」に格納される
});
(イベント)
event.currentTarget : イベントを設定した要素(thisと同じ)
event.target : イベント発生した要素
event.type : 発生したイベントの種類(clickやmouseover)を取得できる
event.result : イベントハンドラが最後に返した値を取得できる
event.timeStamp : イベント発生した時間を取得する
event.data : bindメソッドの第2引数が取得できる
event.pageX/event.pageY : イベント発生時にdocumentのマウスポインたおの相対座標を取得できる
event.relatedTarget : マウスが移動直前に示していた要素または移動後の要素を取得できる
event.which : キー入力イベントで押されたキーコードを取得できる
event.preventDefault : ブラウザが持っているデフォルトのイベントを中止する
event.isDefaultPrevented : preventDefaultメソッドが呼ばれていればtrue、そうでなければfalse
event.stopPropagation : イベントのバブリングを中止する
event.isPropagationStopped : stopPropagationメソッドが呼ばれていればtrue、そうでなければfalse
event.stopImmediatePropagation : イベントのバブリングを中止し、それ以降のイベントハンドラを実行しないようにする
event.isisImmediatePropagationStopped : stopImmediatePropagationメソッドがよばれていればtrue、そうでなければfalse
|
fadeIn/fadeOut |
(jQuery)
$("btnFadeOut").click(function(){
$("#fade").fadeOut('slow');
});
$("btnFadeIn").click(function(){
$("#fade").fadeIn('fast');
});
(HTML)
<div id="fade" style="{width:100x;height:100px;background:#000;}"></div>
<button type="button" id="btnFadeOut" value="FadeOut" />
<button type="button" id="btnFadeIn" value="FadeInd" />
|
ブラウザ判定 |
(ブラウザ)
//if($.browser.msie) //msieの場合
$.browser.webkit
$.browser.safari
$.browser.opera
$.browser.msie
$.browser.mozilla
(ブラウザバージョン)
if(paseInt($.browser.version) == 6){}
|