繁体   English   中英

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

[英]Just starting out using selectors in Javascript and I'm beyond confused. Would anybody mind reviewing and offering guidance?

我注册了一个在线 web 开发和设计 class ,我真的在为 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>"
    );

这是我第一次发帖,如有疏忽请见谅。 我很乐意修正任何错误,并接受建设性的批评。 只有从这里我可以 go 的地方是向上的。 先感谢您。

*<!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>

表中包含的唯一 class 是“最后一个”class。 到 select 元素与这个 class 你可以这样做:

$('.last') 

将 select 所有元素与 class 'last' 在您的页面上。 (在这种情况下仅存在于表中)。

$('table .last')

将 select 所有元素与 class 'last' 存在于您的页面上的表格中。

菜单项包含多个列表项,并具有“菜单”的 class。 对于 select,您可以使用:

$('.menu')

它将找到所有具有 class '菜单'的元素(在这种情况下只有一个)或更具体:

$('ul .menu')

它将找到所有具有 class '菜单'的 ul 元素。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM