JavaScript DOM操作及jQuery框架用法

Date: 2018/10/2

1. 认识DOM

1.1 什么是DOM

DOM（Document Object Model）文档对象模型

1.2 DOM有什么作用

DOM以树结构表达了HTML文档

2. DOM元素与节点

2.1 元素是指什么？

标签元素

2.2 什么是节点？

HTML文档中的所有内容都是节点

整个文档是一个节点

每个HTML元素是元素节点

HTML元素内的文本是文本节点

注释也是节点

2.3 节点树

1538449360687.png

3. 获取元素

先来说一下DOM对象，在JavaScript中DOM对象用document表示，document是window对象的一个属性，对window的操作叫做BOM操作，后续再简单说说BOM

3.1 通过id获取HTML元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        Hello World!
    </div>
<script>
    var div = document.getElementById("box");
    console.log(div);
</script>
</body>
</html>

3.2 通过标签名获取元素集

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <p>Hello World!</p>
        <p>Yes!</p>
    </div>
    <p>NO</p>
<script>
    var div = document.getElementsByTagName("p");
    console.log(div);
</script>
</body>
</html>

3.3 通过类名获取元素集

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div class="box">
        <p class="box">Hello World!</p>
    </div>
<script>
    var div = document.getElementsByClassName("box");
    console.log(div);
</script>
</body>
</html>

3.4 获取父元素，子元素，相邻元素

属性名	说明
parentNode	获取父元素节点
previousSibling	获取相邻的上一个兄弟元素节点
nextSibling	获取相邻的下一个兄弟元素节点
childNodes	获取全部子元素节点
firstChild	获取第一个子元素节点
lastChild	获取最后一个子元素节点

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box"><h1>TITLE</h1><p id="txt">Hello World!</p><h2>弟弟</h2></div>
<script>
    var p = document.getElementById("txt");
    console.log(p.parentNode);
    console.log(p.previousSibling);
    console.log(p.nextSibling);
    console.log("\n");
    var div = document.getElementById("box");
    console.log(div.childNodes);
    console.log(div.firstChild);
    console.log(div.lastChild);
</script>
</body>
</html>

4. 元素操作

4.1 创建元素

createElement("标签名")

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">

    </div>
<script>
    var p = document.createElement("p");
    var div = document.getElementById("box");
    div.appendChild(p);
</script>
</body>
</html>

4.2 添加子元素

appendChild(Child_Node)

见4.2代码

4.3 删除子元素

removeChild(Child_Node)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <h1>Hehe</h1>
    </div>
<script>
    var div = document.getElementById("box");
    var h1 = document.getElementsByTagName("h1")[0];
    div.removeChild(h1);
</script>
</body>
</html>

4.4 替换子元素

replaceChild(newnode,oldnode)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <h1>Hehe</h1>
    </div>
<script>
    var h2 = document.createElement("h2");
    h2.innerHTML = "OK!";
    var h1 = document.getElementsByTagName("h1")[0];
    var div = document.getElementById("box");
    div.replaceChild(h2,h1);
</script>
</body>
</html>

4.5 在指定子元素前插入新子元素

insertBefore(newNode,existingNode)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <h1>Hehe</h1>
    </div>
<script>
    var h2 = document.createElement("h2");
    h2.innerHTML = "OK!";
    var h1 = document.getElementsByTagName("h1")[0];
    var div = document.getElementById("box");
    div.insertBefore(h2,h1);
</script>
</body>
</html>

4.6 修改元素内容

innerHtml 属性与innerText属性，可以设置或获取内容

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <h1>Hehe</h1>
    </div>
<script>
    var h1 = document.getElementsByTagName("h1")[0];
    h1.innerHTML = "<a>OK</a>";
    // h1.innerText = "<a>OK</a>";
</script>
</body>
</html>

5 对元素的属性进行操作

5.1 创建属性节点

createAttribute("attrName")

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">        
    </div>
