jQuery基础修炼圣典—DOM篇

Posted ❤喵了个咪❤❤

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery基础修炼圣典—DOM篇相关的知识,希望对你有一定的参考价值。

一、DOM节点的创建

1、创建节点及节点属性

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

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

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

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

创建流程比较简单,大体如下:

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

流程中涉及的一点方法:

  • 创建元素: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>

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

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

针对这一系列的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

一条一句就搞定了,跟写HTML结构方式是一样的

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

(注意:点击事件是绑定在body上的,点击body的任意地方都是可以新增div的。注意body是有高度的,点击空白的地方没有效果是因为body高度没有那么高)

这就是jQuery创建节点的方式,让我们保留HTML的结构书写方式,非常的简单、方便和灵活。

二、DOM节点的插入

3、内部插入append()与appendTo()

动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来。那么问题来了,怎么放到文档上?

这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部。针对这样的处理,jQuery就定义2个操作的方法

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

appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中

简单的总结就是:

.append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同

append()前面是要选择的对象,后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容,而后面是要选择的对象

示例代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
 7     <style>
 8     .content {
 9         width: 300px;
10     }
11     .append{
12         background-color: blue;
13     }
14     .appendTo{
15         background-color: red;
16     }
17     </style>
18 </head>
19 
20 <body>
21     <h2>通过append与appendTo添加元素</h2>
22     <button id="bt1">点击通过jQuery的append添加元素</button>
23     <button id="bt2">点击通过jQuery的appendTo添加元素</button>
24     <div class="content"></div>
25     <script type="text/javascript">
26 
27         $("#bt1").on(\'click\', function() {
28             //.append(), 选择表达式在函数的前面,
29             //参数是将要插入的内容。
30             $(".content").append(\'<div class="append">通过append方法添加的元素</div>\')
31         })
32 
33     </script>
34     <script type="text/javascript">
35 
36         $("#bt2").on(\'click\', function() {
37             //.appendTo()刚好相反,内容在方法前面,
38             //无论是一个选择器表达式 或创建作为标记上的标记
39             //它都将被插入到目标容器的末尾。
40             $(\'<div class="appendTo">通过appendTo方法添加的元素</div>\').appendTo($(".content"))
41         })
42 
43     </script>
44 </body>
45 </html>
View Code

4、外部插入after()与before()

节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系。之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处理,也就是兄弟之间的关系处理,这里jQuery引入了2个方法,可以用来在匹配I的元素前后插入内容

选择器的描述:

  • before与after都是用来对相对选中元素外部增加相邻的兄弟节点
  • 2个方法都是都可以接收HTML字符串,DOM 元素,元素数组,或者jQuery对象,用来插入到集合中每个匹配元素的前面或者后面
  • 2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码

注意点:

  • after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入
  • before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插
 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     .aaron{
10         border: 1px solid red;
11     }
12     </style>
13 </head>
14 
15 <body>
16     <h2>通过before与after添加元素</h2>
17     <button id="bt1">点击通过jQuery的before添加元素</button>
18     <button id="bt2">点击通过jQuery的after添加元素</button>
19     <div class="aaron">
20         <p class="test1">测试before</p>
21     </div>
22     <div class="aaron">
23         <p class="test2">测试after</p>
24     </div>
25     <script type="text/javascript">
26     $("#bt1").on(\'click\', function() {
27         //在匹配test1元素集合中的每个元素前面插入p元素
28         $(".test1").before(\'<p style="color:red">before,在匹配元素之前增加</p>\'jQuery基础(样式篇,DOM对象,选择器,属性样式)

javascript基础修炼——前端路由的基本原理

jQuery基础——DOM篇

jQuery修炼心得-DOM节点的插入

jQuery修炼心得-DOM节点的删除

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段