【总结整理】JQuery基础学习---DOM篇

时间：2018-02-26 23:27:14 阅读：212 评论：0 收藏：0 [点我收藏+]

标签：实现常见比较 after before attribute 创建兼容 child

前言：

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

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

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

流程中涉及的一点方法：

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

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

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

针对这一系列的DOM操作的问题，jQuery给出了一套非常完美的接口方法

js原生方法创建元素：

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

jquery方法创建元素：

$("<div class=‘right‘><div class=‘aaron‘>动态创建DIV元素节点</div></div>")

.append()appendTo()

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