1.將原素從DOM中移除
Jquery 提供兩種方式將原素從DOM中移除,分別為:Remove(移除),Detach(解除)
note:差別在於,remove方法將element永遠移除,detach從DOM中拿走但是先幫你保留,可以在附加回去。
Remove: $("img#thumbnail").remove();
Detach: $("img#thumbnail").detach();
下圖:
$("div#top").remove() : 注意對元素執行remove or detach時,該元素的所有子元素也會被移除or解除。
$("div p").detach() : 選擇器(selector)所比對出來,所有符合之元素都會被解除。
$("li.fish").detach() : 元素以class分群 or ID設定時,可以更明確選取你要的元素。
2.DOM Traversal(穿梭)
A. 爬向父節點: $(".fish").parent() , 選取所有fish類別之元素,取得這些元素之上層元素。
B. 爬向子元素: $(".menu_list").children() , 選取所有menu_list類別之元素,取得這些元素之下層元素。
C.爬向同一層且位於左邊(前一個)之元素: $(".fish").prev()
D.爬向同一層且位於右邊(後一個)之元素: $(".fish").next()
note: 可以以鏈(chain)之方式爬行於DOM,簡單的說就是對上述做不同搭配。
ex. $(".fish").parent().next().remove();
3.使用變數(陣列)儲存抓取到的元素
下圖使用 : $(".fish").parent().parent().deatch(); 可以抓取到一串 li 。
我們用來儲存回傳之元素的變數之前會加一個$,這樣的話其他程式設計師也都會知道,我們正在儲存回傳之元素。
$f = $(".fish").parent().parent().deatch();
可以把 $f 想像成是一個陣列。
上面抓的3個li,可以分別用$f[0],$f[1],$f[2] 取出。
4.使用replaceWith 替換元素
此方法利用新的元素替代被選擇之元素。
如下圖:想將漢堡替換成甜甜圈。
$(".hamburger").replaceWith("<li class = 'portobello'><em>Portobello Mushroom</em></li>")
.hamburger : 選擇所有漢堡元素
replaceWith : 此方法動態將 () 中內容替代到你選擇之內容,重點是你可以在 () 中放入html。
note: replaceWith並非是何所有狀況,下圖說明。
1.若是1對1的交換取代元素,repalceWith非常適合,因為我們還可以記住是跟哪個DOM交換。
2.若是一對多的交換,用豆腐換其他肉類,在換回來的時候只能把所有肉類換到豆腐,已經忘記當初對應到是哪種肉類了。
5.將HTML內容插入到DOM
A. before : 在被選擇的元素之前插入內容。
$('.meat').before("<li>Tofu</li>");
B. after : 在被選擇之元素之後插入內容。
$('.meat').after("<li>Tofu</li>");
6.使用過濾方法縮小你的選擇
first : 此方法過濾掉一組被選擇之元素,只留下第一個元素。
eq : 此方法過濾掉一組被選擇之元素,只留下放在()內對應索引值之元素。
last : 此方法過濾掉一組被選擇之元素,只留下最後一個元素。
範例如下圖:
第二部分:
slice : 只留下()中第一個索引值(包含)到第二個索引值(不包含)之元素。(注意第一個索引值是0)
fliter : 只留下你放在()中之元素。
not : 只留下不符合你放在()中之元素。
7.each方法遶行陣列
我們將所有肉的meat元素放入$m中,記住$m是一個陣列。
接著我們要將肉元素陣列倒回去豆腐陣列中。
$(".tofu").each(function(i){
$(this).after($m[i])
});
$(".tofu") : 選擇要被替換之元素。
.each : 一個一個處理陣列元素。
function(i) : 從0開始隨著每個元素被處理之同時遞增。// i 就是 index
$(this) : 告訴你目前處理到哪個元素。
after : 可以替換為任何你想做的方法。
Example:
1.HTML
<!DOCTYPE html>
<html>
<head>
<title>Our Menu</title>
<link type="text/css" href="styles/my_style.css" rel="stylesheet" />
</head>
<body>
<div class="menu_wrapper">
<header class="topper">
<h2>Our Menu</h2>
<nav>
<button id="vegOn">Go Vegetarian</button>
<button id="restoreMe">Restore Menu</button>
</nav>
</header>
<div class="left_col">
<h4>Dinner Entrees</h4>
<ul class="menu_entrees">
<li>Poached Salmon
<ul class="menu_list">
<li class="fish">salmon</li>
<li>white wine</li>
<li>salt</li>
<li>black pepper </li>
</ul>
</li>
<li>Roasted Trout
<ul class="menu_list">
<li class="fish">grilled trout</li>
<li>mint</li>
<li>capers</li>
<li>olives</li>
<li>tomato</li>
<li>lemon</li>
<li>olive oil</li>
<li>potatoes </li>
</ul>
</li>
<li>Thai-style Halibut
<ul class="menu_list">
<li>coconut milk</li>
<li class="fish">pan-fried halibut</li>
<li>lemongrass broth</li>
<li>early autumn vegetables</li>
<li>Thai spices </li>
</ul>
</li>
<li>Braised Delight
<ul class="menu_list">
<li class="meat">lamb shoulder</li>
<li class="veg_leaf">cipolinni onions</li>
<li>carrots</li>
<li>baby turnip</li>
<li>roasted red grapes</li>
<li>braising jus</li>
</ul>
</li>
<li>House Grilled Panini
<ul class="menu_list">
<li class="meat">proscuttio</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>marinated eggplant</li>
<li>zucchini</li>
<li class="hamburger">hamburger</li>
<li>balsamic vinaigrette</li>
<li>onion</li>
<li>carrots</li>
<li>Multi-grain roll</li>
<li>goat cheese</li>
</ul>
</li>
<li>Southwest Slider
<ul class="menu_list">
<li>whole chiles</li>
<li class="hamburger">hamburger</li>
<li>pepperjack cheese</li>
<li>onion</li>
<li>carrots</li>
<li>sliced avocado</li>
<li>Multi-grain roll</li>
</ul>
</li>
<li>Frittata
<ul class="menu_list">
<li class="meat">eggs</li>
<li>asiago, provolone, and romano cheeses</li>
<li>potatoes </li>
</ul>
</li>
</ul>
</div>
<div class="right_col">
<h4>Soups and Sides</h4>
<ul class="menu_entrees">
<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>seasonal 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>Stuffed Baked Potato
<ul class="menu_list">
<li>potato</li>
<li class="meat">charbroiled or blackened chicken</li>
<li>seasonal veggies</li>
<li>cheddar & jack cheese</li>
<li>creamy alfredo sauce</li>
</ul>
</li>
<li>Avocado Rolls
<ul class="menu_list">
<li> Avocado</li>
<li>Whole chiles</li>
<li>Sweet red peppers</li>
<li>Ginger dipping sauce</li>
</ul>
</li>
<li>Roasted Artichoke Hearts
<ul class="menu_list">
<li>Artichoke hearts</li>
<li>Balsamic vinegar</li>
<li>Steamed garlic</li>
</ul>
</li>
<li>Garlic Broccoli
<ul class="menu_list">
<li>Stir Fried Broccoli</li>
<li>Carrots</li>
<li>Onions</li>
<li>Garlic Sauce </li>
</ul>
</li>
<li>Stir-Fried Garlic Vegetables
<ul class="menu_list">
<li>Stir Fried Mixed Vegetables</li>
<li>Mushrooms</li>
<li>Carrots</li>
<li>Onions</li>
<li>Garlic </li>
</ul>
</li>
<li>Garlic Green Beans with Mushrooms
<ul class="menu_list">
<li>Stir Fried Green Beans</li>
<li>Carrots</li>
<li>Onions</li>
<li>Mushrooms </li>
</ul>
</li>
</ul>
</div>
<footer class="bottom">
<h5>Address</h5>
</footer>
</div>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/my_scripts.js"></script>
</body>
</html>
2.Jquery
$(document).ready(function(){
var v = false;
var $f, $m;
//按下按鈕切換成素食
$("button#vegOn").click(function(){
//若素食flag為false
if (v == false){
//fish類別往上爬兩層,會是li將其解除,並存放於$f這個陣列中
$f = $(".fish").parent().parent().detach();
//用"<li class='portobello'><em>Portobello Mushroom</em></li>"去取代漢堡類別
//會用replaceWith是因為漢堡和Portobello都是單一元素所以可以一對一換
$(".hamburger").replaceWith("<li class='portobello'><em>Portobello Mushroom</em></li>");
//portobello類別往上爬兩層,再利用.addClass加上名為veg_leaf之CSS樣式(葉子圖片)
$(".portobello").parent().parent().addClass("veg_leaf");
//以下三行目的為將豆腐類別取代肉類別
//先再肉類別後面插入豆腐類別,下一行保肉類別解除後,豆腐類別自然會取而代之顯示
$(".meat").after("<li class='tofu'><em>Tofu</em></li>");
//將肉類別給解除,並且放入$m陣列中保存
$m = $(".meat").detach();
//豆腐類別往上爬兩層,再利用.addClass加上名為veg_leaf之CSS樣式(葉子圖片)
$(".tofu").parent().parent().addClass("veg_leaf");
//將素食flag改true
v = true;
}// end if
});//end veg button
//按下按鈕切換回肉類
$("button#restoreMe").click(function(){
//如果判斷目前為素食菜單
if (v == true){
//portobello類別往上爬兩層,並且移除葉子圖片
$(".portobello").parent().parent().removeClass("veg_leaf");
//用漢堡類別取代portobello
$(".portobello").replaceWith("<li class='hamburger'>Hamburger</li>");
//到menu_entrees 下一層的li,再移到第一個元素的後面插入上面$f(fish)陣列內容
$(".menu_entrees li").first().before($f);
//移除葉子
$(".tofu").parent().parent().removeClass("veg_leaf");
//用each方法繞行豆腐類別,$(this)代表目前執行到豆腐哪一個元素,在其後方插入肉類類別
$(".tofu").each( function(i){
$(this).after($m[i]);
}); //end each
//將豆腐類別給移除
$(".tofu").remove();
//將素食給tag給改掉
v = false;
}//end if
});//end restoreMe button
});//end doc ready
3.CSS
.menu_wrapper{
width: 96%;
border: 1px solid gray;
}
.topper{
padding: 2%;
width: 96%;
height: 100px;
overflow: hidden;
border-bottom: 1px solid gray;
}
.left_col{
float: left;
padding: 4%;
width: 41%;
height: 1000px;
border-right: 1px solid gray;
}
.right_col{
float: right;
padding: 4%;
width: 41%;
height: 1000px;
border-left: 1px solid gray;
}
.bottom{
clear:both;
padding: 2%;
width: 96%;
height: 60px;
border-top: 1px solid gray;
}
.nav{
text-align: right;
float: right;
list-style: none;
padding-left: 15px;
}
.menu_entrees li{
list-style-type: none;
padding-left: 10px;
}
.menu_list{
padding-bottom: 15px;
}
.menu_list li{
display: inline;
list-style-type: none;
padding-left: 15px;
}
.meat{
background-color: "#000000";
}
.hamburger{
color: "#000000";
}
.fish{
color: "#000000";
}
.tofu{
color: "#00FF00";
}
.portobello{
color: "#00FF00";
}
.veg_leaf{
list-style-image:url('../images/leaf.png');
}
留言列表
RWD (1)
