如何將很多個表單元件緊密集結合在一起，而且自動排版
方法；加上2個div 標籤包圍者
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
...........
</div>
</div>
(如果在表單欄位的外面加入 <div data-role="fieldcontain"> </div>，表單會根據螢幕畫面做最適當的配置：寬螢幕的 label 會在 input 的左手邊，窄小的螢幕在 fieldcontain 之間會多一條分隔線)

如何將很多個表單元件緊密集結合在一起，而且自動排版
方法；加上1個div 標籤包圍者
<fieldset data-role="controlgroup">
...........
</div>

如何將很多個radio元件緊密集結合在一起，且水平排列
<fieldset data-role="controlgroup" data-type="horizontal">
...........radio選項按鈕
</div>

建立陣列的三種方法：
方法1： text = ["apple","grape","carrot"];

方法2： var text = new Array("apple","grape","carrot");

方法3：可以一直增加陣列元素的方法
var text = new Array();
text[1] = "apple";
text[2] = "grape";

(4).迴圈讀取陣列：方法1
for(i=0;i<array.length;i++){
tex01.value += array[i] + "<br/>";
}

(5).迴圈讀取陣列：方法2
for(i in array){
tex01.value += array[i] + "<br/>";
}

(2).數學函數：Math.floor（）無條件捨去法

Math.floor（）將數字向下到最接近的整數：

(3).數學函數：Math.random（）取亂數

的Math.random（）返回0和1之間的隨機數：

(1).新增一個項目到select-option內，傳統javascript方法：
for(i=0;i<array.length;i++) {
select01.options.add(new Option(array[i]));
}
注意：第1個options(小寫O，有s)，第2個Option(大寫O，沒s)

(2)如何知道下拉式選單select是選到第幾個option，傳統javascript方法：
第幾個 = select001.selectedIndex

(1).新增一個項目到select-option內，jQuery指令方法：

