从零开始学习jQuery_第1页
从零开始学习jQuery_第2页
从零开始学习jQuery_第3页
从零开始学习jQuery_第4页
从零开始学习jQuery_第5页
免费预览已结束，剩余2页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、从零开始学习iQu©ry (三)管理jQuew包装集一 摘要在使用jQuery选择器扶取到jQuery包装集后，我们需要对其进行操作.木萃首先讲解如何动态的创建元 素接着学习如何管理JQuery包装集，比如添加，删除，切片等.二前言木系列的2,3篇上面列举r太多的API相信大家看着眼晕不过这些基础还必须要讲，基础要扎实其实对 于这些列表大家可以跳过，等以后用到时再回头看或者盘询官方的API说明.木章内容很少，主要讲解动态创建元素和操作jQuery包装集的符个函数.三动态创建元素错误的编程方法我们经常便用javascript动态的创建元素，有很多程序员通过直接更改某一个容器的HTML内

2、容比如:<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN*"http:/WWW.w3org/TR/xhtmll/DTD/xhtmll-transitionaldtd "><html xmlns="http:/wwww3org/1999/xhtml"><head><title>动态创建对象</title></head><body><div id="testDiv">

3、测试图层</div><script type="text/javascript">document.getElementById("testDiv")innerHTML = "<div style=*'border:solid Ipx #FF0000">动态创建的 div</div>" </script></body></html>上面的示例中我通过修改testDiv的内容，在贞而上动态的添加了一个div元素但是请牢记，这是错误的做

4、法！错误的原W:(1)在贞面加栽时改变了页面的结构.在IE6中如果网络变慢或者贞面内容太大就会出现“终止操作'的错 渓.也就是说'永远不要在贞面加载时改变贞面的Dom模型”.(2)使用修改HTML内容添加元素，不符合Dom标准.在实际工作中也碰到过使用这种方法修改内容后, 某些浏览器中并不能立刻显示添加的元素，W为不同浏览器的显示引擎是不同的.但是如果我们使川 Dom的CreateElement创建对紀 在所有的浏览器中几乎都可以但是在jQuery巾如果传入的而是一 个完整的HTML字符串，内部也是使川innerHTML.所以也不是完全否定innerHTML函数的使用 所以从现

5、在开始请摒齐这种旧知识，使川下面介绍的正确方法编程.2创建新的元素下面介绍两种正确的创建元素的方式(1)使用HTML DOM创建元素什么是DOM?通过JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页而上的项目。契改变贞面的某个东西JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口.连同 对HTML元素进行添加、移动、改变或移除的方法和属性.都是通过文档对彖模型來获得的(DOM) °在1998年.W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML贞面中的每一个单独 的元素C 所有的浏览器都执行了这个标准 W此DOM的兼

6、容性问题也几乎难觅踪影了。DOM可被JavaScript用來读取、改变HTML、XHTML以及XML文档。DOM被分为不同的部分(核心、XMLS HTML)和级别(DOM Level 1/2/3)：Core DOM定义了一套标准的针对任何结构化文档的对荻XML DOM定义了一奁标准的针对XML文榔的对欽HTML DOM定义了一金标准的针对HTML文档的对彖0关于便川HTML DOM创建元素木文不做详細介绍，下ihi举一个简单的例子:使用Dom标准创铠元素var select = document.createElement("select"); select options

