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

//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

名称   说明   举例  
  获取第N个元素   获取匹配的第二个元素:
$("p").eq(1)  
 

筛选出与指定表达式匹配的元素集合。

  保留带有select类的元素:
$("p").filter(".selected")  
 

筛选出与指定函数返回值匹配的元素集合

这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。

  保留子元素中不含有ol的元素:

$("div").filter(function(index) {
  return $("ol", this).size() == 0;
});

 


注意: 这个函数返回的不是jQuery包装集而是Boolean值  

用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。

  由于input元素的父元素是一个表单元素，所以返回true:
$("input[type='checkbox']").parent().is("form")  
 

将一组元素转换成其他数组（不论是否是元素数组）

你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立

  把form中的每个input元素的值建立一个列表:

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

 
  删除与指定表达式匹配的元素   从p元素中删除带有 select 的ID的元素:
$("p").not( $("#selected")[0] )  

  选取一个匹配的子集   选择第一个p元素:
$("p").slice(0, 1);  

2.查找 Finding

名称   说明   举例