jQueryDOM的操作.docxVIP

jQuery DOM操作 基于命令改变页面每天都在与DOM打交道而且晕头转向，不过，自打咱认识了jQuery：是操作属性也不烦了，插入新元素也不晕了，连移动元素及包装元素咱也不抽筋了。。呃，貌似是广告哈？呵呵，不过的确是这样，jQuery为我们提供了丰富的DOM操作方法，使这些复杂的DOM操作变得简单。 继上一回写jQuery的笔记貌似已经过去很长时间了，这一节也确实有必要写一下了，呵呵，Lets Go~ 操作属性： 之前，我们说过.addClass()及.removeClass()方法，更改的其实也是DOM的属性：className。 说到这就得再提一下，为啥元素的类名叫做className而不是直接叫class，因为class是js的保留字。嗯。 那么除了class，DOM元素的其它属性，如：id、rel及href之类的，对于这些属性我们咋操作？ 别急，jQuery提供了.attr()和.removeAttr()方法。 甚至，你也可以用这两个方法来替代.class()方法——如果你想给自己找点麻烦的话，呵呵。。 下面，让我们把红色的字，变成绿色的，而且，我喜欢GOOGLE，但是有一些人喜欢百度，那么好，让我们选择自己喜欢的。 代码如下:这里有个超链接，超链接的地址为a href=http:/ target=_blank class=link百度/a br/ 点击这个按钮，让百度变GOOGLE,再点一下就让它再变回百度input type=button value=变GOOGLE吧 id=but_link/ br/br/ 这里有几个字，字的颜色呢，是红色的，font color=red class=font我是红色，我是红色/font br/ 点击这个按钮，让红色变绿色input type=button value=变绿色吧 id=but_color/ 代码如下:$(document).ready(function(){ $(#but_link).toggle(function(){ $(.link).attr(href,); $(.link).text(GOOGLE); $(this).attr(value,变BAIDU吧); },function(){ $(.link).attr(href,); $(.link).text(百度); $(this).attr(value,变GOOGLE吧); }); $(#but_color).toggle(function(){ $(.font).attr(color,green); $(.font).text(我是绿色，我是绿色); $(this).attr(value,变红色吧); },function(){ $(.font).attr(color,red); $(.font).text(我是红色，我是红色); $(this).attr(value,变绿色吧); }); }); 如果想要循环对一些DOM对象做处理，比如书中的例子，想要对一个DIV下的每个A标签都给其一个唯一的ID 那么就可以用到jQuery的.each()方法，其类似于一个迭代器，有点像PHP的foreach代码如下:$(document).ready(function() { $(div.chapter a).each(function(index) { $(this).attr({ id: wikilink- + index, }); }); }); 这个index参数类似于一个计数器，对第一个链接它的值为0，然后对每个后续的链接它的值会递增1。依此类推。 呃，稍候这些例子，我一起给出演示地址。不过很无奈的是，我国外空间的那个地址被墙了。嗯。 深入理解$()工厂函数： 其实，从刚开始记这个笔记我们就在用这个工厂函数。 在某种意义上来说，这个函数在jQuery库中牌最核心的位置，因为无论在添加效果、事件 还是为匹配的元素集合添加属性时，都离不开它。 然而，除了选择元素之外，$()函数的圆括号内还有另一个玄机——这个强大的特性使得$()函数不仅能够改变页面的视觉外观， 更能改变页面中实际的内容。只要在这对圆括号中放入一组HTML元素，就能轻而易举地改变整个DOM结构。 例如，书中的例子是很恰当的，因为我确实写过FAQ。。。 而FAQ总是一问一答型的（自问自答型的）。那么，因为有的答案太长，所以要在其后面加一个Back to top 可以这样写 代码如下:$(document).ready(function){ $(a href=#topback to top/a); $(a id=top/a); }); 这样就为每个段落后面加了一个超链接“Back to top”，并且也添加了一个”top”锚。 啥？你说你没看见？