JavaScript DOM操作及jQuery框架用法

2018-12-07 本文已影响20人 kevin_captain

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