SONICMOOV Googleページ

【jQuery入門 5】要素の属性の取得と書き換え

【jQuery入門 5】要素の属性の取得と書き換え

  • このエントリーをはてなブックマークに追加

また現れました野生のまりぞーです_(:3」∠)_
前回の第4回目【jQuery入門 4】イベントって何?on、offを使ってみように引き続き、
jQuery入門編、第5回目は要素の属性についてです。

またまた今回もデモを用意しています。

属性とは

widthheighthreftitleなど、各要素で指定している設定などです。
今回はこの値を操作します。

  • .width()
    要素の幅を取得
  • .height()
    要素の高さを取得
  • .attr()
    要素の属性を取得
  • .removeAttr()
    要素の属性を削除
  • .prop()
    要素のプロパティを取得
  • .addClass()
    classを追加する
  • .removeClass()
    classを削除する
  • .toggleClass()
    classを切り替える
  • .hasClass()
    classを持っているか判定する

DEMO 01 : width()

公式ドキュメント : .width() | jQuery API Documentation

各要素の幅を取得する

DEMO 01

jQuery width

HTML

<div class="btn_wrap">
	<button class="btn_trigger demo01_trigger">80px</button>
	<button class="btn_trigger demo01_trigger2">160px</button>
	<button class="btn_trigger demo01_trigger3">240px</button>
</div>
<div class="demo01_target">80px</div>
<div class="demo01_target2">160px</div>
<div class="demo01_target3">240px</div>

jQuery

$(function() {

	$('.demo01_trigger').on('click', function(){
		$('.demo01_target').width(80);
	});
	$('.demo01_trigger2').on('click', function(){
		$('.demo01_target2').width(160);
	});
	$('.demo01_trigger3').on('click', function(){
		$('.demo01_target3').width(240);
	});

});

DEMO 02 : height()

公式ドキュメント : .height() | jQuery API Documentation

各要素の高さを取得する

DEMO 02

jQuery height

HTML

<div class="btn_wrap">
	<button class="btn_trigger demo02_trigger1">40px</button>
	<button class="btn_trigger demo02_trigger2">80px</button>
	<button class="btn_trigger demo02_trigger3">120px</button>
</div>
<div class="demo02_target demo02_target1">40px</div>
<div class="demo02_target demo02_target2">80px</div>
<div class="demo02_target demo02_target3">120px</div>

jQuery

$(function() {

	$('.demo02_trigger1').on('click', function(){
		$('.demo02_target1').height(40);
	});
	$('.demo02_trigger2').on('click', function(){
		$('.demo02_target2').height(80);
	});
	$('.demo02_trigger3').on('click', function(){
		$('.demo02_target3').height(120);
	});

});

DEMO 03 : attr()

公式ドキュメント:.attr() | jQuery API Documentation

  1. class「demo03_trigger」を持つa要素「Googleへのリンク」のhref属性とtitle属性を取得
  2. class「demo03_target」へtitle属性、class「demo03_target2」へhref属性を表示

DEMO 03

jQuery attr

HTML

<a href="https://www.google.co.jp/" class="btn_trigger demo03_trigger" target="_blank" title="Google">Googleへのリンク</a>
<dl>
	<dt class="demo03_target">.demo03_trigger title</dt>
	<dd class="demo03_target2">.demo03_trigger href</dd>
</dl>

jQuery

$(function() {

	var demo03_title = $('.demo03_trigger').attr('title');
	var demo03_href = $('.demo03_trigger').attr('href');
	$('.demo03_target').text(demo03_title);
	$('.demo03_target2').text(demo03_href);

});

DEMO 04 : removeAttr()

公式ドキュメント : .removeAttr() | jQuery API Documentation

class「demo04_trigger」をもつ要素「removeAttr(‘href’)」ボタンをクリックするとclass「demo04_target」のhref属性を削除

DEMO 04

jQuery removeAttr

HTML

<button class="btn_trigger demo04_trigger">removeAttr('href')</button>
<p><a href="https://www.google.co.jp/" class="btn_trigger demo04_target" target="_blank" title="Google">Googleへのリンク</a></p>

jQuery

$(function() {

	$('.demo04_trigger').on('click', function(){
		$('.demo04_target').removeAttr('href').text('href属性削除');
	});

});

DEMO 05 : prop()

公式ドキュメント : .prop() | jQuery API Documentation

  1. class「demo05_trigger」を持つinput要素「CHECK」のchecked属性を取得
  2. class「demo05_target」へcheckedが有効か無効かを表示

DEMO 05

jQuery prop

HTML

<input type="checkbox" id="demo05_checkbox" class="demo05_trigger" checked="checked">
<label for="demo05_checkbox">CHECK</label>
<p class="demo05_target">.demo05_trigger prop</p>

jQuery

$(function() {

	var demo05_trigger = $('.demo05_trigger');
	demo05_trigger.on('change', function(){
		$('.demo05_target').text(demo05_trigger.prop('checked'));
	});

});

DEMO 06 : addClass()

公式ドキュメント : .addClass() | jQuery API Documentation

class「demo06_target」を持つ要素のうち、3番目の要素にのみclass「demo06_class」を追加する

DEMO 06

jQuery addClass

HTML

<ul>
	<li class="demo06_target">01</li>
	<li class="demo06_target">02</li>
	<li class="demo06_target">03</li>
	<li class="demo06_target">04</li>
</ul>

jQuery

$(function() {

	$('.demo06_target').eq(2).addClass('demo06_class');

});

DEMO 07 : removeClass()

公式ドキュメント : .removeClass() | jQuery API Documentation

class「demo07_class」を持つ要素のうち、2番目の要素のみclass「demo07_class」を削除する

DEMO 07

jQuery removeClass

HTML

<ul>
	<li class="demo07_target demo07_class">01</li>
	<li class="demo07_target demo07_class">02</li>
	<li class="demo07_target demo07_class">03</li>
	<li class="demo07_target demo07_class">04</li>
</ul>

jQuery

$(function() {

	$('.demo07_target').eq(1).removeClass('demo07_class');

});

DEMO 08 : toggleClass()

公式ドキュメント : .toggleClass() | jQuery API Documentation

クリックでclass「demo08_class」を切り替える

DEMO 08

jQuery toggleClass

HTML

<button class="btn_trigger demo08_trigger">classを切り替える</button>

jQuery

$(function() {

	$('.demo08_trigger').on('click', function(){
		$(this).toggleClass('demo08_class');
	});

});

DEMO 09 : hasClass()

公式ドキュメント : .hasClass() | jQuery API Documentation

  1. 要素が「demo09_target」を持っているか判定
  2. class「demo09_target」を持つ要素にマウスオーバーしたとき、class「demo09_class」を切り替える

DEMO 09

jQuery hasClass

HTML

<ul>
	<li class="demo09_target">01</li>
	<li>02</li>
	<li>03</li>
	<li class="demo09_target">04</li>
</ul>

jQuery

$(function() {

	$('.demo09_target').hover(function(){
		if($(this).hasClass('demo09_target')) {
			$(this).toggleClass('demo09_class');
		}
	});

});

まとめ

次回もおたのしみにー。ぬふぬふ。

第6回目はこちら。
【jQuery入門 6】要素の書き換え、追加・削除

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

まりぞー(マークアップエンジニア)

ゆるキャラとFPSゲームとおいしい食べものが好きですヽ(゜ω゜)ノ

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation