亲宝软件园·资讯

展开

jQuery DOM操作 基于命令改变页面

人气:0
呃,貌似是广告哈?呵呵,不过的确是这样,jQuery为我们提供了丰富的DOM操作方法,使这些复杂的DOM操作变得简单。
继上一回写jQuery的笔记貌似已经过去很长时间了,这一节也确实有必要写一下了,呵呵,Let's Go~
操作属性:
之前,我们说过.addClass()及.removeClass()方法,更改的其实也是DOM的属性:className。
说到这就得再提一下,为啥元素的类名叫做className而不是直接叫class,因为class是js的保留字。嗯。
那么除了class,DOM元素的其它属性,如:id、rel及href之类的,对于这些属性我们咋操作?
别急,jQuery提供了.attr()和.removeAttr()方法。
甚至,你也可以用这两个方法来替代.class()方法——如果你想给自己找点麻烦的话,呵呵。。
下面,让我们把红色的字,变成绿色的,而且,我喜欢GOOGLE,但是有一些人喜欢百度,那么好,让我们选择自己喜欢的。
复制代码 代码如下:

这里有个超链接,超链接的地址为<a href='http:/www.baidu.com' 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','http://www.google.com');
$('.link').text('GOOGLE');
$(this).attr('value','变BAIDU吧');
},function(){
$('.link').attr('href','http://www.baidu.com');
$('.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="#top">back to top</a>');
$('<a id="top"></a>');
});

这样就为每个段落后面加了一个超链接“Back to top”,并且也添加了一个”top”锚。
啥?你说你没看见?呃,好吧。。我承认因为我还没有插入这个新元素至DOM中,只是创建了出来。
插入新元素:
jQuery提供了两种将元素插入到其他元素前面的方法:.insertBefore()和.before()。
这两个方法作用相同,它们的区别取决于如何将它们与其他方法进行连缀。
那么,很自然的,聪明的你一定会想到,插入到其他元素后面的方法就是.insertAfter()和.after()。
对于刚才的”back to top”我们使用.insertAfter()方法,原因就是我们要在每个答案后面加上这个链接。。嗯。
复制代码 代码如下:

$(document).ready(function){
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('<a id="top"></a>');
});

通过.after()方法也能完成与.insertAfter()相同的任务,只不过必须把选择符表达式放在这个方法的前面,而不是后面。
在使用.after()方法时,$(document).ready()中的第一行代码可以改写成如下所示:
$('div.chapter p').after('<a href="#top">back to top</a>');
使用.insertAfter(),可以通过连缀更多方法连续地对所创建的<a>元素进行操作。
而使用.after(),连缀的其他方法的操作对象就变成了$('div.chapter p')中选择符匹配的元素。
那么,要在元素内插入新的元素咋办啊?刚才说的这些都是使其成为兄弟元素。而怎么插入子元素呢?
别急,有.prependTo()方法呢。
复制代码 代码如下:

$('<a id="top" name="top"></a>').prependTo('body');

.prependTo()方法插入了作为目标的描,我们就为页面添加了一组功能完备的back to top链接。
同样,jQuery还提供了一个方法是.prepend(),看API其作用为:
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
例如:
复制代码 代码如下:

<p>I would like to say: </p>
<!-- 执行完效果 -->
<!--
<p>I would like to say: <b>Hello</b></p>
-->$("p").append("<b>Hello</b>");

包装元素:
jQuery中用于将元素包装在其他元素中的方法,被贴切地命名为:.wrap()。
如果,要将一个
<p>Test Paragraph.</p><div id="content"></div>
里面的<p>标签包在div里面,
<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>
就可以这样来写
$("p").wrap(document.getElementById('content'));
复制元素:
重头戏终于出来了。。嗯。复制元素。。
现年头都实行克隆,不过最近好像很少喊了。喊的最多的就是要克隆人。想想都奇怪。 克隆完后抢你老婆咋办?
呃。闲话少说吧。。jQuery的克隆方法就是.clone()。嗯。相对于插入方法,相当于复制和粘贴。
默认情况下,.clone()方法不仅会复制匹配的元素,也会复制其所有的后代元素。
书上说这个方法也是接受参数的,如果参数值为false,那么就只会复制匹配的元素,而不复制其子元素。
不过我试验后不是这样的。。嗯。
复制代码 代码如下:

<div id="xxx"><p>我可是有内容的DIV</p></div>
<input type='button' id='but_clone' value='复制嘿嘿' /> $('#but_clone').click(function(){
$('#xxx').clone(false).insertAfter($('#xxx'));
});

书上说clone(false)不会复制子标签里的内容,但是我的实验是仍然会复制子标签内容。。这是一处不同。
另外,书上说clone()不会复制元素的事件。这个我试验后也是可以的。。嗯。。还是奇怪。。唉。

当需要多次引用一个jQuery对象时,最佳方式就是把它们保存到变量中。
这样,通过减少对jQuery的$()工厂函数的调用,能够提高遍历DOM的速度。。
呃,这一章就简单的记录完了。有些遗憾,因为没办法按书中的例子来给大伙讲解。那样就是在抄这本书了。
断断续续的,因为中等要吃饭。所以这节写了很长时间,总体效果嘛,自己还算满意哈。呵呵。
下面,把书中的这一段抄下来吧。嗯。就是
DOM操作方法的简单归纳:
要在每个匹配的元素中插入新元素,使用:
.append()
.appendTo()
.prepend()
.prependTo()
要在每个匹配的元素相信的位置上插入新元素,使用:
.after()
.insertAfter()
.before()
.insertBefore()
要在每个匹配的元素外部插入新元素,使用:
.wrap()
要用新元素或文本替换每个匹配的元素,使用:
.html()
.text()
要移除每个匹配的元素中的元素,使用:
.empty()
要从文档中移除每个匹配的元素及其后代元素,但不实际删除它们,使用:
.remove()

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

代码打包下载

加载全部内容

相关教程
猜你喜欢
用户评论