【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(){
実行内容
});

おわりに

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