一、前言

在使用jQuery選擇器獲取到jQuery包裝集後，我們就要對這些包裝集進行各種操作

二、創建新的元素

1.使用HTMLDOM創建元素

(1)什麼是DOM

當網頁被載入時，瀏覽器會創建頁面的文檔對象模型(Document Object Model)

(2)使用HTML DOM創建元素

  1 <div id="testDiv"></div>
  2 <script>
  3     var select = document.createElement("select");
  4     select.options[0] = new Option("載入項1", "value1");
  5     select.options[1] = new Option("載入項2", "value2");
  6     select.size = "2";
  7     var testDiv = document.getElementById("testDiv");
  8     var object = testDiv.appendChild(select);
  9 </script> 

2.使用jQuery函數創建元素

  1 <div id="testDiv"></div>
  2 <script>
  3     $("<select><option value ='value1'>載入項1</option><option  value='value2'>載入項2</option></select>").appendTo($("#testDiv"))
  4 </script>
  5 

(1)創建時註意

一定不要在頁面載入時就改變頁面的DOM結構，正確的做法是在頁面載入完畢後添加或刪除元素

方式一：所有資源完整載入後，再添加新的元素

缺點：如果某個圖片或資源載入很長時間，就會顯示一個不完整的頁面

<script>
    window.onload = function () {
        $("<select><option value ='value1'>載入項1</option><option  value='value2'>載入項2</option></select>").appendTo($("#testDiv"));
    }
</script>

方式二：DOM完整載入後，再添加新的元素

<script>
    $(document).ready(function () {
        $("<select><option value ='value1'>載入項1</option><option  value='value2'>載入項2</option></select>").appendTo($("#testDiv"));
    });
</script>

或者使用簡潔語法

<script>
    $(function () {
        $("<select><option value ='value1'>載入項1</option><option  value='value2'>載入項2</option></select>").appendTo($("#testDiv"));
    });
</script>

三、管理jQuery包裝集的一些函數

1.過濾 Filtering

2.查找Finding

3.串聯 Chaining

四、參考文章

http://www.cnblogs.com/zhangziqiu/archive/2009/05/04/jQuery-Learn-3.html