<script>
    var cls = document.createAttribute("class");
    var div = document.getElementById("box");
    div.setAttributeNode(cls);
</script>
</body>
</html>

5.2 返回元素属性值

getAttribute("attrName")

5.3 设置元素属性

setAttribute("attrName","attrValue")

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        
    </div>
<script>
    var div = document.getElementById("box");
    console.log(div.getAttribute("id"));
</script>
</body>
</html>

6 对元素的样式进行操作

6.1 获取样式

element.style

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="background:red;width:100px;height:100px;">
        
    </div>
<script>
    var div = document.getElementById("box");
    console.log(div.style);
</script>
</body>
</html>

6.2 设置样式

element.style.样式名 = “值”

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="background-color:red;width:100px;height:100px;">
        
    </div>
<script>
    var div = document.getElementById("box");
    console.log(div.style);
    div.style.backgroundColor = "yellow";
    div.style.width = "20px";
</script>
</body>
</html>

7 DOM事件

7.1 鼠标事件

属性	描述
onclick	单击
ondblclick	双击
onmousedown	鼠标按钮被按下
onmouseup	鼠标按钮被释放
onmouseenter	鼠标指针进入
onmouseleave	鼠标指针移出
onmousemove	鼠标移动
onmouseover	鼠标移到元素上面
onmouseout	鼠标从某元素移开
onwheel	鼠标滚动

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <h1 id="h1">点我</h1>
    <h2>我是展示的信息</h2>
<script>
    var h1 = document.getElementById("h1");
    h1.onclick = function (){
        console.log("点击");
        var h2 = document.getElementsByTagName("h2")[0];
        h2.innerHTML = "楼上那哥们被点中了！";
    }
</script>
</body>
</html>

7.2 键盘事件

属性	描述
onkeydown	某个键被按下
onkeypress	某个键被按下并松开
onkeyup	某个键松开

通过window.event获取事件响应值，其中event.keyCode是按键值，在IE浏览器里面是event.which

常见的keyCode值对应的按键

7.3 表单事件

属性	描述
onchange	表单内容改变时触发
onfocus	元素获取焦点时触发
onblur	元素失去焦点时触发
oninput	元素获取用户输入时触发
onsubmit	表单提交时触发
onsearch	用户向搜索域输入文本时触发（input的type="search"）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <form action="">
        <input id="name" type="text" value="Kevin">
    </form>
<script>
    var i = document.getElementById("name")
    i.oninput = function(){
        console.log("内容被修改");
    }
</script>
</body>
</html>

等。。。

8 jQuery框架

Vue.js Angular.js React.js

8.1 下载和引用jQuery框架

下载地址

也可以直接引用网上的CDN下的地址，如下：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

8.2 jQuery有什么作用？

快捷处理DOM操作，更加形象化与高效

9 jQuery获取元素方法

9.1 $()函数

一个$()函数解决了通过id,class,标签的选择方式，遵循css的选择器样式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <p class="txt">Hello World!</p>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    console.log($("#box"));
    console.log(("#box .txt"));
</script>
</body>
</html>

9.2 获取父元素，子元素，兄弟元素的函数方法

获取父元素

parent() 父元素
parents() 祖辈元素，一直到文档的根元素html
parentsUntil(Node) 与Node之间的祖辈元素

获取后代元素

children() 所有直接子元素，可选参数过滤条件
find() 查找后代元素，参数为后代的元素选择器

兄弟元素

siblings() 所有兄弟元素
next() 下一个兄弟元素
nextAll() 后面跟随的所有兄弟元素
nextUntil(Node) 后面跟随的与Node之间的所有兄弟元素
prev() 前一个兄弟元素
prevAll() 前面所有的兄弟元素
prevUntil(Node) 前面的与Node之间的兄弟元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <p id="txt">Hello World!</p>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var p = $("#txt");
   var body = $("body");
   console.log(p.parent());
   console.log(p.parents());
   console.log(p.parentsUntil("body"));
   console.log(body.find("p"));
</script>
</body>
</html>

