1. Jquery專案的好習慣
撰寫Jquery之前,必須先將Structure(ex.div....) 和 Style(CSS)給建立好。
這樣再寫Jquery時,才知道要抓取哪些元素。
2.點擊事件探究
p: 我們要選取之元素。
.click: 告訴js直譯器,當元素p被點擊時做某事。
function(): 將要做的事情放入裡面。
$("P").click(function(){
alert("Hello Melo");
});
3.用 Class or ID 來選擇網頁元素哪一個比較好?
Class : 在CSS中Class用來將原素分群並賦予共同樣式 , 在jquery中則用此方式來影響同一群元素。
ex.
<div class = "NBA"></div>
$(".NBA").click(function(){
alert("Hello Melo");
});
ID : ID selector被用來識別網頁上獨一無二之元素,當你想明確指名或是頁面上只有那一種元素時(例:頁首,尾),ID選擇器比較適合。
$("#ID_NAME").slideToggle("slow");
Example:
1.CSS檔案
div{
float:left;
border: solid #000 3px;
text-align:left;
}
.guess_box{
height:245px;
}
#header{
width:100%;
border: 0px;
height:50px;
}
#main{
background-color: gray;
height: 500px;
}
2.前端網頁
<!DOCTYPE html>
<html>
<head>
<link href="styles/my_style.css" rel="stylesheet">
<title></title>
</head>
<body>
<div id="header">
<h2>Jump for Joy Sale</h2>
</div>
<div id="main">
<div class="guess_box"><img src="images/jump1.jpg"/></div>
<div class="guess_box"><img src="images/jump2.jpg"/></div>
<div class="guess_box"><img src="images/jump3.jpg"/></div>
<div class="guess_box"><img src="images/jump4.jpg"/></div>
</div>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function () {
$(".guess_box").click(function(){
alert("hello melo");
});
});
</script>
</body>
</html>
4.使用Jquery變數
var pts = 250;
5.串接資訊
var msg = "High score: <strong>" + pts + "</strong>"
設定文字 or HTML時,使用 "" : "High score: <strong>"
變數不用雙引號 : pts
+ : 用+號串起
6.使用append在現有元素中加入訊息(會變成其子元素)
<p>hello!</p>
var myName = "Melo";
$("p").append("<strong>" myName "</strong>");
將會顯示: hello! Melo.
7. $(this)
$(this) : 是一選擇器,可以指向當前所選擇之元素。
可以把他想像成取決當前情境,隨著你在哪裡使用他而有所不同,使用他最佳地點在函式中。
$("#myImg").click(function(){
//在我們function中,當前元素為 : #myImg。 所以this就是指#myImg。
$(this).slideUp();
})
8. remove方法
remove方法可以將一個或是一組元素從網頁上移除。
$("#btn").click(function(){
$("li").remove();
}) ;
9.後代選擇器(descendant selector)
藉由後代選擇器,可以指定元素之間的關係,可以選擇元素的孩子,父親,祖先...。
$("div p") : 左為父親 空格 右為孩子
$("div div p") : 左為祖先 中為父親 右為孩子
$("div p#my_blurb ") : 找到div的孩子p且id為my_blurb
$("div p") : 抓取div元素下的所有p元素
$("div div") : 注意此為抓取父div(左邊)下所有子div
Example:
<!DOCTYPE html>
<html>
<head>
<link href="styles/my_style.css" rel="stylesheet">
<title></title>
</head>
<body>
<div id="header">
<h2>Jump for Joy Sale</h2>
</div>
<div id="main">
<div class="guess_box"><img src="images/jump1.jpg"/></div>
<div class="guess_box"><img src="images/jump2.jpg"/></div>
<div class="guess_box"><img src="images/jump3.jpg"/></div>
<div class="guess_box"><img src="images/jump4.jpg"/></div>
</div>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script>
//DOM載入
$(document).ready(function () {
//若class="guess_box"被點擊
$(".guess_box").click(function () {
//先將被點擊的guess_box下的h1給去除。
//h1:為之前user可能點擊過殘留的折扣資訊
$(".guess_box h1").remove();
//動態計算折扣
var discount = Math.floor(Math.random() * 5 + 5);
//將折扣資訊用h1包起來
var discount_msg = "<h1>Your discount is " + discount + "%</h1>";
//將目前被點擊到的<div class="guess_box">,加入用h1包起來的折扣資訊
//加入的這個h1會變成<div class="guess_box">的兒子
//所以remove這行才會這樣寫: $(".guess_box h1").remove();
//代表.guess_box的兒子h1
$(this).append(discount_msg);
});
});
</script>
</body>
</html>
留言列表
RWD (1)
