jQuery入门到精通第3章：管理jQuery包装集

1、.：.；一.摘要在运用jQuery选择器获取到jQuery包装集后, 我们需求对其进展操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二.前言本系列的2,3篇上面列举了太多的API置信大家看着眼晕. 不过这些根底还必需求讲, 根底要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API阐明.本章内容很少, 主要讲解动态创建元素和操作jQuery包装集的各个函数. 三.动态创建元素1.错误的编程方法我们经常运用javascript动态的创建元素, 有很多程序员经过直接更改某一个容器的HTML内容.比如: 动态创建对

2、象测试图层 document.getElementById(testDiv).innerHTML = 动态创建的div;上面的例如中我经过修正testDiv的内容,在页面上动态的添加了一个div元素. 但是请牢记,这是错误的做法! 错误的缘由:(1) 在页面加载时改动了页面的构造. 在IE6中假设网络变慢或者页面内容太大就会出现终止操作的错误. 也就是说永远不要在页面加载时改动页面的Dom模型.(2) 运用修正HTML内容添加元素, 不符合Dom规范. 在实践任务中也碰到过运用这种方法修正内容后, 某些阅读器中并不能立刻显示添加的元素, 由于不同阅读器的显示引擎是不同的. 但是假设我们运用Do

3、m的CreateElement创建对象, 在一切的阅读器中几乎都可以. 但是在jQuery中假设传入的而是一个完好的HTML字符串, 内部也是运用innerHTML. 所以也不是完全否认innerHTML函数的运用. 所以从如今开场请摒弃这种旧知识, 运用下面引见的正确方法编程.2.创建新的元素下面引见两种正确的创建元素的方式. (1)运用HTML DOM创建元素什么是 DOM？经过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改动或重排页面上的工程。要改动页面的某个东西，JavaScript 就需求对 HTML 文档中一切元素进展访问的入口。这个入口，连同对 HT

4、ML 元素进展添加、挪动、改动或移除的方法和属性，都是经过文档对象模型来获得的DOM。在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。一切的阅读器都执行了这个规范，因此，DOM 的兼容性问题也几乎难觅踪影了。DOM 可被 JavaScript 用来读取、改动 HTML、XHTML 以及 XML 文档。DOM 被分为不同的部分中心、XML及HTML和级别DOM Level 1/2/3：Core DOM 定义了一套规范的针对任何构造化文档的对象 HYPERLINK w3school/xmldom/index.asp XML DOM

5、 定义了一套规范的针对 XML 文档的对象 HTML DOM 定义了一套规范的针对 HTML 文档的对象。 关于运用HTML DOM创建元素本文不做详细引见, 下面举一个简单的例子: /运用Dom规范创建元素 var select = document.createElement(select); select.options0 = new Option(加载项1, value1); select.options1 = new Option(加载项2, value2); select.size = 2; var object = testDiv.appendChild(select);经过运用

6、 document.createElement 方法我们可以创建Dom元素, 然后经过appendChild方法为添加到指定对象上.(2) 运用jQuery函数创建元素在jQuery中创建对象更加简单, 比如创建一个Div元素:$(动态创建的div)我们主要运用jQuery中心类库中的一个方法: HYPERLINK docs.jquery/Core/jQuery l htmlownerDocument jQuery( html, ownerDocument ) Returns: jQuery根据HTML原始字符串动态创建Dom元素.其中html参数是一个HTML字符串, 在jQuery1.3.

