【jQuery】今更jQueryを使用する人への基本の使い方

【jQuery】今更jQueryを使用する人への基本の使い方:

はじめに

今更感しかありませんが、jqueryについて業務で使用した部分をおさらいで記載します。

取得

位置

$("要素").offset().top; 
$("要素").offset().bottom; 
$("要素").offset().left; 
$("要素").offset().right; 

高さ

$("要素").height();           //height 
$("要素").innerHeight();      //padding-top + padding-bottom + height 
$("要素").outerHeight();      //border-top-width + border-bottom-width + innerHeight 
$("要素").outerHeight(true);  //margin-top + margin-bottom + outerHeight 

幅

$("要素").width();            //width 
$("要素").innerwidth();       //padding-left + padding-right + width 
$("要素").outerwidth();       //border-left-width + border-right-width + innerwidth 
$("要素").outerwidth(true);   //margin-left + margin-right + outerwidth 

追加

$("要素").append("追加要素");   //要素内部の後ろに追加 
$("要素").prepend("追加要素");  //要素内部の前に追加 
$("要素").after("追加要素");    //要素外部の後ろに追加 
$("要素").before("追加要素");   //要素外部の前に追加 
$("要素").wrap("追加要素");     //要素を追加要素で個別にそれぞれ囲む 
$("要素").wrap("追加要素");     //要素を追加要素で一つに囲む 

削除

$("削除要素").remove();   //要素内部の後ろに追加 
 

CSS

スタイル追加

$('要素').css('プロパティ','値'); //単体 
$('要素').css({'プロパティ':'値','プロパティ':'値'}); //複数 

要素を非表示

$('要素').css('display','none'); 

ウインドウがリサイズされたら実行

$(window).resize(function(){ 
実行内容 
}); 

おわりに

記載ミス等ありましたら、コメント頂けると幸いです。