jQuery中DOM的应用

1.节点的创建

一般开发这都是先定义好HTML的结构,这样就不够灵活啦,如果需要先通过Ajax获得数据之后才能确定结构,这样就需要动态的处理节点啦,jQuery提供的借口就能帮助我们解决这个问题。

创建流程:

         1.创建节点(常见的:元素,属性和文本)

         2.添加节点的一些属性

         3.加到文档中

流程中设计到的一点方法:

         1.创建元素:document.createElement

         2.设置属性:setAttribute

         3.添加文本:innerHTML

         4.加入文档:appendChild

例:通过js原生接口创建

HTML 写道
<body>
<h2>动态创建元素节点</h2>
<div class="left">
<div class="aaron">点击body区域会动态创建元素节点</div>
</div>
<script type="text/javascript">
var body = document.querySelector('body');

document.addEventListener('click',function(){

//创建2个div元素
var rightdiv = document.createElement('div')
var rightaaron = document.createElement("div");

//给2个div设置不同的属性
rightdiv.setAttribute('class', 'right')
rightaaron.className = 'aaron'
rightaaron.innerHTML = "动态创建DIV元素节点";

//2个div合并成包含关系
rightdiv.appendChild(rightaaron)

//绘制到页面body
body.appendChild(rightdiv)

},false)
</script>
</body>

 通过jQuery可以简化上面的过程

创建元素节点:$("html结构")        $("<div></div>")

创建为本节点:$("<div>我是文本节点</div>")

创建为属性节点,与创建元素节点相同的方式:$(“<div id="test" class="arron">我是文本节点</div>”)

可以将上面的代码简化如下:

HTML 写道

<h2>动态创建元素节点</h2>
<button>点击通过jQuery动态创建元素节点</button>
<script type="text/javascript">
var $body = $('body');
$body.on('click', function() {
//通过jQuery生成div元素节点
var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
$body.append(div)
})

2. DOM内部插入append()和appendTo()

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

                这个操作与对指定的元素执行原生的appendChild方法添加到文档中的情况类似

appendTo    将所有匹配的元素追加到另一个,指定的元素元素集合中

区别:内容和目标的位置不同

append()前面是被插入的对象,后面是要在对象内插入元素的位置

appendTo()则相反

例:

HTML 写道
<body>
<h2>通过append与appendTo添加元素</h2>
<button id="bt1">点击通过jQuery的append添加元素</button>
<button id="bt2">点击通过jQuery的appendTo添加元素</button>

<div class="content"></div>

<script type="text/javascript">

$("#bt1").on('click', function() {
//.append(), 内容在方法的后面,
//参数是将要插入的内容。
$(".content").append('<div class="append">通过append方法添加的元素</div>')
})

</script>

<script type="text/javascript">

$("#bt2").on('click', function() {
//.appendTo()刚好相反,内容在方法前面,
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
})

</script>

</body>

 3.DOM外部插入after()和before()

after():在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点

before():据参数设定,在匹配元素的前面插入内容

注意点: after向元素的后面添加html代码,如果元素后面有了元素了,那将后面的元素后移,然后将html 代                码插入

               before向元素的前面添加html代码,如果元素前面有了元素了,那将前面的元素前移,然后将html                  代码插入

例:

HTML 写道
<body>
<h2>通过before与after添加元素</h2>
<button id="bt1">点击通过jQuery的before添加元素</button>
<button id="bt2">点击通过jQuery的after添加元素</button>
<div class="aaron">
<p class="test1">测试before</p>
</div>
<div class="aaron">
<p class="test2">测试after</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')

})
</script>
</body>

相关推荐