刚开始使用Javascript中的选择器,我感到非常困惑。有人介意审查和提供指导吗?



我报名参加了一个在线web开发和设计课程,我真的很难使用jQuery。有人介意看看这个并帮忙吗?如果有道理的话,我是那种倒着工作做得更好的人。如果我能看到最终的结果,我就更容易弄清楚它是如何完成的,然后下次继续前进。以下是问题,我将在下面发布我应该从中提取的代码来回答它们:

// Q2: Select a class that is contained within a table.
$("#q2").after(
"<p>"+$(/*INSERT SELECTOR FOR Q2 HERE*/).text()+"</p>"
);

// Q5: Select a class for an element that contains multiple list items.
$("#q5").after(
"<p>"+$(/*INSERT SELECTOR FOR Q5 HERE*/).text()+"</p>"
);

这是我第一次发帖,所以如果太草率,我深表歉意。我很乐意纠正任何错误,并接受建设性的批评。我唯一能去的地方是上面。提前谢谢。

*<!DOCTYPE html>
<html lang="en">
<head>
<title>The Roasted Bean</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="styles/site.css"/>
<script src="scripts/jquery-3.2.1.min.js"></script>
<script src="scripts/selector.js"></script>
</head>
<body>
<header>
<div class="logo">
<a class="top" href="index.html"><img alt="Coffee Logo" src="images/coffee-logo.png"/></a>
<a href="index.html"><span class="top">The Roasted Bean</span></a>
</div>
<nav>
<ul>
<li class="top" id="current_page"><a>Home</a></li>
<li class="top"><a>Locations</a></li>
<li class="top"><a>Hours of Operation</a></li>
<li class="top"><a>About Us</a></li>
</ul>
</nav>
<h1>Home of the Best Coffee in Ithaca</h1>
</header>*
<main>
<p>
Welcome to the Roasted Bean! We are proud to be known as <strong>Home of the Best Coffee in Ithaca</strong> for the last 5 years.
</p>
<hr>
<h2>Hours of Operation</h2>
<table>
<tr>
<th>Sunday</th>
<td>11:00 AM - 9:30 PM</td>
</tr>
<tr>
<th>Monday</th>
<td>8:00 AM - 9:30 PM</td>
</tr>
<tr>
<th>Tuesday</th>
<td>8:00 AM - 9:30 PM</td>
</tr>
<tr>
<th>Wednesday</th>
<td>8:30 AM - 9:30 PM</td>
</tr>
<tr>
<th>Thursday</th>
<td>8:00 AM - 9:30 PM</td>
</tr>
<tr>
<th>Friday</th>
<td>8:00 AM - 11:30 PM</td>
</tr>
<tr class="last">
<th>Saturday</th>
<td>10:00 AM - 11:30 PM</td>
</tr>
</table>
<p>
As a family run and owned business, we may have unplanned closures due to weather or sudden occurences. We will do our best to inform our customers as soon as possible. Planned holiday closures will also be posted on our social media sites.
</p>
<img class="espresso" src="images/coffee2.jpg" alt="espresso"/>
<p>
The Roasted Bean started as a small coffee shop with a menu of only two items, coffee and cinnamon buns. After learning under the masters at the International Coffee Shop, John Doe Sr. was confident in his ability to brew coffee. Jane Doe's cinnamon buns, made from a secret family recipe, in tandem with the coffee, grew to be a favorite among locals and coffee afficionados.
Following in his parents' footsteps, John Jr. inherited the business in 2014 and has since grown the Roasted Bean to build a second location and to gain state-wide recognition. With the emergence of social media, the Roasted Bean started to attract visitors from outside the area as well. Despite popular attention the Roasted Bean strives to preserve the same great flavors as when it still opened and stay number one to the locals.
</p>
<h3>Menu</h3>
<ul class="menu">
<li>Our Famous Blend Coffee</li>
<li>Expresso</li>
<li>Latte</li>
<li>Cappucino</li>
</ul>
<figure>
<img src="images/coffee.jpg" alt="coffee"/>
<figcaption>A cup of our Famous Blend</figcaption>
</figure>
</main>
<footer>
<p>Copyright 2018 The Roasted Bean</p>
</footer>
</body>
</html>

表中唯一包含的类是"last"类。要选择具有此类的元素,您可以执行以下操作:

$('.last') 

将选择页面上类为"last"的所有元素。(在这种情况下,它只存在于表中(。

$('table .last')

将选择页面上表中存在的类为"last"的所有元素。

菜单项包含多个列表项,并且具有一个类"menu"。要选择此选项,您可以使用:

$('.menu')

它将找到类"menu"的所有元素(在这种情况下只有一个(或者更具体地说:

$('ul .menu')

它将查找所有具有类"menu"的ul元素。

最新更新