7、O = new Option("加载项 1", "valuel"); selectoptionsl = new Option("加载项 2”，"value2"); select.size = "2"var object = testDiv.appendChild(select);通过使川document.createElement方法我们可以创建Dom兀素，然后通过appendChild方法为添 加到指定对欽上(2)使用jQuery函数创建元索在jQuery中创建对彖E加简0,比如创建一个Div元素:$(

8、"<div style="border:solid Ipx #FF0000">动态创建的 div</div>")我们主要使川jQuery核心类库中的一个方法：iOueryf htmh ownerDocument)Returns: jQuery根据HTML碌始字符串动态创建Dom元素«中html参数是一个HTML字符串，在jQueryl3.2中对此函数做r改进: 严I HTML字符串是没有属性的元素是，内部使用document.createElement创建元素，比如:/jQuery 内部使用 document creat

9、eElement 创建元素： $C<div/>").css("border"/'solid Ipx #FF0000*) .htmlC 动态 创建丫內 div") appendTo(testDiv);否则使/tJ innerHTML方法创建元素:/jQuery内部使用innerHTML创建元素：$("<div style="border:solid Ipx #FF0000">动态创建的 div</div>")appendTo(testDiv);3将元素添加到对象上我们可以使

10、川上面两种方式创建一个而元素，但是上面已经提到一定不要在页面加载时就改变贞面的 DOM结构，比如添加一个元素.正确的做法是在页面加载完毕后添加或删除元素传统上，便用window.onload完成上述目的:/DOM加载完毕后添加元素传统方法window.onload = function() testDiv.innerHTML = "<div style="border: solid Ipx #FF0000">动态创建的 div</div>" 虽然能够在DOM完整加载后，在添加新的元素，但是不举的是浏览器执行window.onloa

11、d函数不仅仅是 在构建完DOM树之后，也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后.所 以如果某个图片或者其他资源加载很长时间，访问者就会看到一个不完整的urifii；甚至在图片加载之前就 执行r需要依赖动态添加的元素的脚木而导致脚木错谋解决办法就是等DOM被解析后，在图像和外部资源加裁之前执行我们的函数在jQuery中让这一实现变 得可行：/jQuery 使用动态创建的 (document) * ready (function)方法 (document)ready(function0 testDiv.innerHTML = "<div style=&qu

12、ot;border:solid Ipx #FF0000">使用动态创建的 $(docunient) ready(function)方法</div>" 或者便川简便语法:/jQuery 使用$(function)方法 $(function() testDiv.innerHTML += "<div style="border:solid Ipx #FF0000">使用(function)方法 </div>" 使川$()将我们的函数包装起來即可.而且可以在一个页而绑定乡个函数，如果使用传统的 win

13、dow.onload则只能调用一个函数.所以请大家将修改DOM的函数使用此方法调用.另外还嬰注意documentxreateElement 111innerHTML的区别.如果可以请尽虽使用document.createElement和$("<div/>")的形式创建对紀四管理jQuery包装集元素既然学会了动态创建元素，接下來就会想嬰把这些元素放入我们的jQuery包装集中 我们可以在jQuery包装集上调用下面这些函数，用來改变我们的原始jQuery包装集，并且大部分返回的 都是过滤后的jQuery包装集jQuery提供了一系列的函数用來管理包装集:1过滤

14、Filtering名称说明举例eq( index)获取第N个元素获収匹配的第二个元素：$("p").eq ilterf expr)筛选出与抬定表达式匹配的元素集合。保留带有sebct类的元素： $"p"|-filter(selected"|ilterf fn)筛选出与抬定函数返回值匹配的元素集合送个函数内部将对每个对象计算-次(正如 each*).如果调用的函数返回false则这 个元素被剧除，否则就会保留。保留子元素中不含冇01的元素： $<*div*). filter (function (index) return $C*ol*,

15、this), size()»):is( expr)注意：这个函数返回的不是jQuery包装集而 迪 Boolean 值出一个表达式来检査!前选择的元素集合， 如果其中至少有一个元素符合这个给定的表 达式就返回true.如果没有元素符合或者表达式无效，都返 false', 'filter'内部实际也是在调用 送个函数，所以.filter0函数原有的规则 在这里也适用。由于input冗素的父元素是一个表W $rinp uttype='checkboxT*),parent|jmapf callback)将一组元素转换成其他数组(不论是否是元 素数组你可以用这

16、个函数來建立一个列表.不论是把form中的每个input兀素的值建 S<*p*). append( $Cinput*). map(f return $ (this), val();(fl.属性还是CSS样式，或者其他特别形式。 这都可以用'$IMp()'來方便的建立J). get (). join(*» ):riot( expr)W除与指定表达式匹配的元素从P元素中8W除带有select的ID ft*$("p*inot( $C*#selectd")tOJ)ilice( start, end )进取一个匹配的子集选择第一个p元素： 岸 p

17、9;slice© 1);2査找 Finding名称说明举例add( expr)K与表达式匹配的元素添加到jOuery对象 中-这个函数可以用于连接分别与两个表达 式匹配的元素结果集。动态生成一个元素并添加至匹配的力 $("p*j,add("<span>Again</span>'*|children! lexprl)取得一个包含匹配的元素集合中每一个元素 的所有子元素的元素集合。对以通过可选的表达式來过滤所匹配的子元 parents()将査找所有祖辈元素， 而childrenO只考虑子元素而不考虑所有后 代元素。件找DW中的每个子元素

18、：$C*div")xhildren)clo$e$t( expri 1収得与表达式匹配的最新的父元素为爭件源最近的父娄li对氟更换样 $(document) bind("click*» funct$(e target), closest. to»):contentsf)査找匹配元素内部所有的子节点(包括文木 卩点)。如果元素是一个iframe,则査找文档 内容査找所有文本节点并加粗：$"p"|xontents|,not"tnodType=lJ")-ind(expr1®索所有与指定表达式匹配的元素。这个函 数

19、是找出正在处理的元素的后代元素的好方 法.所有搜索都依釜jOuery表达式來完成。这个 农达式可以使川CSS1-3的选择器语法來写。从所有的段落开始进一步搜索下面 相同：$(>"'|,find("span")next( lexprl 1取得一个包含匹配的元素集合中每一个元素 紧邻的后面同辈元素的元素集合。送个函数只返回后面那个紧邻的同辈元素， 而不是后面所有的同辈元素(可以使用 lextAll).可以用一个可选的表达式进行筛 !£找到毎个段落的后面紧邻的同辈元矣 $(0)rwxtOnextAlK fexpri 1査找十前元素之后所有的同辈元

20、素。可以用表达式过滤给第一个div之后的所有元素加个类 $rdiv:first”)rwxtAll()addC3ssCSfUrJoffsetParentf)返回第一个有定位的父类(比如(relative或 absolute),>arent( fexpri)馭得一个包含着所有匹配元素的唯一父元素 的元素集合。你可以使用可选的表达式來筛选C代找毎个段落的父元素：5(p')pa 馆 ntO>drent$( fexpri 1収得一个包含着侨有匹配元素的祖托元素的 元素集合(不包含根元素人可以通过一个可 进的表达式进行筛选。找到毎个span冗素的侨有祖先元素:$'*span*').parnts()>rev( fexpri)収得一个包含匹配的元素集合中每一个元素 紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧 邻的同辈元素会被匹配到而不是前面所有 的同辈元素。找到毎个段落紧邻的前一个同辈元語 岸 p").prev()>revAll( lexprl)査找十前元素之前所有的同辈元素 可以用表达式过滤。给最后一个之前的所有div

人人文库> 全部分类> 应用文书 > 作业报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论