7、2中对此函数做了改良:当HTML字符串是没有属性的元素是, 内部运用document.createElement创建元素, 比如:/jQuery内部运用document.createElement创建元素:$().css(border,solid 1px #FF0000).html(动态创建的div).appendTo(testDiv);否那么运用innerHTML方法创建元素:/jQuery内部运用innerHTML创建元素:$(动态创建的div).appendTo(testDiv);3.将元素添加到对象上我们可以运用上面两种方式创建一个而元素, 但是上面曾经提到一定不要在页面加载时就改动页

8、面的DOM构造, 比如添加一个元素. 正确的做法是在页面加载终了后添加或删除元素.传统上, 运用window.onload完成上述目的:/DOM加载终了后添加元素/传统方法window.onload = function() testDiv.innerHTML = 动态创建的div; 虽然可以在DOM完好加载后, 在添加新的元素, 但是不幸的是阅读器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在一切图像和其他外部资源完好的加载并且在阅读器窗口显示终了之后. 所以假设某个图片或者其他资源加载很长时间, 访问者就会看到一个不完好的页面, 甚至在图片加载之前就执行了需求依赖

9、动态添加的元素的脚本而导致脚本错误.处理方法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行:/jQuery 运用动态创建的$(document).ready(function)方法$(document).ready( function() testDiv.innerHTML = 运用动态创建的$(document).ready(function)方法; );或者运用简便语法:/jQuery 运用$(function)方法$( function() testDiv.innerHTML += 运用$(function)方法; );运用$()将我们

10、的函数包装起来即可. 而且可以在一个页面绑定多个函数, 假设运用传统的window.onload那么只能调用一个函数.所以请大家将修正DOM的函数运用此方法调用. 另外还要留意document.createElement和innerHTML的区别. 假设可以请尽量运用document.createElement和$()的方式创建对象.四.管理jQuery包装集元素既然学会了动态创建元素, 接下来就会想要把这些元素放入我们的jQuery包装集中.我们可以在jQuery包装集上调用下面这些函数, 用来改动我们的原始jQuery包装集, 并且大部分前往的都是过滤后的jQuery包装集.jQuery提

11、供了一系列的函数用来管理包装集:1.过滤 Filtering称号阐明举例 HYPERLINK docs.jquery/Traversing/eq l index eq( index )获取第N个元素获取匹配的第二个元素: $(p).eq(1) HYPERLINK docs.jquery/Traversing/filter l expr filter( expr )挑选出与指定表达式匹配的元素集合。保管带有select类的元素: $(p).filter(.selected) HYPERLINK docs.jquery/Traversing/filter l fn filter( fn )挑选出与

12、指定函数前往值匹配的元素集合这个函数内部将对每个对象计算一次 (正如 $.each). 假设调用的函数前往false那么这个元素被删除，否那么就会保管。保管子元素中不含有ol的元素: $(div).filter(function(index) return $(ol, this).size() = 0; ); HYPERLINK docs.jquery/Traversing/is l expr is( expr ) 留意: 这个函数前往的不是jQuery包装集而是Boolean值用一个表达式来检查当前选择的元素集合，假设其中至少有一个元素符合这个给定的表达式就前往true。假设没有元素符合，或

13、者表达式无效，都前往false. filter 内部实践也是在调用这个函数，所以，filter()函数原有的规那么在这里也适用。由于input元素的父元素是一个表单元素，所以前往true: $(inputtype=checkbox).parent().is(form) HYPERLINK docs.jquery/Traversing/map l callback map( callback )将一组元素转换成其他数组不论能否是元素数组他可以用这个函数来建立一个列表，不论是值、属性还是CSS款式，或者其他特别方式。这都可以用$.map()来方便的建立把form中的每个input元素的值建立一个列

14、表: $(p).append( $(input).map(function() return $(this).val(); ).get().join(, ) ); HYPERLINK docs.jquery/Traversing/not l expr not( expr )删除与指定表达式匹配的元素从p元素中删除带有 select 的ID的元素: $(p).not( $(#selected)0 ) HYPERLINK docs.jquery/Traversing/slice l startend slice( start, end )选取一个匹配的子集选择第一个p元素: $(p).slice(

15、0, 1);2.查找 Finding称号阐明举例 HYPERLINK docs.jquery/Traversing/add l expr add( expr )把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于衔接分别与两个表达式匹配的元素结果集。动态生成一个元素并添加至匹配的元素中: $(p).add(Again) HYPERLINK docs.jquery/Traversing/children l expr children( expr )获得一个包含匹配的元素集合中每一个元素的一切子元素的元素集合。可以经过可选的表达式来过滤所匹配的子元素。留意：parents()将查找一切

16、祖辈元素，而children()只思索子元素而不思索一切后代元素。查找DIV中的每个子元素: $(div).children() HYPERLINK docs.jquery/Traversing/closest l expr closest( expr )获得与表达式匹配的最新的父元素为事件源最近的父类li对象改换款式:$(document).bind(click, function (e) $(e.target).closest(li).toggleClass(hilight); ); HYPERLINK docs.jquery/Traversing/contents contents( )

17、查找匹配元素内部一切的子节点包括文本节点。假设元素是一个iframe，那么查找文档内容查找一切文本节点并加粗: $(p).contents().not(nodeType=1).wrap(); HYPERLINK docs.jquery/Traversing/find l expr find( expr )搜索一切与指定表达式匹配的元素。这个函数是找出正在处置的元素的后代元素的好方法。一切搜索都依托jQuery表达式来完成。这个表达式可以运用CSS1-3的选择器语法来写。从一切的段落开场，进一步搜索下面的span元素。与$(p span)一样: $(p).find(span) HYPERLINK

18、 docs.jquery/Traversing/next l expr next( expr )获得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只前往后面那个紧邻的同辈元素，而不是后面一切的同辈元素可以运用nextAll。可以用一个可选的表达式进展挑选。找到每个段落的后面紧邻的同辈元素: $(p).next() HYPERLINK docs.jquery/Traversing/nextAll l expr nextAll( expr )查找当前元素之后一切的同辈元素。可以用表达式过滤给第一个div之后的一切元素加个类: $(div:first).nextAll().

19、addClass(after); HYPERLINK docs.jquery/Traversing/offsetParent offsetParent( )前往第一个有定位的父类(比如(relative或absolute). HYPERLINK docs.jquery/Traversing/parent l expr parent( expr )获得一个包含着一切匹配元素的独一父元素的元素集合。他可以运用可选的表达式来挑选。查找每个段落的父元素: $(p).parent() HYPERLINK docs.jquery/Traversing/parents l expr parents( exp

20、r )获得一个包含着一切匹配元素的祖先元素的元素集合不包含根元素。可以经过一个可选的表达式进展挑选。找到每个span元素的一切祖先元素: $(span).parents() HYPERLINK docs.jquery/Traversing/prev l expr prev( expr )获得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进展挑选。只需紧邻的同辈元素会被匹配到，而不是前面一切的同辈元素。找到每个段落紧邻的前一个同辈元素: $(p).prev() HYPERLINK docs.jquery/Traversing/prevAll l expr prevAll( expr )查找当前元素之前一切的同辈元素可以用表达式过滤。给最后一个之前的一切div加上一个类: $(div:last).prevAll().addClass(before); HYPERLINK docs.jquery/Traversing/siblings l expr siblings( expr )获得一个包含匹配的元素集合中每一个元素的一切独一同辈元素的元素集合。可以用可选的表