jQuery简介（四）

jQuery简介（四）

讲解DOM元素操作

在visualStudio2015中添加一个新的控制器，用控制器生成的方法进行操作，首先如果要使用到JQ方法的就先引入JQ插件。

创建节点

1. 如何在<div id="box"> </div>中添加节点<p><a href="#">content</a></p>

先用JS方法

获取元素box，创建元素节点<p>，再向<p>添加<a>。

如果想改变<a>标签样式

还要在代码中加入 p.setAttribute("class", "par");

这样<a>标签就改变样式了

用JQ方法在不同的标签中添加相同的内容

 <div id="wrapper"></div>中添加节点<p><a href="#">content</a></p>

直接就是获取元素，然后使用append（标签或内容），要注意双引和单引的区分。

也可以在括号中的标签内加写ID或类。

节点创建和后还要添加到id="wrapper"中

$("#wrapper").append('<p><a href="#">content</a></p>');

$(B).append(A) 将新创建A的节点 追加到B(已经存在的父节点)中

 向每个匹配的元素内部追加内容

效果和使用JS方法创建的一样。

还有一个方法就是

$('<p><a href="#">content</a></p>').oppendTo($(“#wrapper”));

$(A).appendTo(B) 将新创建A的节点 追加到B(已经存在的父节点)中

但结果是一样的。

 

1. 向每个匹配的元素内部前置内容，这是向所有匹配元素内部的开始处插入内容的最佳方式。

例如

      

prepend()方法

$("#wrapper").prepend('<p class="par">使用prepend()方法追加的节点123</p>');

他就添加到了最前面了

假如还要添加一个

$('<p class="par">使用prependTo()方法追加的节点345</p>').prependTo($("#wrapper"));

还是在最前面。这是按照代码顺序执行的