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 -> 左下角圖案 -> 右上角選擇手機型號測試