从零开始学习jQuery (三) 管理jQuery包装集

关于使用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);

通过使用 document.createElement 方法我们可以创建Dom元素, 然后通过appendChild方法为添加到指定对象上.

(2) 使用jQuery函数创建元素

在jQuery中创建对象更加简单, 比如创建一个Div元素:

$("<div　style="border:solid　1px　#FF0000">动态创建的div</div>")
.csharpcode,　.csharpcode　pre
{

font-size:　small;

color:　black;

font-family:　consolas,　"Courier　New",　courier,　monospace;

background-color:　#ffffff;

/*white-space:　pre;*/
}
.csharpcode　pre　{　margin:　0em;　}
.csharpcode　.rem　{　color:　#008000;　}
.csharpcode　.kwrd　{　color:　#0000ff;　}
.csharpcode　.str　{　color:　#006080;　}
.csharpcode　.op　{　color:　#0000c0;　}
.csharpcode　.preproc　{　color:　#cc6633;　}
.csharpcode　.asp　{　background-color:　#ffff00;　}
.csharpcode　.html　{　color:　#800000;　}
.csharpcode　.attr　{　color:　#ff0000;　}
.csharpcode　.alt　
{

background-color:　#f4f4f4;

width:　100%;

margin:　0em;
}
.csharpcode　.lnum　{　color:　#606060;　}

我们主要使用jQuery核心类库中的一个方法:

jQuery( html, ownerDocument )

Returns: jQuery

根据HTML原始字符串动态创建Dom元素.

其中html参数是一个HTML字符串,　 在jQuery1.3.2中对此函数做了改进:

当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如:

//jQuery内部使用document.createElement创建元素:
$("<div/>").css("border","solid　1px　#FF0000").html("动态创建的div").appendTo(testDiv);

否则使用innerHTML方法创建元素:

//jQuery内部使用innerHTML创建元素:
$("<div　style="border:solid　1px　#FF0000">动态创建的div</div>").appendTo(testDiv);

3.将元素添加到对象上

我们可以使用上面两种方式创建一个而元素, 但是上面已经提到一定不要在页面加载时就改变页面的DOM结构, 比如添加一个元素. 正确的做法是在页面加载完毕后添加或删除元素.

传统上, 使用window.onload完成上述目的:

//DOM加载完毕后添加元素
//传统方法
window.onload　=　function()　{　testDiv.innerHTML　=　"<div　style="border:solid　1px　#FF0000">动态创建的div</div>";　}

虽然能够在DOM完整加载后, 在添加新的元素, 但是不幸的是浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.

解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行:

//jQuery　使用动态创建的$(document).ready(function)方法
$(document).ready(
　　　　function()　{　testDiv.innerHTML　=　"<div　style="border:solid　1px　#FF0000">使用动态创建的$(document).ready(function)方法</div>";　}
);

或者使用简便语法:

//jQuery　使用$(function)方法
$(
　　　　function()　{　testDiv.innerHTML　+=　"<div　style="border:solid　1px　#FF0000">使用$(function)方法</div>";　}
);

使用$()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的window.onload则只能调用一个函数.

所以请大家将修改DOM的函数使用此方法调用. 另外还要注意document.createElement和innerHTML的区别. 如果可以请尽量使用document.createElement和$("<div/>")的形式创建对象.

四.管理jQuery包装集元素

既然学会了动态创建元素, 接下来就会想要把这些元素放入我们的jQuery包装集中.

我们可以在jQuery包装集上调用下面这些函数, 用来改变我们的原始jQuery包装集, 并且大部分返回的都是过滤后的jQuery包装集.

jQuery提供了一系列的函数用来管理包装集:

1.过滤 Filtering

2.查找 Finding

3.串联 Chaining

五.常用函数举例

[待续]

六.总结

本篇文章内容较少, 主要讲解如何动态创建元素以及管理jQuery包装集, 接口文档列举了太多,　 实例部分还没来得及写. 因为要睡觉明天还要上班, 所以请各位见谅, 等以后有空的时候补上!