PHP 業餘玩家: 偷學ㄧ招 JQuery

/*在 <body>...</body> 內放置超連結 a 元素和一個 id 為 mytext 的 div 元素*/
<a href="http://www.google.com.tw/" id="link">Google</a>
<div id="mytext"></div>
/*在 <head>...</head> 內加入下列 script*/
<script type="text/javascript">
/* 建立 onload 事件 */
$(function(){
/* 建立 id 為 link 元素的 mouseover 滑鼠移入事件 */
$("#link").mouseover(function(){
/* 將 id 為 mytext 元素的 inline 內容改為 link 元素的 inline 文字 */
$("#mytext").html($("#link").html());
});
/* 建立 id 為 link 元素的 mouseout 滑鼠移出事件 */
$("#link").mouseout(function(){
/* 將 id 為 mytext 元素的 inline 內容清空 */
$("#mytext").html("OOKK");
});
});
</script>

頁面讀取完成即聚焦於第一個表單元件，並加入聚焦提示。送出時驗證是否都有填寫資料，若無則浮現提示文字，表單送出後將 submit 按鈕停用。

<form action="javascript:void(0);" id="form1">
<div>
<label for="uname">姓名：</label>
<input type="text" name="uname" id="uname" class="input" />
<span id="name_msg" class="msg"></span>
</div>
<div>
<label for="pwd">密碼：</label>
<input type="password" name="pwd" id="pwd" class="input" />
<span id="pwd_msg" class="msg"></span>
</div>
<p><input type="submit" /></p>
</form>

Javascript 源碼

/* 頁面 onload 事件 */
$(function(){
/* 定義 boolean 變數，記錄是否驗證成功 */
var flag = false;
/* 加入 input 類型為 text, password 元件的聚焦事件 */
$(":text, :password").focus(function(){
/* 將這些物件聚焦時的 css 設為 1 像素的黑色邊框，底色為淡黃色 */
$(this).css({border: "1px solid #000", background: "#ffea45"});
});
/* 加入 input 類型為 text, password 元件的失焦事件 */
$(":text, :password").blur(function(){
/* 將這些物件失焦時的 css 設為 1 像素的灰色邊框，底色為白色 */
$(this).css({border: "1px solid #ccc", background: "#fff"});
});
/* 表單送出事件加入 submit 按鈕停用 */
$("form").submit(function(){
/* 驗證表單內命名為 uname 的元件是否有值，若無則顯示提示文字。
※這邊使用了 jQuery 的串接特色
※find 為尋找元素的函式 */
if($(this).find("input[@name=uname]").val() == ""){
$("#name_msg").html("請輸入姓名").css("color", "#f00").fadeIn();
flag = false;
}else{
$("#name_msg").hide();
flag = true;
}
/* 驗證表單內命名為 pwd 的元件是否有值，若無則顯示提示文字 */
if($(this).find("input[@name=pwd]").val() == ""){
$("#pwd_msg").html("請輸入密碼").css("color", "#f00").fadeIn();
flag = false;
}else{
$("#pwd_msg").hide();
flag = true;
}
/* 若驗證通過則停用 submit 按鈕，反之則取消送出 */
if(flag)
$(":submit").attr("disabled", "true");
else
return false;
});
/* 選擇第一個 input 元件，並加入聚焦（focus）事件 */
$("input:first").focus();
})

JQuery 在網頁執行的時候
會load一次JQuery 的function

但是如果用ajax時，因為第一次抓的時候，並沒有抓到ajax的頁面
所以當用ajax並更出來的頁面，就不會執行JQuery function的指令。
jQuery.ajaxComplete(function(){//你要做的事});

寫給設計人的10個jQuery特效

http://easonyo.pixnet.net/blog/post/22888002

15天學會jQuery (11-15)

http://easonyo.pixnet.net/blog/post/22802674

2008年12月12日 星期五

偷學ㄧ招 JQuery

2008年12月12日星期五