20140225【JS】jQueryによる基本的なセレクタの指定方法
お題
プログラム概要
HTML内の要素をjQueryのセレクタを利用して取得しコンソールに表示する
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hoge</title>
<script src="jquery-1.11.0.js"></script>
<body>
<h1>セレクタの基本的な指定方法</h1>
<ul>
<li><span class="error">エラーメッセージ1</span></li>
<li><span class="error">エラーメッセージ2</span></li>
</ul>
<div class="title">class属性がtitleのdiv要素</div>
<ul id="menu">
<li class="menu-item">Menu Item1</li>
<li class="menu-item">Menu Item2</li>
<li class="menu-item">Menu Item3</li>
<li class="menu-item">Menu Item4</li>
</ul>
<form name="login" action="/login">
</form>
<form name="logout" action="/logout">
</form>
<script>
$(function(){
console.log('-- すべてのh1要素 --');
console.log($('h1').text());
console.log(' -- class属性がerrorであるすべての要素 --');
$('.error').each(function(i, e){
console.log($(e).text());
});
console.log('-- class属性がtitleのdiv要素 --');
console.log($('div.title').text());
console.log('-- id属性がmenuの要素 --');
console.log($('#menu').html());
console.log('-- name属性を持つform要素 --');
$('form[name]').each(function(i, e) {
console.log($(e).attr('name'));
});
console.log('-- name属性の値がloginのform要素 --');
console.log($('form[name=login]').attr('action'));
console.log('-- name属性の値がloginではないform要素 --');
console.log($('form[name!=login]').attr('action'));
console.log('-- name属性の値がloginから始まるform要素（前方一致) --');
console.log($('form[name^=login]').attr('action'));
console.log('-- name属性の値にloginを含むform要素（部分一致） --');
console.log($('form[name*=login]').attr('action'));
console.log('-- name属性の値がloginで終わるform要素（後方一致） --');
console.log($('form[name$=login]').attr('action'));
console.log('-- class属性がmenu-itemのli要素のうち最初のもの --');
console.log($('li.menu-item:first').text());
console.log('-- class属性がmenu-itemのうち3番目のもの --');
console.log($('li.menu-item:eq(2)').text());
console.log('-- class属性がmenu-itemのうち奇数番目のもの --');
$('li.menu-item:odd').each(function(i, e){
console.log($(e).text());
});
});
</script>
</body>
</html>
実行結果
ファイル: hoge.html -- すべてのh1要素 -- セレクタの基本的な指定方法 -- class属性がerrorであるすべての要素 -- エラーメッセージ1 エラーメッセージ2 -- class属性がtitleのdiv要素 -- class属性がtitleのdiv要素 -- id属性がmenuの要素 -- <li class="menu-item">Menu Item1</li> <li class="menu-item">Menu Item2</li> <li class="menu-item">Menu Item3</li> <li class="menu-item">Menu Item4</li> -- name属性を持つform要素 -- login logout -- name属性の値がloginのform要素 -- /login -- name属性の値がloginではないform要素 -- /logout -- name属性の値がloginから始まるform要素（前方一致) -- /login -- name属性の値にloginを含むform要素（部分一致） -- /login -- name属性の値がloginで終わるform要素（後方一致） -- /login -- class属性がmenu-itemのli要素のうち最初のもの -- Menu Item1 -- class属性がmenu-itemのうち3番目のもの -- Menu Item3 -- class属性がmenu-itemのうち奇数番目のもの -- Menu Item2 Menu Item4
