$("li")這個動作會選取所有的li標籤，改也是大家一起改
如果有時只是要特定的("li")選取的話，必須指定id或class
| CSS | jQuery | |
| 標籤 | p{} | $("p"); |
| id | #container{} | $("#container"); |
| class | .articless | $(".articles"); |
開始使用jQuery
1.官網上下載
2.load in your HTML
<script src="jquery.min.js"></script>
3.start using it
<script src="application.js"></script>
--------------------------------------------------------------------------------
課堂練習
html
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="homepage-wrapper">
<h2>Welcome to jQuery Travels - Traversing the DOM since 2006</h2>
<p>Fly to New York today for as little as <span>$299.99</span></p>
</div>
</body>
</html>
Q1:在上述HTML插入jquery.min.js
A1:
<script src="jquery.min.js"></script>
</body>
Q2: 在上述HTML插入jquery.min.js
A2:
<script src="jquery.min.js"></script>
<script src="application.js"></script>
</body>
html
<div id="vacations-wrapper">
<h1>Vacation Packages</h1>
<ul id="vacations">
<li class="vacation america">
<correct><h2>San Francisco, California</h2></correct>
<span class="details">$700</span>
</li>
<li class="vacation america">
<correct><h2>Washington DC, District of Columbia</h2></correct>
<span class="details">$400</span>
</li>
<li class="vacation europe">
<correct><h2>London, England</h2></correct>
<span class="details">$1,100</span>
</li>
<li class="vacation asia">
<correct><h2>Shanghai, China</h2></correct>
<span class="details">$1,200</span>
</li>
</ul>
<ul class="sorting">
<li><a href="#">America</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Asia</a></li>
</ul>
</div>
Q3: 選出vacation title
A3: $("h2")
Q4:用ID selector選出vacation內容
A4:$("#vacations");
Q5:用Class selector選出.america
A5:$(".america")
留言列表
