[jQuery] 基本メモ: htmlの操作 – 端くれプログラマの備忘録

attrメソッド – htmlタグの属性

<a href="http://google.com/">Google</a>

1	<a href="http://google.com/">Google</a>

取得 console.log($('a').attr('href'));
設定 $('a').attr('href', 'http://bing.com/');

1 2	取得 console.log($('a').attr('href')); 設定 $('a').attr('href', 'http://bing.com/');

dataメソッド – htmlタグのカスタム属性

<a href="http://google.com/" data-sitename="Google">Google</a>

1	<a href="http://google.com/" data-sitename="Google">Google</a>

取得 console.log($('a').data('sitename'));
設定 $('a').data('sitename','Google US);

1 2	取得 console.log($('a').data('sitename')); 設定 $('a').data('sitename','Google US);

要素の中身を取得する

<p>test</p>
設定 $('p').text('hello);
設定　$('p').text('<a href="">click me</a>');
取得 console.log($('p').text());

設定 $('p').text('hello);

設定　$('p').text('<a href="">click me</a>');

取得 console.log($('p').text());

要素の値を取得する

<input type="text" value="hello">
取得 $('input').val();
設定 $('input').val('good-bye');

取得 $('input').val();

設定 $('input').val('good-bye');

要素の内容を空にする

$('p').empty();

1	$('p').empty();

要素自体を削除する

$('p').remove();

1	$('p').remove();

要素を追加する

<ul>タグ直後に<li>タグを追加

var li = $('<li>').text('addition');
$('ul > li:eq(0)').before(li);

1 2	var li = $('<li>').text('addition'); $('ul > li:eq(0)').before(li);

以下のように書いても同じ結果

var li = $('<li>').text('addition');
li.insertBefore($('ul > li:eq(0)'));

1 2	var li = $('<li>').text('addition'); li.insertBefore($('ul > li:eq(0)'));

<ul>タグ内の末尾に追加

var li = $('<li>').text('addition');
$('ul').append(li);

1 2	var li = $('<li>').text('addition'); $('ul').append(li);

<ul>タグ内の先頭に追加

var li = $('<li>').text('addition');
$('ul').prepend(li);

1 2	var li = $('<li>').text('addition'); $('ul').prepend(li);

参考サイト

jQuery 日本語リファレンス
http://semooh.jp/jquery/