その他の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'));

});