jquery 升級須注意寫法

* 升級須注意寫法：
(1) [@name=fruit] & [name=fruit]

1.2.6
$("input[@name=fruit][@value=banana]").attr('checked',true);

1.11.3
$("input[name=fruit][value=banana]").attr('checked',true);

(2) attr & prop

1.2.6
if($("input[@name=fruit][@value=banana]").attr('checked')) {
alert("已選取");
} else {
alert("尚未選取");
}

1.11.3
if($("input[name=fruit][value=banana]").prop('checked')) {
alert("已選取");
} else {
alert("尚未選取");
}

(3) 利用 $('input[@type=checkbox][@checked]').length 來判斷是否有checkbox被勾選

1.2.6
if($('input[@type=checkbox][@checked]').length != 0 ) {
alert("已勾選");
} else {
alert("至少勾選一種類別");
}

1.11.3
無法使用1.2.6的 [@checked] 方式判斷，可以改成 :checked 判斷
if($('input[type=checkbox]:checked').length != 0 ) {
alert("已勾選");
} else {
alert("至少勾選一種類別");
}


(4) .trigger()事件時的Checkbox/Radio checked狀態，
當使用.trigger("click")或.click()觸發Checkbox及Radio時，
在事件中會看到與實際checked屬性相反的狀態，1.9版之後修正

1.2.6
$('input[@name=triggerBtn]').bind('click',function(){
$("input[@name=fruit][@value=apple]").trigger("click");
});
$("input[@name=fruit][@value=apple]").bind('click',function(){
alert(this.checked);//false
});

1.11.3
$('input[name=triggerBtn]').bind('click',function(){
$("input[name=fruit][value=apple]").trigger("click");
});
$("input[name=fruit][value=apple]").bind('click',function(){
alert(this.checked);//true
});

==================================================================

jquery-1.11.3.min.js 不能用下列寫法，會出現不支援此屬性或方法 ， 但 v1.4 的確可以

$('select[name=statusFlag] > option[value=]').attr('selected',true) ;

需改成

$('select[name=statusFlag] > option[value=""]').attr('selected',true) ;


所以寫

 $('select[name=seizedOrg] > option[value=<%=seizedOrg%>] ').attr('selected',true) ;

要注意，要加""

 $('select[name=seizedOrg] > option[value="<%=seizedOrg%>"] ').attr('selected',true) ;

jquery radio select 操作

取得選中radio box的值：

$('input[name="radioName"]:checked').val();


取的下拉式選單的值：

$("#selectID").find(":selected").val();

jquery div a 與 div > a 的差異

div a : 取得div內部的所有的超連結

div > a : 取得div父元素其下的超連結


範例:

<div id="div1">
<a id="a1">a1</a>
<a id="a2">a2</a>
<div id="div11">
<a id="a11">a11</a>
</div>
</div>
<div id="div2">
<span id="s1">
<a id="b1">b1</a>
<a id="b2">b2</a>
</span>
</div>



$('div a').css('color','red');





$('div > a').css('color','red');

div id="div2"底下的子元素只有span，所以span底下的超連結就不會被選到

jquery 密碼欄位是否顯示密碼

由於type屬性不能修改所以無法使用:

$('#ban').prop('type','text')

解決辦法:

1.先建立一個新的input 欄位加在原來input位置

2.把原來的值複製過去

3.把原來的input移除

範例:

javascript:

function showPassWord() {

if($('#checkPassWord').prop('checked')) {

$('<input type="text" id="ban"/>').val($('#ban').val()).insertAfter('#ban').prev().remove();

} else {

$('<input type="password" id="ban"/>').val($('#ban').val()).insertAfter('#ban').prev().remove();

}

}

html:

password:<input type="password" id="ban" />

<input type="checkbox" id="checkPassWord" onclick="showPassWord()">是否顯示密碼