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

与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>
<p>内容1</p>
<p>内容2</p>

以上代码运行结果,可以看到after()方法同样遵循单个目标移动,多个目标复制的原则,并且不再是作为子元素添加。而是紧贴在目标元素之后的兄弟元素。

3.删除元素。

在DOM编程中,要删除某个元素往往借助父元素的removeChild()方法,而jQuery提供了remove()方法,可以直击删除元素。

例如$("p").remove();是删除整个页面中的所有p元素标记。

remove()也接受参数。

复制代码 代码如下:

<script type="text/javascript">
    $(function() {
 $("p").remove(":contains('1')");
 //$("p:contains('1')").remove();
    });
</script>
<a href="#">链接1</a>
<a href="#">链接2</a>
<p>内容1</p>
<p>内容2</p>

以上代码中remove()使用了过滤选择器,文本内容包含1的P元素被删除掉了。

虽然remove()可以接受参数,但是通常还是建议在选择器阶段就将要删除的对象确定,然后用remove()一次性删除。("p:contains('1')").remove();其效果是完全一样的,并且效果和其它代码的风格是统一的。

在DOM中,如果希望把某个元素的子元素全部删除,往往for循环的配合hasChildNodes()来判断,并用removeChildNode()逐一删除,Jquery提供了empty()方法直接删除所有的子元素。

复制代码 代码如下:

<script type="text/javascript">
    $(function() {
    $("p").empty();    //删除p的所有子元素
    });
</script>
<a href="#">链接1</a>
<a href="#">链接2</a>
<p>内容1</p>
<p>内容2</p>

4.克隆元素。

第二节提到元素的复制和移动,但这取决于目标数的个数,很多时候开发者希望即使目标对象只要一个,同样能执行复制操作。

jQuery提供了clone()方法来完成这项任务。

复制代码 代码如下:

<script type="text/javascript">
    $(function() {
 $("img:eq(0)").clone().appendTo($("p"));
 $("img:eq(1)").clone().appendTo($("p:eq(0)"));

});
</script>
<img src="https://www.jb51.net/article/08.jpg"> <img src="https://www.jb51.net/article/09.jpg">
<hr>
<p><img src="https://www.jb51.net/article/10.jpg"></p>
<p><img src="https://www.jb51.net/article/10.jpg"></p>
<p><img src="https://www.jb51.net/article/10.jpg"></p>

同样完成了上上节中appendTo()方法达到的结果。

另外clone()函数还接受布尔值对象作为参数,的那个参数为true时,除了克隆本身,它所携带的时间方法将一块被复制。

复制代码 代码如下:

<script type="text/javascript">
$(function() {
 $("input[type=button]").click(function() {
     //克隆自己,并且克隆点击的行为
     $(this).clone(true).insertAfter(this);
 });
});
</script>
<input type="button" value="Clone Me">

以上代码在单击按钮时克隆按钮本身,同时克隆单击事件,克隆出来的按钮同样具备有克隆自己的功能。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxwgy.html