9.3 过滤

first() 首个元素
last() 最后一个元素
eq(int) 索引号为int的元素
filter(".url") 匹配class含有类名url的元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <p id="txt">Hello World!</p>
        <p>2</p>
        <p>3</p>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var p = $("p");   
   console.log(p);
   console.log(p.filter("#txt"));
</script>
</body>
</html>

10 jQuery的元素操作

10.1 添加元素

append() - 在被选元素的结尾插入子内容
prepend() - 在被选元素的开头插入子内容
after() - 在被选元素之后插入兄弟内容
before() - 在被选元素之前插入兄弟内容

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1>你好</h1>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var div = $("#box");
   div.append("<h1>Hello</h1>");
   div.prepend("<h1>Hi</h1>")
   div.after("我在div外面");
</script>
</body>
</html>

10.2 删除元素

remove() - 删除被选元素（及其子元素），可选参数为过滤条件
empty() - 从被选元素中删除子元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1>你好</h1>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var div = $("#box");
   div.after("我在div外面");
   div.remove();
</script>
</body>
</html>

10.3 设置内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单input的值

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title">你好</h1>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
//    h1.html("<a href='http://www.baidu.com'>百度</a>");
   h1.text("<a href='http://www.baidu.com'>百度</a>");
</script>
</body>
</html>

11 jQuery对元素属性的操作

使用attr("属性名"，"属性值")，或参数为一个map值

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title">你好</h1>
        <input id="name" type="text" value="Kevin">
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title"); 
   h1.attr({
    "class":"red",
    "data":"10"
   });
</script>
</body>
</html>

12 jQuery操作CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

css()函数讲解，获取css属性，设置单个css属性，设置多个css属性

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <input id="name" type="text" value="Kevin">
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title"); 
   h1.addClass("active");
   h1.removeClass("hide");
</script>
</body>
</html>

13 jQuery事件

13.1 bind()方法

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <input id="name" type="text" value="hehe">
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
   h1.bind("click",function(){
       console.log("点击");
   });
</script>
</body>
</html>

13.2 change()处理表单

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
 <input class="field" type="text" />
<p>
<select class="field">
<option value="volvo">1</option>
<option value="saab">2</option>
<option value="fiat">3</option>
<option value="audi">4</option>
</select>
</p>
<script type="text/javascript">
    $(".field").change(function(){
        $(this).css("background-color","#FFFFCC");
    });
</script>
</body>
</html>

14 jQuery的效果

14.1 隐藏和显示

hide()
show()
toggle()

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <input id="name" type="text" value="hehe">
        <h2 id="h2">隐藏/显示</h2>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
//    h1.hide();
//    h1.show();
    h1.bind("click",function(){
        $("#h2").toggle();
    })
</script>
</body>
</html>

14.2 淡入淡出

fadeIn() 参数为时间单位毫秒
fadeOut()
fadeToggle()
fadeTo()

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <h2 id="h2">隐藏/显示</h2>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
    h1.bind("click",function(){
        $("#h2").fadeToggle();
    })
</script>
</body>
</html>

14.3 滑动

slideDown()
slideUp()
slideToggle()

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <h2 id="h2">隐藏/显示</h2>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
    h1.bind("click",function(){
        $("#h2").slideToggle();
    })
</script>
</body>
</html>

14.4 动画

animate({params},speed,callback);

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <h2 id="h2">隐藏/显示</h2>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
    h1.bind("click",function(){
        $("#h2").animate({
            fontSize:"100px"
        },3000);
    })
</script>
</body>
</html>

如果你觉得文章有用就分享收藏一波吧ヾ(•ω•`)o

最后编辑于：2018.12.07 16:44:50

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,458评论 4赞 363
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,454评论 1赞 294
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,171评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,062评论 0赞 207
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,440评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,661评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,906评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,609评论 0赞 200
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,379评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,600评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,085评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,409评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,072评论 3赞 237
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,088评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,860评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,704评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,608评论 2赞 270