無景

  #JQuery好用事件  

@ 匿名函式

假設你的網站有50張圖,而你下了以下的JavaScript code

$ ( ' img ' ). each( function () {

alter('有一張圖片');

});

這樣就會跳出50個緊告視窗。

 

this 和 $ ( this )

this會指向正在呼叫的元件 , 在第二個迴圈裡 this會指像第二組元件

 

 

@ 引述功能 :　在網頁內文中擷取一些需要特別引述的有關文字，並放入一個方框裡面。

 

1. 找出所有class名稱被特別為pq的<span>標籤 (把你想要的被引述的文字用span包起來)

<span id="pq" > 希望被引述的文字 </span>

2.複製剛找到的每一組<span>標籤

3.移除<span>複本的class屬性值pq,並新增一組class屬性值pullquote

4.將<span>複本加進網頁裡

以下為code :

<script src ="../_js/jquery-1.6.3.min.js"> <script>

<script>

$(document).ready( function ( ) {

$ ('span.pq') . each (function ( ) {

//複本

var quote = $(this).clone() ;  //clone函式會複製目前的網頁元件,並同式複製這組元件的HTML Code

quote.removeClass('pq');

quote.addClass('pullquote');

$ (' this ').before(quote);

}); //end each

}); //end ready

</script>

@滑鼠的點擊

1. dbclick            -- 雙擊
2. mousedown --按下滑鼠
3. mouseup       --放開滑鼠
4. mouseover    --滑鼠遊標移動到目標元件上
5. mouseout      --滑鼠遊標移走
6. mousemove --滑鼠一移動就可以觸發 (追蹤到滑鼠目前在電腦螢幕上的位子)

@網頁/視窗事件

1. load      --在網頁瀏覽器下載完所有的網頁檔案
2. resize   --當按下「視窗最大化」，或拖曳瀏覽器視窗大小調整時會觸發resize事件(IE.Opera.safari會不斷觸發，只有firefox會在調整完視窗大小放開滑鼠                  時觸發)
3. scroll    --當你拖曳捲動軸或利用鍵盤(上.下.home.end或其它類似功能)都會出發scroll事件
4. unload --當你選某個連結進入他網或是關閉瀏覽頁籤.關閉瀏覽程式都會出發unload事件(類似交代遺言)

@表單事件

1. submit   -- 每當訪客交出表單,會觸發submit事件
2. reset      -- 重設紐可以讓你還原所有被修改過的表單資料
3. change -- 表單欄位會在狀態改變時觸發change事件
4. focus     -- 當你用tab或滑鼠鍵點選文字輸入欄位,就會觸發focus事件
5. blur        -- 與focus事件為相反概念。他會在你離開一個原先被選中的欄位時被觸發

@鍵盤事件

1. keypress  -- 當你壓下某個按鍵,還沒放開前就會觸發keypress事件。只要你一直壓著按鍵就會不段的觸發
2. keydown  -- 和keypress事件一樣。當你壓下按鍵時被出發,而且他會比keypress先觸發(firefox/Opera keydown只會觸發一次;IE/safair會和Keypress一樣)
3. keyup       -- 當你放開按鈕時就會被觸發

<JQuery事件運用>

1.選取好物件 (一或多個元件)

2.設定事件

3.將函式傳入事件中

ex：ID="menu"的連結。你希望當訪客把滑鼠標移到這連結上時會顯示一個原先處於隱藏狀態的連結(ID="submenu")

$( ' #menu ' )  //選取好物件 (一或多個元件)

$( ' #menu' ).mouseover();   //設定事件

$ ( ' #menu ').mouseover(function () {

//code    //設定匿名函式

} ) ; 

$ ( ' #menu ').mouseover(function () {

$( ' submit ' ).show(); //要處理的事情

} ) ; 

------------------------------------------------------------

#JQuery範例

JQuery好用事件

hover() : mouseover/mouseout兩件事件結合

$ ( ' #selector' ).hover( function1 , founction2 ); //function1--是游標移到元件上，function2--游標移出元件

Ex: menu 匿名函式

$ ( '#menu' ).hover (

function () {

$ ( 'submenu' ).show();

} , //end mouseover

function() {

$ ( 'submenu' ).hide();

} //end mouseout

);

or

使用命名函式

function showSubmenu() {

$('#submenu') .show(); }

function hideSubmenu () {

$( '#submenu' ).hide(); }

$('#menu').hover(showSubmenu , hideSubmenu);

toggle()  : 和hover相似 但他是以點擊為觸發 。可以接受兩個以上的函式，假設你傳入三個函式，點擊第四次將會觸發第一個函式！

 

事件事件

$ (document).click ( function (evt) ) {

var xPos = evt.pageX;

var yPos = evt.pageY;

alert( ' X : ' + xPos + ' Y : yPos');

}); //end click

備注:evt可自行命名

事件屬性

pageX (滑鼠游標目前距離瀏覽器左邊的距離)

pageY (滑鼠游標目前距離瀏覽器上緣的距離)

screenX (滑鼠游標目前距離螢幕左邊的距離)

screenY (滑鼠游標目前距離螢幕上緣的距離)

which (搭配keypress事件使用,可以取得目前按下鍵盤件的數字代碼  數字代碼轉真正被按下的鍵盤按鈕Foucion string.fromCharCode(evt.which) ) 

target (事件的[目標] 如: click()為例子,目標就是被點擊的元件) 

data (和bind()函式搭配使用的JQuery物件,會利用他傳遞資料給事件處理函式)

中止事件

 

___________________________________________________________________________________________

範例一 : 有人雙擊網頁任何地方，就會出現警告視窗 / 將滑鼠遊標移到網頁的連結上時會觸發事件在後面增加一串文字 / 當訪客點擊表單按鈕,瀏覽器就為修改按鈕理的文字

<script src="../_js/jquery-1.6.3.min.js"></script>

<script>

$ (document).ready (function () {

$ ('html'). dblclick( function ( ) {

alert('你雙擊囉!');

}); //end double click

$ ( 'a' ).mouseover ( function () {

var message = "<p> you can click here to other page</p>";

$ ('.main').append(message);

}); // end mouseover

$( '#button' ).click(function (){

$(this).val("stop that!");

}); // end click

}); //end ready

</script>

備註:

$( 'html' ) //選取HTML元件，也就是整個瀏覽器視窗。