JavaScript - jQuery Web Page Manipulation: Mod the DOM(remove method,detach method)

Head First jQuery
(O'Reilly Media)
Ryan Benedetti(著), Ronan Cranley(著)

開発環境

OS X Yosemite - Apple (OS)
Safari, Firefox, Google Chrome(Webプラウザ)
Emacs (CUI)、BBEdit - Bare Bones Software, Inc.(GUI) (Text Editor)
JavaScript (プログラミング言語)

Head First jQuery(Ryan Benedetti(著)、Ronan Cranley(著)、O'Reilly Media)のChapter 4(jQuery Web Page Manipulation: Mod the DOM)、SHARPEN YOUR PENCIL(No. 2056)を解いてみる。

その他参考書籍

SHARPEN YOUR PENCIL(No. 2056)

HTML5(BBEdit, Emacs)

index2005.html

<!doctype html>
<html>
  <head>    
  </head>  
  <body>
    <div class="topper">
      <h2>Our Menu</h2>
      <nav>
        <ul>
          <li class="nav"><button id="veg_on">Go vegetarian</button></li>
          <li class="nav"><button id="restore_me">Restore Menu</button></li>
        </ul>
      </nav>
    </div>
    <section id="menu_wrapper">
      <div class="left_col">
        <h4>Dinner Entrees</h4>
        <ul class="menu_entrees">
          <li>Thai-style Halibut
            <ul class="menu_list">
              <li>coconut milk</li>
              <li class="fish">pan-fried halibut</li>
              <li>lemongrass broth</li>
              <li>vegetables</li>
              <li>Thai spices</li>
            </ul>
          </li>
          <li>Braised Delight
            <ul class="menu_list">
              <li class="meat">lamb shoulder</li>
              <li>cippolini onions</li>
              <li>carrots</li>
              <li>baby turnip</li>
              <li>braising jus</li>
            </ul>
          </li>
          <li>House Grilled Panini
            <ul class="menu_list">
              <li class="meat">prosciutto</li>
              <li>provolone</li>
              <li>avocado</li>
              <li>cherry tomatoes</li>
              <li>sourdough roll</li>
              <li>shoestring fries</li>
            </ul>
          </li>
          <li>House Slider
            <ul class="menu_list">
              <li>eggplant</li>
              <li>zucchini</li>
              <li class="hamburger">hamburger</li>
              <li>balsamic vinegar</li>
              <li>onion</li>
              <li>carrots</li>
              <li>multigrain roll</li>
              <li>goat cheese</li>
            </ul>
          </li>
          <li>Frittata
            <ul class="menu_list">
              <li class="meat">eggs</li>
              <li>Asiago cheese</li>
              <li>potatoes</li>
            </ul>
          </li>
          <li>Coconut Soup
            <ul class="menu_list">
              <li>coconut milk</li>
              <li class="meat">chicken</li>
              <li>vegetable broth</li>
            </ul>
          </li>
          <li>Soup Du Jour
            <ul class="menu_list">
              <li class="meat">grilled steak</li>
              <li>mushrooms</li>
              <li>vegetables</li>
              <li>vegetable broth</li>
            </ul>
          </li>
          <li>Hot and Sour Soup
            <ul class="menu_list">
              <li class="meat">roasted pork</li>
              <li>carrots</li>
              <li>Chinese mushrooms</li>
              <li>chili</li>
              <li>vegetable broth</li>
            </ul>
          </li>
          <li>Avocado Rolls
            <ul class="menu_list">
              <li>avocado</li>
              <li>whole chiles</li>
              <li>sweet red peppers</li>
              <li>ginger sauce</li>
            </ul>
          </li>
        </ul>
      </div>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="scripts/my_scripts2056.js"></script>
  </body>
</html>

JavaScript(BBEdit, Emacs)

scripts/my_scripts2056.js

$(document).ready(function () {
    var v = false;

    $('button#veg_on').click(function () {
        if (!v) {
            $('#top').remove();
            $('#news_story p').detach();            
            $('ul.menu_entrees li ul.menu_list li.fish').detach();
            v = true;
        }
    });
    $('button#restore_me').click(function () {
        if (v) {
            v = false;
        }
    });
});

index2056.html

Kamimura's blog

2015年2月2日月曜日

JavaScript - jQuery Web Page Manipulation: Mod the DOM(remove method,detach method)

0 コメント:

コメントを投稿