jQuery基础修炼圣典—DOM篇（一）

1、创建节点及节点属性

通过JavaScript可以很方便的获取DOM节点，从而进行一系列的DOM操作。但实际上一般开发者都习惯性的先定义好HTML结构，但这样就非常不灵活了。

试想下这样的情况：如果我们通过AJAX获取到数据之后然后才能确定结构的话，这种情况就需要动态的处理节点了

本文向大家介绍一下如何使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容，相信本文介绍一定会让你有所收获。

先介绍下需要用到的浏览器提供的一些原生的方法（这里不处理低版本的IE兼容问题）

创建流程比较简单，大体如下：

创建节点(常见的：元素、属性和文本)
添加节点的一些属性
加入到文档中

流程中涉及的一点方法：

创建元素：document.createElement
设置属性：setAttribute
添加文本：innerHTML
加入文档：appendChild

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
</head>

<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>

</html>

如上面代码所示，写一个最简单的元素创建，我们会发现几个问题：

每一个元素节点都必须单独创建
节点是属性需要单独设置，而且设置的接口不是很统一
添加到指定的元素位置不灵活
最后还有一个最重要的：浏览器兼容问题处理

针对这一系列的DOM操作的问题，jQuery给出了一套非常完美的接口方法，我们之后就开始深入学习

2、jQuery节点创建与属性的处理

上一节介绍了通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程

创建元素节点：

可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")

$("<div></div>")

创建为本节点：

与创建元素节点类似，可以直接把文本内容一并描述

$("<div>我是文本节点</div>")

创建为属性节点：

与创建元素节点同样的方式

$("<div id='test' class='aaron'>我是文本节点</div>")

我们通过jQuery把上一届的代码改造一下，如下面代码所示：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 6     <title></title>
 7     <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
 8     <style>
 9     .left,
10     .right {
11         width: 300px;
12         height: 120px;
13     }
14     
15     .left div,
16     .right div {
17         width: 100px;
18         height: 90px;
19         padding: 5px;
20         margin: 5px;
21         float: left;
22         border: 1px solid #ccc;
23     }
24     
25     .left div {
26         background: #bbffaa;
27     }
28     
29     .right div {
30         background: yellow;
31     }
32     </style>
33 </head>
34 
35 <body>
36     <h2>动态创建元素节点</h2>
37     <button>点击通过jQuery动态创建元素节点</button>
38     <script type="text/javascript">
39     var $body = $('body');
40     $body.on('click', function() {
41         //通过jQuery生成div元素节点
42         var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
43         $body.append(div)
44     })
45 
46 
47 
48     // var body = document.querySelector('body');
49 
50     // document.addEventListener('click',function(){
51 
52     //  //创建2个div元素
53     //  var rightdiv = document.createElement('div')
54     //  var rightaaron = document.createElement("div");
55 
56     //  //给2个div设置不同的属性
57     //  rightdiv.setAttribute('class', 'right')
58     //  rightaaron.className = 'aaron'
59     //  rightaaron.innerHTML = "动态创建DIV元素节点";
60 
61     //  //2个div合并成包含关系
62     //  rightdiv.appendChild(rightaaron)
63 
64     //  //绘制到页面body
65     //  body.appendChild(rightdiv)
66 
67     // },false)
68     </script>
69 </body>
70 
71 </html>

View Code