学習JQuery-2
5137 ワード
第2章:要素の選択
jQueryが強いのは、CSSやDOMを利用しやすいから!
イメージのたとえ:左手はDOMで、右手はCSSです.
1. CSSセレクタ
Selector type
CSS
jQuery
説明
Tag name
p {}
$('p')
Webページ全体のラベルに有効
ID
#some-id {}
$('#some-id')
Webページでidを指定するのに有効です
Class
.some-class {}
$('.some-class')
Webページの同じクラス名に有効
次のメニューを見てください.
chapter02.html
効果は次のとおりです.
Comedies As You Like It All's Well That Ends Well A Midsummer Night's Dream Twelfth Night
Tragedies Hamlet Macbeth Romeo and Juliet
Histories Henry IV (email) Part I Part II
Henry V Richard II
まず、彼を横の形に変えます.
次のCSSコードを追加します.
その後、jsにCSSサポートを追加
現在の効果は次のとおりです.
Selected Shakespeare Plays
As You Like It All's Well That Ends Well A Midsummer Night's Dream Twelfth Night
Tragedies Hamlet Macbeth Romeo and Juliet
Histories Henry IV (email) Part I Part II
Henry V Richard II
上のjQueryコードでは、新しい記号「>」!
この記号は、サブエレメントを表します.
$('#selected-plays > li')
id=「selected-plays」のサブエレメントli(tag name)、すなわちComedies、Tragedies、Histories行を指定します.
では、どのようにしてすべてのli要素(子要素、孫要素、重孫要素...^^)を選択することができますか?
$('#selected-plays li')
はい、あなたは間違っていません!「>」の代わりにスペースを使用すると完了します.
3つのサブエレメントを除くすべてのliエレメントの背景をグレーに設定したい.
CSS:
JS:
次のような効果が得られます.
Selected Shakespeare Plays
The jQuery library harnesses the power of Cashcading Style Sheets(CSS) selectors
to let us quickly and easily access elements or groups of elements in Document Object Model(DOM).jQueryが強いのは、CSSやDOMを利用しやすいから!
イメージのたとえ:左手はDOMで、右手はCSSです.
1. CSSセレクタ
Selector type
CSS
jQuery
説明
Tag name
p {}
$('p')
Webページ全体のラベルに有効
ID
#some-id {}
$('#some-id')
Webページでidを指定するのに有効です
Class
.some-class {}
$('.some-class')
Webページの同じクラス名に有効
次のメニューを見てください.
chapter02.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>chapter2-1</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="chapter02.js"></script>
<link rel="stylesheet" href="chapter02.css" type="text/css" />
</head>
<body>
<h1>Selected Shakespeare Plays</h1>
<ul id="selected-plays">
<li>Comedies
<ul>
<li><a href="/asyoulikeit">As You Like It</a></li>
<li>All's Well That Ends Well</li>
<li>A Midsummer Night's Dream</li>
<li>Twelfth Night</li>
</ul>
</li>
<li>Tragedies
<ul>
<li><a href="hamlet.pdf">Hamlet</a></li>
<li>Macbeth</li>
<li>Romeo and Juliet</li>
</ul>
</li>
<li>Histories
<ul>
<li>Henry IV (<a href="mailto:[email protected]">email</a>)</li>
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
<li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
<li>Richard II</li>
</ul>
</li>
</ul>
</body>
</html>
効果は次のとおりです.
Selected Shakespeare Plays
まず、彼を横の形に変えます.
次のCSSコードを追加します.
.horizontal {
float: left;
list-style: none;
margin: 10px;
}その後、jsにCSSサポートを追加
$('#selected-plays > li').addClass('horizontal');現在の効果は次のとおりです.
Selected Shakespeare Plays
Comedies
Tragedies
Histories
上のjQueryコードでは、新しい記号「>」!
この記号は、サブエレメントを表します.
$('#selected-plays > li')
id=「selected-plays」のサブエレメントli(tag name)、すなわちComedies、Tragedies、Histories行を指定します.
では、どのようにしてすべてのli要素(子要素、孫要素、重孫要素...^^)を選択することができますか?
$('#selected-plays li')
はい、あなたは間違っていません!「>」の代わりにスペースを使用すると完了します.
3つのサブエレメントを除くすべてのliエレメントの背景をグレーに設定したい.
CSS:
.sub-level {
background: #ccc;
}JS:
$('#selected-plays li:not(.horizontal)').addClass('sub-level');次のような効果が得られます.
Selected Shakespeare Plays
Comedies
As You Like It
All's Well That Ends Well
A Midsummer Night's Dream
Twelfth Night
Tragedies
Hamlet
Macbeth
Romeo and Juliet
Histories
Henry IV (email)
Part I
Part II
Henry V
Richard II
添付:
chapter02.css @charset "utf-8";
/* CSS Document */
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
.sub-level {
background: #ccc;
}
chapter02.js $(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
// add
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
});
@charset "utf-8";
/* CSS Document */
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
.sub-level {
background: #ccc;
}$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
// add
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
});