その他のjQuery処理等
正直細分化するのは難しいところだなぁって処理をまとめています。
抜けていたりする場合はここに追加していきます。
offset
ドキュメント上(画面の左上を起点に)でどの座標位置にいるのかを返します。
オブジェクト形式で値が戻り、X軸とY軸のデータを使用することができます。
$(function() { var offset = $('#test').offset(); alert('#testのX位置は'+offset.left+' Y位置は'+offset.top); // 左からの座標位置 obj.left 上からの座標位置 obj.top })
trigger
別のイベントを呼び出す事ができます。
triggerの引数にはイベント名を指定します。
イベントバインドしていないイベント名を指定してもエラーは発生しません。
$(function() { $('#test').on('click',function() { alert('#testをクリックした'); }); $('#test2').on('click',function() { alert('#test2をクリックした'); $('#test').trigger('click'); }); });
hasClass
指定要素にクラスがついているかどうをを判定します。
戻り値はbool型です。
$(function() { alert($('#test2').hasClass('test')); alert($('#test3').hasClass('test')); });
attr
指定要素の属性の操作を行います。
第一引数には、属性名を指定
第二引数には、指定なければ属性値の取得、指定で属性値を上書きします。
$(function() { alert($('#test4').attr('class')); $('#test4').attr('class','tttttt'); alert($('#test4').attr('class')); });
prop
attrと同じく指定要素の属性の操作を行います。
第一引数には、属性名を指定
第二引数には、指定なければ属性値の取得、指定で属性値を上書きします。
attrとの差は、input属性取得時の正確さです。
主に以下のデータ取得時に使用します。
selectedIndex, tagName, nodeName
checked, selected, disabled等の値がない属性
$(function() { alert($('#test5').prop('checked')); alert($('#test6').prop('checked')); });
addClass
指定要素にクラスを付与することができます。
$(function() { $('#test7').addClass('tclass')); });
removeClass
指定要素に付与してあるクラスを削除することができます。
$(function() { $('#test7').removeClass('tclass')); });
css
指定要素にcssをインラインで追加します。
ひとつだけの指定方法と複数の指定方法が異なりますので注意してください。
$(function() { // 一つだけの指定 $('#test8').css('color','#fff'); // 複数の指定 オブジェクト形式での指定 $('#test8').css( { 'color':'#fff', 'border':'1px solid #ddd', } ); });
text
指定要素にテキストを流し込みます。
既にあるものは上書きされます。
htmlタグを書き込んでも文字列扱いになります。
$(function() { $('#test9').text('<p>うーちゃん!</p>'); });
html
指定要素にhtmlを流し込みます。
既にあるものは上書きされます。
htmlタグは有効化されます。
$(function() { $('#test10').html('<p>うーちゃん!</p>'); });
html
指定要素にhtmlを流し込みます。
既にあるものは上書きされます。
htmlタグは有効化されます。
$(function() { $('#test10').html('<p>うーちゃん!</p>'); });
show
指定要素のdisplayをデフォルトに戻します。
$(function() { $('#test11').show(); });
hide
指定要素のdisplayをnoneにします。
$(function() { $('#test11').hide(); });
empty
指定要素の子要素を削除します。
指定要素は残ります。
$(function() { // #test12は残るが、子要素全てが削除。空の要素が残る $('#test12').empty(); });
remove
指定要素を削除します。
$(function() { // #test13が削除される $('#test13').empty(); });
eq
セレクタであったのと同じく、何番目の要素を取得します。
これは0スタートとなります。
$(function() { // $('#test14 li').eq(0).addClass('tes'); });
index
指定要素が何番目にいるのかを取得します。
【順番を知りたいグループ】.index(【順番を知りたい要素】)
$(function() { // $('#test15 li').on('click',functuion() { alert($('#test15 li').index($(this))+'番目'); }) });
width/height
指定要素の幅/高さを取得します。
border,margin,paddingを含まない値が戻り値となります。
純粋な要素の高さとなります。
$(function() { alert($('#test16').width()); alert($('#test16').height()); });
innerWidth/innerHeight
指定要素の幅/高さを取得します。
border,marginを含まない値が戻り値となります。
つまり、paddingを含んだ値となります。
$(function() { alert($('#test16').innerWidth()); alert($('#test16').innerHeight()); });
outerWidth/outerHeight
指定要素の幅/高さを取得します。
デフォルトではmarginを含まない値が戻り値となります。
つまり、paddingとborderを含んだ値となります。
しかし、第一引数に値の設定が可能で、bool型を設定します。
trueの場合はmarginを含んだ値
falseの場合はmarginを含まない値
にそれぞれ変化します。
$(function() { alert($('#test16').outerWidth()); alert($('#test16').outerHeight()); });
append
指定要素の中に【一番最後の子要素】として、引数の内容を追加します。
引数で要素を指定した場合は、その要素は移動することになります。
$(function() { // セレクタで指定した要素中に【一番最後の子要素】として、引数の内容を追加 $('#test18').append('<div>おすしたいかい</div>'); });
appendTo
引数で指定した要素の中に【一番最後の子要素として】セレクタで指定した要素を追加します。
セレクタの要素は移動することになります。
$(function() { // 引数で指定した要素の中に【一番最後の子要素として】セレクタで指定した要素を追加します。 $('#test20').appendTo($('#test19')); });
prepend
指定要素の中に【一番最初の子要素】として、引数の内容を追加します。
引数で要素を指定した場合は、その要素は移動することになります。
$(function() { // セレクタで指定した要素の一番最後の子要素に追加 $('#test21').prepend($('#test22')); });
prependTo
引数で指定した要素の中に【一番最初の子要素として】セレクタで指定した要素を追加します。
セレクタの要素は移動することになります。
$(function() { $('#test23').prependTo($('#test24')); });
appendとappendTo prependとprependTo?
まず、append系とprepend系は、最後の子要素とするか、最初の子要素とするかの違いにすぎません。
で、【appendとprepend】と【appendToとprependTo】このグループの違いは
・指定セレクタの中に引数の内容を入れ込む
・引数の中に指定セレクタの内容を入れ込む
の違いとなります。
正直、appendでもappendToでもそこまで変わらないので、どっち使ってもいいと思いますよ
before
セレクタで指定した要素の直前(直前の兄要素)に引数の内容を入れ込みます。
引数で要素を指定した場合は、その要素は移動することになります。
$(function() { $('#test25').before($('#test26')); });
after
セレクタで指定した要素の直後(直後の弟要素)に引数の内容を入れ込みます。
引数で要素を指定した場合は、その要素は移動することになります。
$(function() { $('#test25').after($('#test26')); });
insertBefore
引数で指定した要素の直前(直前の兄要素)にセレクタの内容を入れ込みます。
セレクタの要素は移動することになります。
$(function() { $('#test25').insertBefore($('#test26')); });
insertAfter
引数で指定した要素の直後(直後の弟要素)にセレクタの内容を入れ込みます。
セレクタの要素は移動することになります。
$(function() { $('#test25').insertAfter($('#test26')); });
clone
クローン、要するにコピーを作る関数です。
こいつ単独では動作しません。
append等では、【対象要素は移動する】事になっていました。
これを移動せずに追加させたい場合はこいつを指定します。
また、デフォルトでは引数の指定は不要ですが、trueをclone引数に入れた場合
【イベントハンドラ】もコピーするので覚えておいてください。
$(function() { // 引数のセレクタ要素をコピーさせる。 $('#test25').append($('#test26').clone()); // セレクタ要素をコピーさせる。イベントハンドラもコピーする $('#test25').clone(true).appendTo($('#test26')); });