jQuery简介(四)
讲解DOM元素操作
在visualStudio2015中添加一个新的控制器,用控制器生成的方法进行操作,首先如果要使用到JQ方法的就先引入JQ插件。
创建节点
- 如何在<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(已经存在的父节点)中
但结果是一样的。
- 向每个匹配的元素内部前置内容,这是向所有匹配元素内部的开始处插入内容的最佳方式。
例如
prepend()方法
$("#wrapper").prepend('<p class="par">使用prepend()方法追加的节点123</p>');
他就添加到了最前面了
假如还要添加一个
$('<p class="par">使用prependTo()方法追加的节点345</p>').prependTo($("#wrapper"));
还是在最前面。这是按照代码顺序执行的