JavaScript之DOM

一、JavaScript 之 BOM

Browser Object Model (浏览器对象模型)，提供操作当前窗口的方法。顶层人对象为window，伴随页面运行，自动产生，直接使用，使用时可以省略。

1. window

1.1 方法

1.1.1 网页弹框

alert("")警告框

prompt("")输入框

confirm("")确认框，返回布尔值对应确定（true）和取消（false）

1.1.2 窗口

close()关闭当前窗口

open("URL")新建窗口访问URL

// console.log(window);
var res = window.confirm("是否确定？");
console.log(res);
if(res){
    window.close(); // 关闭当前窗口
}else{
    window.open("https://www.cnblogs.com/chancey/") //新建窗口访问指定URL
}
*/

//全局变量和全局函数作为window 对象的属性和方法
var a = 100;
function f1(){
    console.log("F1 被调用");
};
console.log(a,window.a);
f1();
window.f1();

1.1.3 定时器

间歇调用

周期性的定时器：间隔一段时间，执行一次代码

开启：setInterval(function,interval)(相关事件，间隔时间)

参数：需要执行的代码；时间间隔，单位为毫秒，1s=1000ms

返回值：定时器的ID

关闭：clearInterval(timer);通过定时器的ID停止间歇调用

function start(){
    //每隔一秒打印系统时间
    timer = setInterval(function(){
        var date = new Date();
        document.write(date,"<br/>");
    },1000)
}
function stop(){
    clearInterval(timer);
}

超时调用

一次性定时器：等待一段时间后，执行一次代码（一次性）

等待一段时间后，执行一次代码

开启：vat timer = setTimeOut

