開発環境
- 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. 2324)を解いてみる。
その他参考書籍
SHARPEN YOUR PENCIL(No. 2324)
HTML5(BBEdit, Emacs)
index2324.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_scripts2324.js"></script>
</body>
</html>
JavaScript(BBEdit, Emacs)
scripts/my_scripts2324.js
$(document).ready(function () {
var v = false;
$('button#veg_on').click(function () {
var $meat;
if (!v) {
// 1
$('.meat').after('<li class="tofu"><em>Tofu</em></li>');
// 2
$meat = $('.meat').detach();
v = true;
}
});
$('button#restore_me').click(function () {
if (v) {
v = false;
}
});
});
0 コメント:
コメントを投稿