jQuery要素情報の取得と設定

推奨学習時間:60分学習方法:詳細
学習目標

は、要素のプロパティ、スタイル、寸法、位置、内容を取得および設定する方法を知っています.

では、フォーム要素の値を取得および設定する方法がわかります.

は、要素の表示と非表示を制御する方法を知っています.

詳しく説明する
ツールバーの

.attr('属性名'[,値])

.prop('属性名'[,値])

removeAttr('属性名')属性

を削除
attrとpropの違いは、attrはDOM、例えば$('a').attr('title')、DOM:)にあり、propは必ずしもDOM、$('a').attr('tagName')ではないが、aにはtagNameという属性はない.
propの属性で

checked

outerHTML

tagName

スタイル
.css

$el.css('color')
$el.css('color', 'red')
$el.css({
  'font-size': '16px',
  'border': 'none'
})

サイズ

.height

.innerHeight:height+垂直方向のpadding

.outerHeight([includeMargin]):height+垂直方向padding、border+オプションmargin

.width

.innerWidth

.outerWidth

位置

position:親要素(positionはrelative,absolute,fixed)に対する要素の位置を返します.プロパティleftとtopが含まれます.

offset:ブラウザウィンドウに対する要素の位置を返します.プロパティleftとtopが含まれます.

.offset(座標/座標を返す関数):ブラウザウィンドウに対する要素の位置を設定します.

注意:jQueryは隠し要素のpositionを取得できません
条件を満たすかどうか
.is.表示するかどうか

$(selector).is(':visible')

要素のinnerHTML

.html()

.html(html)

$(selector).html()

要素のラベル名の取得

$(selector).prop("tagName").toLowerCase()

$(selector).Prop(「tagName」)は、全大文字で返されます.
要素のouterHTMLの取得

$(selector).prop('outerHTML')

要素のテキスト内容の取得

$(selector).text()

要素の削除

$(selector).remove()

要素の内容を削除

$(selector).empty()

データ#データ#
.data
要素の表示非表示

.show

.hide

.toggle切り替え表示、非表示の状態

アニメーション表示

fadeIn, fadeOut, fadeToggle

slideUp, slideDown, slideToggle