1.事件偵聽器(event listener)
step1:user 點下按鈕,觸法點擊事件
step2:event listener偵測到事件,將他傳給JS直譯器
step3:JS直譯器去理解每個事件需要做些什麼
step4:執行並改變畫面程式碼
note: event listener是DOM的一部分。
2.為元素添加事件
當我們為元素添加事件時,必須將事件繫結(BIND)到元素,如此一來JS直譯器才知道要呼叫什麼函式。
有兩種方式可以繫結。
法1.(簡便方式)
$("#myElement").click(function(){
alert($(this).text());
});
法2.(正規)
$("myElement").bind( 'click' , function(){
alert($(this).text());
})
note:最好都用正規方式,因為法1只能用在dom已經存在之情形下。
選擇器$("myElement")+ 事件 'click' + 函式 function() = 複雜的互動
3.移除事件
想把事件從元素移除。
例如不想要人們在頁面上只做某事一次,在事件被繫結後,我們就可以把該事件從該元素拿走,所以不會被觸發。
ex.移除一個事件
$("myElement").bind( 'click' , function(){
alert($(this).text());
})
//unbind命令告訴瀏覽器,不要再為這個元素偵聽特定事件。
$("myElement").unbind('click');
ex.移除全部事件
$("myElement").bind( 'focus' , function(){
alert($(this).text());
})
$("myElement").bind( 'click' , function(){
alert($(this).text());
})
//unbind命令告訴瀏覽器,不要再為myElement元素偵聽特定事件。
$("myElement").unbind();
4.遶行每個元素: .each()
$(".nav_item").each(function(){
$(this).hide();
})
會以遶行方式,選擇符合選擇器的每個元素,符合的都執行hide();
//each 相當於for each
//在each 中 要達到如同for each 的 break , continue
//return true = continue跳回判斷式重新判斷一次
//return fasle = break直接跳離each迴圈
(參考下面大範例有)
5.建立函式
函式是程式碼區塊,可以與程式碼其他部分分開,你可以在指令搞其他地方執行他。
Jquery提供許多函式,但是我們也可以建立自己得函式。
函式宣告方式分為下列兩種:
1.匿名函式(因為沒任何名稱,所以其他程式碼並沒有辦法呼叫他,所以要用就要重寫一次)
$(".guess_box").click(function(){
xxxx;
});
2.具名函式(呼叫具名函式有以下兩種方式)
A.函式宣告
function myFunc1()
{
$("div").hide();
}
呼叫方法:
myFunc1();
B.函式表達式
var myFunc2 = function()
{
$("div").show();
}
呼叫方法:
$("myElement").click(myFunc2);
//呼叫函式不需要()
//myElement為某一元素點下後會呼叫myFunc2
6.傳遞變數給函式與函式回傳值
傳遞變數給函式:
function(name)
{
alert("hello"+name);
}
函式回傳值:
function multiple(num1,num2)
{
var myResult = num1 * num2;
result myResult;
}
note:
1.可傳任何東西函式(物件,變數.....),甚至傳的東西超過函數可接受的參數還要多,多出來的參數會被忽略。
2.傳的參數給的太少剩下的參數會被設定為undefined。
3.Jquery靜態方法: 就是Jquery函式庫中的函式,不需要任何選擇器就可以直接呼叫他,只需要$()即可呼叫。
7.Jquery方法可以改變CSS
Jquery提供給簡單的方法,讓我們可以給網頁任何元素添加CSS類別與移除CSS類別。
(可以看以下範例)
Example:
1.前端
<!--Jqueyr 事件與函式-->
<!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>
<span id="result"></span>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/my_scripts.js"></script>
</div>
<>
</body>
</html>
2.Script
//類似 page load
$(document).ready(function () {
//call 有多少折扣的方法
$(".guess_box").click(checkForCode);
//取得隨機折扣
function getRandom(num) {
var my_num = Math.floor(Math.random() * num);
return my_num;
}
var hideCode = function houdini() {
//傳回1到4
var numRand = getRandom(4);
//index是4個.guess_box
$(".guess_box").each(function (index) {
//如果你按下的.guess_box等於回傳的numRand,就會有折扣
if (numRand == index) {
//將折扣資訊加入你按下的div後面
$(this).append("<span id='has_discount'></span>");
//each 相當於for each
//在each 中 要達到如同for each的break,continue
//return true = continue跳回判斷式重新判斷一次
//return fasle = break直接跳離each迴圈
return false;
}
});
}
hideCode();
function checkForCode() {
var discount;
//如果當前元素(this)有has_discount
if ($.contains(this, document.getElementById("has_discount"))) {
//就去取得折扣
var my_num = getRandom(100);
discount = "<p>Your Code: CODE" + my_num + "</p>";
}
//如果當前元素沒有has_discount,就是沒有折扣
else {
discount = "<hr>Sorry, no discount this time!";
}
//對所有的.guess_box進行遶行
$(".guess_box").each(function () {
//如果有has_discount,就幫他加入css檔中的discount樣式
if ($.contains(this, document.getElementById("has_discount"))) {
$(this).addClass("discount");
}
//,如果有沒有has_discount,就幫他加入css檔中的no_discount樣式
else {
$(this).addClass("no_discount");
}
//加完後不在為所有guess_box監聽
$(this).unbind();
});
//加在span後,是一段折扣資訊,此span用來顯示折扣資訊
$("#result").append(discount);
} // end fro checkForCode()
//Jquery替element增加CSS class,滑鼠移到div上增加的css樣式
$(".guess_box").hover(
function () {
//替選到的元素增加,style中的css名為my_hover樣式
$(this).addClass("my_hover");
},
function () {
$(this).removeClass("my_hover");
});
});
留言列表
RWD (1)
