总结一下jQuery操作元素节点的方法(创建、选择、插入节点)

2021年9月12日 5点热度 0条评论 来源: xinghuo0007

我的个人博客开通了,地址:https://timewentby.com 欢迎访问

知识点一:创建节点

注意:Jquery创建元素节点、属性节点、文本节点都使用$(html)

1.创建元素节点:$("<li></li>");
2.创建属性节点:$("<li id='test'></li>");
3.创建文本节点:$("hello world !");
4.下面是创建三者的结合:$("<li id='test'>hello world !</li>");
   
 解释:4是创建一个id属性为test,文本节点为hello world !的li节点

知识点二:获得节点



主要是jQuery的选择器:下面说下最基础的几个

	  选择器           格式              举例
	1.id选择器     $("#id的属性值")     $("#name");
	2.class选择器  $(".class的属性值")  $(".name")
	3.标签选择器    $("html标签")       $("p")
	4.*选择器      $("*")             $("*")
	5.群组选择器    $("选择器1,选择器二,...")  $("p,#name")
	

知识点三:插入节点

内部插入(当做子节点插入):
	append(content|fn)   向每个匹配的元素内部末尾追加内容。
	appendTo(content)    把所有匹配的元素追加到另一个指定的元素元素集合末尾。
	prepend(content|fn)  向每个匹配的元素内部头部内容。
	prependTo(content)   把所有匹配的元素追加到另一个指定的元素元素集合头部
外部插入(当做兄弟节点插入):
	after(content|fn)    向每个匹配元素的后面添加内容
	before(content|fn)   向每个匹配元素的前面添加内容
	insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后
	面。
	insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的
	前面。

内部插入(当做子节点插入)案例:

<div id="div1">
    <p id="one">我是第一个p标签</p>
    <p id="two">我是第二个p标签</p>
</div>

 <p id="three">我是第三个p标签</p>

 <script>
       var p3 =  $("#three");
       var div = $("#div1");
</script>

1.append()实例

   div.append(p3)

执行完,结果网页结果为:

<div id="div1">
    <p id="one">我是第一个p标签</p>
    <p id="two">我是第二个p标签</p>
    <p id="three">我是第三个p标签</p>
</div>

总结:

1.可以看出append()方法,可以将id=three的p标签添加进了div中
2.这是我们也发现,原来位置上的id=three的p标签会被删除,等于是实际上是移动div里
面去了,也就是说在使用append()的时候,如果被添加元素会被移动到要添加的元素里面
了。

2.appendTo()实例:

p3.appendTo(div)

结果为:

<div id="div1">
           <p id="one">我是第一个p标签</p>
           <p id="two">我是第二个p标签</p>
           <p id="three">我是第三个p标签</p>
</div>

总结:

1.结果和append()执行完是一样的,只是颠倒了一下位置而已

3.prepend()实例:

div.prepend(p3);

结果为:

<div id="div1">
		<p id="three">我是第三个p标签</p>
         <p id="one">我是第一个p标签</p>
         <p id="two">我是第二个p标签</p>
</div>

4.prependTo()实例:

p3.prependTo(div)

结果为:

<div id="div1">
		<p id="three">我是第三个p标签</p>
         <p id="one">我是第一个p标签</p>
         <p id="two">我是第二个p标签</p>
</div>

外部插入(当做子节点插入)案例:

<div id="div1">
    <p id="one">我是第一个p标签</p>
</div>
    <p id="two">我是第二个p标签</p>
    <p id="three">我是第三个p标签</p>

    <script>
       var p1 =  $("#one");
       var div = $("#div1");
    </script>

1.after()

div.after(p1);

结果为;

<div id="div1"></div>
<p id="one">我是第一个p标签</p>
<p id="two">我是第二个p标签</p>
<p id="three">我是第三个p标签</p>

总结:

1.第一个p标签插入到了div的后面
2.第一个p标签在div中的移除
3.插入的过程相当于将第一个p标签从div中移动到div的后面
 div.before(p1) ;

结果:

<p id="one">我是第一个p标签</p>
<div id="div1"></div>
<p id="two">我是第二个p标签</p>
 <p id="three">我是第三个p标签</p>

3.insertAfter()案例:

p1.insertAfter(div);

结果:

<div id="div1"></div>
<p id="one">我是第一个p标签</p>
<p id="two">我是第二个p标签</p>
<p id="three">我是第三个p标签</p>

总结:

1。结果跟after()一样,只是颠倒了位置

4.insertBefore()案例:

   p1.insertBefore(div);

结果:

<p id="one">我是第一个p标签</p>
<div id="div1"></div>
<p id="two">我是第二个p标签</p>
 <p id="three">我是第三个p标签</p>

总结:

1。结果跟before()一样,只是颠倒了位置
    原文作者:xinghuo0007
    原文地址: https://blog.csdn.net/xinghuo0007/article/details/71437066
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。