如何為你的 jQuery 程式除錯

如何為你的 jQuery 程式除錯

http://msdn.microsoft.com/zh-tw/scriptjunkie/ee819093.aspx

解決jquery.blockUI v2 在IE6會出現安全性警告的問題

以下針對jquery.blockUI v2.16的版本做修改。

因為jquery.blockUI在MSIE的處理上, 為了避免下拉選單的破洞問題, 使用了iframe做層級的處理
但因為ie6針對iframe的src若沒有設定值的話, 會有安全性的警告跑出來, 很惱人

以下為修改方式:

1. 做一個空白的頁面, 命名為blank.html, 放在根目錄
2. 修改jquery.blockUI.js 第187行, 把iframe的src屬性, 由src='about:blank' 改成 src='/blank.html'

如此一來, 在ie6就不會再有安全性警告跑出來了

參考:
http://malsup.com/jquery/block/#
http://support.microsoft.com/kb/261188/zh-tw

jQuery Test Suite

測試你的瀏覽器是否支援 jQuery --> http://jquery.com/test/

javascript : jquery ajaxStart and ajaxStop 的用法

ajaxStart和ajaxStop主要是在頁面觸發ajax時,呼叫其他function或程式碼做處理。
要加在$(document).ready(function(){});內

$().ajaxStart(function() {
            $.blockUI.defaults.pageMessage = "<table class='loader' summary='Loader Layout' border='0' cellpadding='5' cellspacing='1' width='300px'><tr><td align='left' valign='baseline'><div id='innLoader' style='position: absolute; z-index: 999; border-right: #bbbbbb thin solid; border-top: #bbbbbb thin solid; border-left: #bbbbbb thin solid; border-bottom: #bbbbbb thin solid; width: 300px; background-color: white;'><table><tr><td><img src='/res/layout/v5/ps_loading.gif' width='80' height='80' align='left' style='margin: 3px;' alt='請稍候' /></td><td><p><strong>資料處理中, 請稍候....</strong></p></td></tr></table></div></td></tr></table>";
            $.extend($.blockUI.defaults.pageMessageCSS, { margin: '-50px 0 0 -125px', top: '50%', left: '50%', color: '#000', backgroundColor: '#fff', border: '0px solid #aaa' }); $.blockUI();
        }).ajaxStop($.unblockUI);

jquery: 取出指定form內的所有select物件

在myform裡取出所有select name 開頭是'att'的值:

$("form[name='myform'] select[name^='att']").each(function(){
    alert($(this).val());
});

判斷瀏覽器是否為Google Chrome的二種方法

1. 使用jquery,但要先加入一個jquery plugin, 可以以下連結下載:

jQuery Browser Plugin

下載後,include到你的html裡,然後直接下指令即可:

if ($.browser.name == "chrome")
    alert("google chrome!");

2. 直接判斷navigator.userAgent裡的文字, 請參考:Detecting Google Chrome Using Javascript

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;  

jQuery: working with select options | Jerad Bitner:

jQuery: working with select options Jerad Bitner:

取出select option裡的文字:

$('#role').html($(this).children("[@selected]").text()).show();

jquery 的$(document).ready 在 firefox 有 onclick 的問題

最近在使用jquery 1.2.3 版本,發生了奇怪的問題….

通常我們在送出一個form表,會使用一個function檢查form的內容,

例如以下為一個CheckForm的Function

<script language="javascript" type="text/javascript">
    
    Function CheckForm(thisForm){

        $(document).ready(function(){
            If (thisForm.text1.value != “") {
        thisFrom.submit();
}
}
}

</script>

若使用

<a href="javascript:CheckForm(this.form);">submit button</a>

完全沒問題,在IE及FireFox都正常!
但若使用button

<input type="button" name="btnSubmit" value="submit button" onclick="javascript:CheckForm(this.form);">

在FireFox則會無法送出form,原因出在於CheckForm()裡的$(document).ready()沒有反應…跑到這裡就停住了…

查了許久,仍查不出原因,初步推斷可能是jquery 1.2.3在firebox的一個onclick的bug,因為在jquery 1.1.1時是沒有問題的。

現在的解決方式是,在

<script language="javascript" type="text/javascript"></script>

裡,
加一段:

$(document).ready(function(){

});

如此一來正常work了…只是沒找出真正的原因,要花點時間去找找官方的討論區。