JQuery基础之(四)JQuery包装集

一、    前言

在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等.

 

二、    动态创建元素

1)       使用HTML DOM创建新元素

什么是 DOM？

通过 JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript需要通过某个入口对HTML文档中的所有元素进行访问。这个入口，连同对HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

            //使用Dom标准创建元素

    var select = document.createElement("select");

    select.options[0] = new Option("加载项1", "value1");

    select.options[1] = new Option("加载项2", "value2");

    select.size = "2";

    var object = testDiv.appendChild(select);

 

2)       使用JQuery创建新元素

使用JQuery新增一个元素很简单：

    <div>

        <div id="divMsg">hello world!</div>

        <asp:Button ID="btnAddDiv" runat="server" Text="向divMsg中新增一个div元素" />

        <script type="text/javascript">

            $("#btnAddDiv").bind("click", function(event){$("<div>我是新增的div</div>").appendTo($("#divMsg")); event.preventDefault();});

        </script>

</div>

其中：$("#btnAddDiv").bind("click", function(event){$("<div>我是新增的div</div>").appendTo($("#divMsg")); event.preventDefault();});也可写成如下：

$("#btnAddDiv").bind("click", function(event){$("<div/>").html(“我是新增的div”).appendTo($("#divMsg")); event.preventDefault();});