jQuery使用之处理页面元素用法实例

2020-05-22 21:58:21易采站长站整理

    $(function() {
 $(“p”).append($(“a:eq(0)”)); //添加目标为多个<p>
 $(“p:eq(1)”).append($(“a:eq(1)”)); //添加目标是唯一的<p>

    })
</script>
<a href=”#”>链接1</a>
<a href=”#”>链接2</a>
<p>文字1</p>
<p>文字2</p>

以上代码中设置了两个超链接<a>用于append()调用。对于第1个超链接,添加目标$(“p”),一共有两个<p>元素,对于第2个超链接,添加目标是唯一的<p>元素。

可以看到第一个超链接是以复制的形式添加的,第二个超链接则是以移动的方式添加的。

另外从上述可以看出,append()后面的<a>标记被运用了目标<p>的样式风格,同时也是保持了自身的样式风格。这是因为append()是将<a>作为<p>的子标记进行添加的,将<a>放到了<p>的所有子标记(文本)节点后面。

除了append()方法,jQuery还提供了appendTo(target)方法,用来将目标元素添加到指定目标的子元素。它的使用方法和运行结果与append()完全类似。
$(function() {
 $(“img:eq(0)”).appendTo($(“p”)); //添加目标为多个<p>
 $(“img:eq(1)”).appendTo($(“p:eq(0)”)); //添加目标是唯一的<p>
});
<img src=”08.jpg”> <img src=”09.jpg”>
<hr>
<p><img src=”10.jpg”></p>
<p><img src=”10.jpg”></p>
<p><img src=”10.jpg”></p>

对于第一幅照片,同事将其添加到3个p标记中,对于第二幅图片则把单独添加到1个P元素中,从执行结果可以看出,第一幅图片是以复制的形式添加到3个P元素中的,而第二幅图片是以移动的方式添加的。

与append()和appendTo()方式对应,JQ还提供了prepend()和prependTo()方法这两种方法是将元素添加到目标的所有子元素之前,也遵循:复制、移动的添加原则。

除了上述的4种方法之外Jq还提供了before()、insertBefore()、after()、和insertAfter(),用来将元素直接添加到某个节点之前或之后,而不是作为子元素插入。

其中before()与insertBefore()完全相同,after()和insertAfter()也是完全一样的,这里以after()为例
<script type=”text/javascript”>
    $(function() {
 $(“p”).after($(“a:eq(0)”)); //添加目标为多个<p>
 $(“p:eq(1)”).after($(“a:eq(1)”)); //添加目标是唯一的<p>

    });
</script>
<a href=”#”>链接1</a>
<a href=”#”>链接2</a>