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) ;

重構概念

重構(refactoring)
指不改變外部所見的程式行為的前提下，將程式內部的結構進行改善。

主要兩點：
1.即使執行了重構，亦不會改變外部所見的程式行為。
2.一旦執行了重構，程式內部的結構將會改善。

執行三步驟：
1.在重構前先進行測試。
2.進行重構。
3.在重構之後再度進行測試。

重構的限制：
1.程式還不能執行的情況。
2.時間緊迫的情況。

不祥的徵兆：
1.難以理解。
2.難以修改。
3.難以擴張。

例如:重複的程式碼、冗長的方法、過多的引數、變更的分散、公開方法過多...等。

不祥的徵兆6個口訣：
1.重複了。
2.太長了。
3.太多了。
4.名不符其實。
5.公開太多了。
6.不太像是物件導向。


重構的本質：
Step by Step
1.非同時進行兩個修改。
2.為了易於回復。
3.以Step為單位的確認。
4.由舊換新。


=====================================================================
<用符號常數取代Magic Number>
1.Magic Number-用符號常數取代Magic Number
例如：
在程式碼中寫下了100，這數字代表了什麼無法立即得知。
可是如果將100換成了 MAX_INPUT_LENGTH 可大幅增加程式的可讀性。

問題：
Magic Number的意義難以了解。
Magic Number寫在多個地方時難以修改。

解決：
使用符號常數來取代 Magic Number。


但有時像
for(int i = 0 ; i < buffer.length ; i++){...} (O)
就不用在刻意去改成
for(int i = 0 ; i < BUFFER_SIZE ; i++){...} (X)

2.用class來取代Type Code
TypeCode是指為了區別事務而分配的數值的意思。

範例程式：
public class RobotCommand {
 private final String _name;
 public RobotCommand(String name) {
  _name = name;
 }
}

public static final RobotCommand COMMAND_WALK = new RobotCommand("WALK");
public static final RobotCommand COMMAND_STOP = new RobotCommand("STOP");
public static final RobotCommand COMMAND_JUMP = new RobotCommand("JUMP");

public void order(RobotCommand command) {
 if(command == COMMAND_WALK) {
 } else if(command == COMMAND_STOP) {
 } else if(command == COMMAND_JUMP) {
 } else {...}
}

3.使用enum

public Robot {

 public enum Command {
  WALK,STOP,JUMP
 }

 public void order(Robot.Command command) {
  if(command == COMMAND.WALK) {
  } else if(command == COMMAND.STOP) {
  } else if(command == COMMAND.JUMP) {
  } else {...}
 }

}


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

<控制旗標(flag)的移除>

旗標(flag)：
用來記錄狀態並控制處裡流程的boolean型態的變數。

問題：
處理流程是被控制旗標所控制著，程式碼會變得更複雜。

解決：
用break、continue、return來取代控制旗標來控制流程。

DOM 概念

在瀏覽器中執行 HTML 網頁，瀏覽器會讀取 HTML 文件，將文件載入到記憶體之中，

依照 HTML 語法來剖析組成文件的標籤。在瀏覽器剖析組成文件的標籤過程中，

會將文件轉換為程式碼能夠處理的物件模型：DOM(Document Object Model)，

並將這個物件模型建立在執行環境內。


DOM API 是瀏覽器在 HTML 執行環境中，提供給開發人員使用，用來控制 HTML 文件的

API。

在 DOM API 瀏覽器會將 HTML 文件轉換為樹狀結構的 DOM tree，並使用這個 DOM tree 作

為模型來提供 API 功能，而在 DOM tree 上對於 node 的各種操作都會反應到 HTML 文件上。

DOM API 裡封裝了各種操作 node 的功能，這些 node 操作將變更顯示樣式、新增移除 node ...

等等的功能封裝成物件屬性、方法，並且散落在作為 DOM 入口的document物件、以及作為

DOM 模型的 node 物件上。

Javascript冒泡事件

Javascript冒泡事件


範例程式:

$(document).ready(function(){
$("#testButton").click(function(e){
//e.preventDefault();
//e.stopPropagation();
alert("testButton");
//return false
});
});


<form id="testForm" method="post" action="aaa.jsp">
<div id="testId" onclick="alert('div1');">
<div onclick="alert('div2');">
<div onclick="alert('div3')">
<button id="testButton" >testButton</button>
</div>
</div>
</div>
</form>


如果按下testButton，結果會是

alert("testButton") -> alert("div3") -> alert("div2") -> alert("div1") -> 最後會form submit。

這就是Javascript冒泡事件，就是當一個元素的事件被觸發時(click)，他的父元素也會一一被觸發，造成了事件的多層觸發。


這時候可以使用下面三種方式來達到真正的需求 preventDefault、stopPropagation、return false。

(1)使用 event.preventDefault

$("#testButton").click(function(e){
e.preventDefault();
alert("testButton");
});

結果:
alert("testButton") -> alert("div3") -> alert("div2") -> alert("div1")。

(2)使用 event.stopPropagation

$("#testButton").click(function(e){
e.stopPropagation();
alert("testButton");
});

結果:
alert("testButton") -> form submit。

(3)使用 return false

$("#testButton").click(function(e){
alert("testButton");
return false
});

結果:
只會執行alert("testButton")。


參考網址：
http://www.cnblogs.com/leeten/p/4137274.html
http://blog.winwu.today/2013/08/eventpreventdefaultreturn-false.html
http://www.cnf2e.com/javascript/return-false-preventdefault-stoppropagation.html

jquery radio select 操作

取得選中radio box的值：

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


取的下拉式選單的值：

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

javascript 判斷 android 或 ios 系統

上網找到了下面兩種方法：


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

//第一種方式
var browser = {
versions: function() {
var u = navigator.userAgent;
var app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE
presto: u.indexOf('Presto') > -1, //opera
webKit: u.indexOf('AppleWebKit') > -1, //apple、google
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //Firefox
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否為手機
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android或uc瀏覽器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否為iPhone或著QQHD瀏覽器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

document.writeln("語言版本: " + browser.language + " , ");
document.writeln(" 是否為手機: " + browser.versions.mobile + " , ");
document.writeln(" ios: " + browser.versions.ios + " , ");
document.writeln(" android: " + browser.versions.android + " , ");
document.writeln(" 是否為iPhone: " + browser.versions.iPhone + " , ");
document.writeln(" 是否iPad: " + browser.versions.iPad + " , ");
document.writeln(navigator.userAgent + " , ");

if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
alert("ios");
}
else if (browser.versions.android) {
alert("android");
}
else{
alert("nothing");
}


//第二種方式
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    alert("ios_2");
} else if (/(Android)/i.test(navigator.userAgent)) {
    alert("android_2");
} else {
    alert("nothing_2");
};
</script>

寫好後可以利用chrome的手機模擬測試看看，是否成功

按F12 -> 左下角圖案 -> 右上角選擇手機型號測試