// 倒时
function f2(){
    var i = 5;
    var timer = setInterval(function (){
        console.log(i);
        i--;
        if(i == 0){
            // 停止
            clearInterval(timer);
        }
    },1000);

1.2 属性

document、location、history

1.2.1 地址栏

location

保存当前页面的URL信息

属性：href读取或设置窗口的URL

方法：reload(false)重新加载页面，参数默认为false，表示从缓存中加载，设置为true，强制从服务器端请求

<button onclick="console.log(location.href);">获取URL</button>
<button onclick="location.href='01-widnow.html';">跳转</button>
<button onclick="location.reload();">刷新</button>

1.2.2 URL

保存当前窗口访问过的URL数量

属性：length保存当前窗口访问过的URL数量

方法：back()后退 forward()前进 go(n)前进或后退n步，参数为正表示前进，负值为后退

<body>
    <a href="#">location</a>
    <a href="03-location.html">location</a>
    <button onclick="console.log(history.length)">length</button>
    <button onclick="history.back()">后退</button>
    <button onclick="history.go(-2)">后退2步</button>
    <button onclick="history.forward()">前进</button>
    <button onclick="history.go(2)">前进2步</button>
</body>

history

history.length

保存当前窗口的历史记录长度

变化：

在页面中访问超链接，会生成新的历史记录（页面A-->页面B-->页面C 生成三条历史记录）
前进/后退操作不会生成新的历史记录
退回页面A，通过超链接直接访问页面C，会先出栈后入栈（2条历史记录）

原始：A-->B-->C

现在：A-->C

二、JavaScript 之 DOM

Document Object Model （文档对象模型），提供操作文档的方法。每个html文件都视为一片文档，操作文档实际是围绕HTML标签进行。

1. 节点

1.1 节点对象

对文档中所有的内容进行封装，变成JS中的节点对象。

1.2 节点分类

元素节点（标签）
属性节点（标签属性）
文本节点（文本内容）

1.3 获取元素节点

根据标签名获取节点列表document.getElementsByTagName("h1");
根据ID值获取具体元素节点document.getElementById("d1");
根据class属性值获取元素document.getElementsByClassName("c1");
根据name属性值获取节点列表document.getElementsByName("");

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function show(){
            var list1 = document.getElementsByName("username");
            var list2 = document.getElementsByName("gender");
            // console.log(list1,list2);
            
            // 获取表单控件的值
            console.log(list1[0].value);
            console.log(list2[0].value);
        }
    </script>
</head>
<body>
    <h1>hello world !!!</h1>
    <h1>hello world !!!</h1>
    <h1 class="c1">hello world !!!</h1>
    <h1 id="d1">hello world !!!</h1>
    <h1 class="c1">hello world !!!</h1>
    <input type="text" name="username">
    <input type="radio" name="gender" value="boy">男
    <input type="radio" name="gender" value="girl">女
    <button onclick="show()">显示</button>
    <script>
        // 1.根据标签名获取元素节点
        var elems = document.getElementsByTagName("h1");
        console.log(elems);
        // 从列表获取元素节点
        var elem1 = elems[0];
        // 修改元素节点的内容
        console.log(elem1.innerHTML);
        elem1.innerHTML = "<span> hello python ! </span>";
        // 从列表中获取第二个元素节点，修改内容为超链接文本
        var elem2 = elems[1];
        elem2.innerHTML = "<a href='http://www.cnblogs.com/chancey' target=_blank>点击跳转博客</a>"
        
        // 2.根据ID属性值获取元素节点
        var elem3 = document.getElementById("d1");
        console.log(elem3,elem3.innerHTML); // .innerHTML用来获取标签内容

        // 3.根据class属性值获取元素节点列表
        var list1 = document.getElementsByClassName("c1"); // 等价于window.a = 100;
        // list1.innerHTML = "1234"; // innerHTML是元素节点的属性
        list1[0].innerHTML = "<a href=''>我的GitHub</a>";
        list1[1].innerText = "<a href=''>我的GitHub</a>"; // 并不会解析HTML标签
    </script>
</body>
</html>

1.4 操作内容

innerHTML读取或设置元素的内容，可以识别标签语法；

innerText读取或设置元素的内容，不能识别标签语法；

value读取或设置表单控件的值

1.5 操作标签属性

(1) 元素节点调用的相关方法

setAttribute("attrName","value");设置标签属性
getAttribute("attrName")获取标签属性
removeAttribute("attrName")移除标签属性

var h1 = document.getElementsByTagName("h1")[0];
h1.setAttribute("id","d1"); // 添加属性ID为d1
h1.setAttribute("class","c1"); // 添加类名为c1
h1.setAttribute("class","c1 c2"); // 添加类名为c1
console.log(h1.getAttribute("id"));
h1.removeAttribute("id");
console.log(h1.getAttribute("id"));

(2) 标签属性都是元素节点对象的属性，可以使用点语法访问

// 获取元素节点
var h2 = document.getElementsByTagName("h2")[0];
h2.id = "d2"; //添加id属性
h2.className = "c1"; //添加class属性
h2.id = ""; // 移除ID属性
h2.className = null; // 移除class属性

1.6 封装

写一个JS文件

// 封装函数，获取元素节点
function $ (tag,index){
    var elems = document.getElementsByTagName(tag);
    if (index){
        // 判断index为非零下标
        return elems[index];
    }else{
        return elems[0];
    }
}
// $("h1") 参数index省略，默认为undefined

在HTML中引用

<html lang="en">
<head>
    <script src="js/index.js"></script>
</head>
<body>
    <h2>标题</h2>
    <h2>标题2</h2>
    <script>
        var h2 = $("h2"); // 自己封装$()获取元素
        h2.innerHTML = "Chancey Is Great !";
    </script>
</body>
</html>

1.7 操作标签样式

(1) 为元素添加id或class属性对应选择器样式；

(2) 操作元素节点的style属性，直接设置行内样式style属性返回样式表对象，由CSS的属性组成，可以使用点语法访问。所有带有"-"的CSS属性一律更名为驼峰标识。

var elem2 = $("h1",1);
// elem2.style = "height: 200px; background-color: pink;" // 统一设置行内样式
elem2.style.height = "200px";
elem2.style.backgroundColor = "pink";
elem2.style.textAlign = "center";
elem2.style.lineHeight = "200px";

1.8 层次属性

元素节点的层次属性

(1) parentNode获取唯一的父元素

(2) childNodes获取子节点数组，包含文本节点

(3) children获取子节点数组，不包含文本节点

(4) nextSibling/netElementSibling获取下一个兄弟节点、获取下一个元素兄弟节点

(5) previousSibling/previousElementSibling获取前一个兄弟节点

(6) attributes获取属性节点

var h1 = $("h1");
console.log(h1.parentNode);
// 获取子节点数组
console.log($("div").childNodes);
// 获取子元素的数组（不包含文本节点）
console.log($("div").children); // 直接对应的是标签
// 获取兄弟节点
console.log(h1.nextSibling,h1.nextElementSibling);
console.log(h1.previousSibling,h1.previousElementSibling);

// 获取属性节点
console.log(h1.attributes);

console.log(h1.innerHTML);
console.log(h1.childNodes);

1.9 节点编辑

节点的创建、添加、删除

(1) 节点创建

创建元素节点：document.createElement("h1");

(2) 节点添加

添加和删除操作只能由父元素来执行

添加至父元素末尾parentNode.appendChild(element);
添加在指定的位置parentNode.insertBefore(newElement,oldElement);

(3) 节点删除

parentNode.removeChild(element);

// 创建元素节点
var h1 = document.createElement("h1");
h1.innerHTML = "动态创建标题";
h1.id = "d1";
console.log(h1);
// 元素的添加
// console.log(window.document);
// 添加至页面显示，body元素作为document对象属性的存在，可以直接访问
document.body.appendChild(h1); 
// 页面标签与元素节点一一对应，页面中想要出现几个标签，就对应创建几个节点
document.body.appendChild(h1); 
document.body.appendChild(h1); 

var h2 = document.createElement("h2");
h2.innerHTML = "标题2";
document.body.insertBefore(h2,h1);

//删除节点
document.body.removeChild(h2);

练习

创建输入框，按钮和div，点击按钮时获取输入框中的内容以一级标题的形式显示在div中

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习</title>
    <script>
        function f1(){
            var input = document.getElementsByTagName("input")[0];
            var div = document.getElementsByTagName("div")[0];
            div.innerHTML = "<h1>"+input.value+"</h1>";
        }
    </script>
</head>
<body>
    <input type="text" placeholder="请输入内容" name="text">
    <button onclick="f1()">点击显示</button>
    <div style="background: burlywood; width: 300px; height: 300px; text-align: center; line-height: 300px;"></div>
</body>
</html>

2. 事件处理

1.1 事件

事件：用户的行为或元素的状态

事件处理：元素监听用户行为或状态，在事件发生后进行处理（定义事件处理函数）

例如：<button onslick="show()">点击</button>

1.2 事件分类

事件名称都以"on"为前缀

(1) 鼠标事件

onclick鼠标点击
ondblclick鼠标双击
onmouseover鼠标移入
omounsemove鼠标移动
onmouseout鼠标移出

(2) 键盘事件

onkeydown按键被按下
onkeypress字符按键被按下
onkeyup按键抬起

(3) 加载

窗口/文档/元素加载完毕

onload

(4) 表单控件

表单控件相关的元素状态

onfoucs获取焦点

onblur失去焦点

oninput实时监听输入

onchange监听按钮状态改变

onsubmit监听数据是否可以发送

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/index.js"></script>
    <script>
        //等待窗口加载完毕后再执行相关的代码
        window.onload = function(){
            // 获取元素节点
            var btn = $("button");
            // 绑定双击事件
            btn.ondblclick = function (){
                console.log("双击");
            };
            // 表单事件
            // 获取相关元素
            var form = $("form");
            var uname = $("input"); // 输入框
            var save = $("input",1); //复选框
            // 1. 焦点状态
            uname.onfocus = function (){
                console.log("获取焦点");
            };
            // 2. 失去焦点
            uname.onblur = function (){
                console.log("失去焦点",uname.value)
            };
            // 3. 实时监听输入
            uname.oninput = function (){
                // console.log(uname.value);
            };
            // 4. onchange监听前后两次输入的内容是否发生变化，前后不一致且失去焦点时才出发执行
            uname.onchange = function (){
                console.log("onchange:" + uname.value)
            };
            // onchange监听按钮的状态，状态改变（选中、取消选中）自动出发
            save.onchange = function (){
                // 按钮checked属性值返回true/false对应选中和取消选中
                console.log("按钮状态改变",save.checked);
            };
            // 5. onsubmit时间由form监听，当点击提交按钮时自动触发，判断表单中的数据是否可以提交，允许返回布尔值,true表示允许发送；false表示阻止发送
            form.onsubmit = function (){
                // 用户名为空时阻止发送
                if (uname.value.length == 0){ // 判断是否为空
                    return false;
                }else{
                    return true;
                }
            }
        };
        console.log("hello");
    </script>
</head>
<body>
    <button>双击</button>
    <form action="login" method="GET" enctype="">
        <input type="text" name="uname">
        <input type="checkbox" checked>
        <input type="submit">
    </form>
</body>
</html>

1.3 绑定事件

元素绑定事件的方式

1.3.1 内联绑定

将事件名称作为标签属性绑定到元素上，事件处理函数必须是全局函数。

<button onclick=""></button>

1.3.2 动态绑定

元素节点使用点语法访问属性（事件名称，即属性名）

btn.onclick = function(){};

例如：

btn.onclick = function (){
    //事件执行后执行的代码段
};

1.4 this

永远表示函数或方法的触发对象

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul,ol{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            background: orange;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        ul>li{
            float: left;
            width: 150px;
            margin-right: 30px;
            background: pink;
        }
        ol{
            /* 隐藏 */
            display: none;
        }
        .address:hover ol{
            /* 悬停显示 */
            display: block;
        }
        ol>li:hover{
            background: cyan;
        }
    </style>
    <script src="js/index.js"></script>
    <script>
        function f1 (){
            console.log(this);
        };
        f1();
        window.f1();

        window.onload = function f2(){
            // 获取元素
            $("h1").onclick = function(){ // 对象调用方法
                console.log(this);
                console.log($("h1").innerHTML,this.innerHTML); // 得到的结果一样
            };
            // 下拉菜单，点击传值
            // 获取元素
            var span = $("span"); //地址栏标签
            var list = $("ol").children; // 获取选项
            for (var i = 0 ; i < list.length ; i ++){
                // 循环添加单击事件
                list[i].onclick = function(){
                    span.innerHTML = this.innerHTML; // 传值
                };
            };
        };
    </script>
</head>
<body>
    <h1>标题</h1>
    <!-- 横向的导航栏 -->
    <ul> 
        <li class="address">
            <span>北京</span>
            <ol>
                <li>北京</li>
                <li>上海</li>
                <li>广州</li>
                <li>深圳</li>
            </ol>
        </li>
        <li>登录</li>
        <li>注册</li>
    </ul>
</body>
</html>

1.5 事件对象

事件对象伴随事件触发自动产生，存储当前事件相关的信息。以参数的形式自动传入事件处理函数中，我们只需要接收。

btn.onclick = function (event){//e,event
	console.log(event);
};

function f1(){};
f1(100);

window.onload = function (){
    $("div").onclick = function(evt){
        // 鼠标事件对象
        console.log(evt);
        // clientX clientY 获取鼠标在页面坐标系中的位置
        // offsetX offsetY 获取鼠标在元素坐标系中的位置
        // screenX screenY 获取鼠标在屏幕坐标系中的位置
        console.log(evt.clientX,evt.clientY);
        console.log(evt.offsetX,evt.offsetY);
        console.log(evt.screenX,evt.screenY);

        // 键盘事件
        /*
        key:获取按键名称
        which：获取按键对应的编码。在keydown、keyup中，对于字符按键一律返回大写字母的编码值。功能键返回键盘编码值。在keypress中返回当前字符对应的编码，区分大小
        */
        onkeydown = function (e){
            console.log("keydown:",e.key,e.which);
        };
        onkeypress = function (e){
            console.log("keypress:",e.key,e.which); // 只有字符键(即数字、字母、标点)按下才触发
        };
        onkeyup = function (e){
            console.log("keyup:",e.key,e.which); // 按键抬起
        };
    };

3. 练习

判断用户名是否合法

创建输入框，按钮，div，点击按钮时验证用户名是否在6-18位之间，满足条件，在div中以绿色文本提示，不满足以红色文本提示

<body>
    <input type="text">
    <button onclick="show()">提交</button>
    <div></div>
    <script>
        function show(){
            var input = $("input").value;
            if (input.length >= 6 && input.length <=18){
                $("div").innerHTML = "合法";
                $("div").style.color = "green";
            }else{
                $("div").innerHTML = "不合法";
                $("div").style.color = "red";
            }
        }
    </script>
</body>

shop

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城</title>
    <script src="js/index.js"></script>
    <style>
        table,th,td{
            border: 1px solid #000;
        }
        table{
            width: 600px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" name="gname">
        <input type="text" name="gcount">
        <input type="text" name="gprice">
        <button onclick="add()">增加</button>
        <table>
            <tbody>
                <tr>
                    <th>商品名称</th>
                    <th>商品数量</th>
                    <th>商品价格</th>
                    <th>操作</th>
                </tr> 
            </tbody>
        </table>
        <script>
            
            function add(){
                // 获取输入框的值
                var gname = $("input").value;
                var gcount = $("input",1).value;
                var gprice = $("input",2).value;

                // 获取相关元素
                var tbody = $("tbody");

                // 动态创建行和单元格
                var tr = document.createElement("tr");
                var tdName = document.createElement("td");
                tdName.innerHTML = gname;

                var tdCount = document.createElement("td");
                tdCount.innerHTML = gcount;

                var tdPrice = document.createElement("td");
                tdPrice.innerHTML = gprice;

                var tdOper = document.createElement("td");
                tdOper.innerHTML = "<button>更新</button><button>删除</button>"
                // 追加到页面中显示
                tr.appendChild(tdName)
                tr.appendChild(tdCount)
                tr.appendChild(tdPrice)
                tr.appendChild(tdOper)
                
                tbody.appendChild(tr)
            }
        </script>
    </div>
</body>
</html>

轮播图实现

posted @ 2019-08-20 11:21 ChanceySolo 阅读(385) 评论(0) 编辑收藏举报

指间灵动，快码加编

刷新页面返回顶部

素心

人生苦短，我用Python。