for(i=0;i<array.length;i++) {
$('#id01).append("<option>" + array[i] + "</option>");
}

(2)如何知道下拉式選單select是選到第幾個option，jQuery指令方法：
第幾個 = $('#select001').find(":selected").index()

(1).javascript的二維陣列，2種方法：
方法1：(較常用)
var stu = new Array();//一維陣列
stu[0] = ["john","tainan","boy"];
stu[1] = ["jolin","taipei","girl"];
方法2：
var stu = new Array();//一維陣列
stu[0] = new Array();//二維陣列
stu[0][0] = "john";
stu[0][1] ="tainan";
stu[0][2] = "boy";

(2).javascript二維陣列，i,j迴圈的最大值：
imax=array.length;
jmax=array[0].length;
for(i=0;i<imax;i++) {
for(j=0;j<jmax;j++) {
}
}

(3).注意：寫javascript時，要把加入的元件，標籤內的name 都改成 id
<input id="txt01" type="text" size="7" />
否則某些元件，在chrome瀏覽器無法運作

(4).二維陣列在計算時若是數字(整數小數)，要先把text轉成int，或float：
parseInt(txt00.value)
parseFloat(txt00.value)

物件object變數，建立3種方法：
方法1：（最常使用）
stu = {name:"john", chinese:95, english:75, math:70};

方法2：（少用）
var stu = new Object();
stu.name ="john";
stu.chinese =95;

方法3：（少用）
var stu = new student("john", 95, 75,70);
....
....
//產生建構子函數，以建立新的物件變數
function student(inputName, inputChinese, inputEnglish,inputMath) {
this.name = inputName;
this.chinese = inputChinese;
this.english = inputEnglish;
this.math = inputMath;
}

物件object變數的陣列，建立方法：
方法1：（最常使用）
stu = [{name:"john", chinese:95, english:75, math:70},{name:"tom", chinese:75, english:85, math:60},{name:"peter", chinese:95, english:100, math:65}];

方法2：
var stu = new Array(); //一維陣列 物件
stu[0] = {name:"john", chinese:95, english:75, math:70};
stu[1] = {name:"tom", chinese:85, english:85, math:90};

方法3：
var stu = new Array(); //一維陣列 物件
var stu[0] = new Object();
stu[0].name = "john";
stu[0].chinese = 95;
stu[0].english = 75;
stu[0].math = 70;
var stu[1] = new Object();
stu[1].name = "tom";
stu[1].chinese = 85;
stu[1].english = 85;
stu[1].math = 90;

在網頁播放音樂，最新的方法：這是Html 5語法，目前chrome支援此語法，IE9及以上版本才支援
(A).先在網頁設定一個html5標籤：<audio id="audio"></audio>
顯示控制面版：controls
自動播放：autoplay
播放次數：loop

(B)寫javascript 程式碼：
document.getElementById('audio').src ="音樂檔名"; (目前支援mp3, ogg, wav)
document.getElementById('audio').loop=1;
document.getElementById('audio').load();
document.getElementById('audio').play();

要用自動新增listview清單內的li元件：
(1).傳統javascript方法：新增一筆li項目到ul尾端，的DOM寫法： ul01=document.getElementById("ul的id");
li01=document.createElement("li");
li01.innerHTML=("<li><a href='"+ school[i].ip +"' target='_blank'></a></li>";
ul01.appendChild(li01);

//j最後一定要加上這一行jQuery指令才能更新畫面的元件
$('#listview01').listview("refresh");

(2).傳統javascript方法：新增一筆li項目到ul尾端，的DOM寫法//要新增一個childNode到某個標籤之內
$("#listview01").append("<li><a href='"+ school[i].ip +"' target='_blank'></a></li>");
}
//jQuery一定要加上這一行來更新畫面的元件
$('#listview01').listview("refresh");

(1).項目清單的結構：ul-li

• 學號001

• 學號002

程式碼：
<ul>
<li> <h3 align="left"> 學號001</h3> </li>
<li> <h3 align="left">學號002</h3> </li>
</ul>

(2).新增一筆li項目到ul尾端，的DOM寫法： ul01=document.getElementById("ul的id");
li01=document.createElement("li");
li01.innerHTML="顯示的文字";
ul01.appendChild(li01);

(3).新增一筆li項目到ul的第3行，DOM寫法： ul01=document.getElementById("ul的id");
li01=document.createElement("li");
li01.innerHTML="顯示的文字";
ul01.insertBefore(li01,ul01.childNodes[3]);

(4).刪除ul的第3行，DOM寫法： ul01=document.getElementById("ul的id");
ul01.removeChild(ul01.childNodes[3]);

(5).修改ul第3行的內容，DOM寫法： ul01=document.getElementById("ul的id");
li01=document.createElement("li");
li01.innerHTML="顯示的文字";
ul01.replaceChild(li01,ul01.childNodes[3]);

(6).注意：要定位第幾個li編號，有的時後會出現錯誤
(A).若是li由textbox輸入，一個一個慢慢新增，那麼編號，正確
(B).若是li已經事先有幾個了，那麼編號，會不正確

(1).選單清單的結構：select-option

學號001 學號002  

程式碼：
<select id="selecttest">
<option>學號001</option>
<option>學號002</option>
</select>

(2).新增一筆option項目到select尾端，的DOM寫法： select01=document.getElementById("select的id");
option01=document.createElement("option");
option01.innerHTML="顯示的文字";
select01.appendChild(option01);

(3).新增一筆option項目到select的第3行，DOM寫法： select01=document.getElementById("select的id");
option01=document.createElement("option");
option01.innerHTML="顯示的文字";
select01.insertBefore(option01,select001.childNodes[3]);

(4).刪除select的第3行，DOM寫法： select01=document.getElementById("select的id");
select01.removeChild(select001.childNodes[3]);

(5).修改select第3行的內容，DOM寫法： select01=document.getElementById("select的id");
option01=document.createElement("option");
option01.innerHTML="顯示的文字";
select01.replaceChild(option001,select001.childNodes[3]);

(6).注意：要定位第幾個li編號，有的時後會出現錯誤
(A).若是option由textbox輸入，一個一個慢慢新增，那麼編號，正確
(B).若是option已經事先有幾個了，那麼編號，會不正確

比較：另外一種方法新增option到select的方法：

(1).新增一個項目到select-option內，傳統javascript方法：
for(i=0;i<array.length;i++) {
select01.options.add(new Option(array[i]));
}
注意：第1個options(小寫O，有s)，第2個Option(大寫O，沒s)

(2)如何知道下拉式選單select是選到第幾個option，傳統javascript方法：
第幾個 = select001.selectedIndex