JavaScript part2

一.前言

前面我们讲了一下js的基础语法，但是这些还是远远不够的，我们要想操作标签，实现一个动态且好看的页面，就得学会BOM和DOM，这些都是浏览器和页面的，这样我们才能实现一个好看的页面

二.BOM对象

BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。

2.1 window对象

窗口方法：

// js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容.
console.log( window );

// alert() 弹出一个警告框
window.alert("hello");

//confirm 弹出一个确认框,点击确认,返回true, 点击取消,返回false
var ret = confirm("您确认要删除当前文件么?");
console.log( ret );

// 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null
var ret = prompt("请输入一个内容","默认值");
console.log( ret );

// close() 关闭当前浏览器窗口
window.close();

//打开一个新的浏览器窗口
window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px";

这些都很简单，我们看一眼过就行了

定时方法：

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后调用code一次

// 设置循环定时器
var ID = window.setInterval(code,millisec) // 每millisec毫秒执行一次code
// 取消循环定时器
window.clearInterval(ID);

// 设置单次定时器
var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次
// 取消单次定时器
window.clearTimeout(ID);

这个也是非常的简单，但是我们会给大家一个定时器的小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id='ID1' type="text">
<button onclick="begin()">开始</button>
<button onclick="end()">暂停</button>


<script>

  function showtime(){
    ele=document.getElementById('ID1')
    ele.value=new Date().toLocaleString()
  }
  var id
  function begin(){
    if(id===undefined){
      showtime()
      id=setInterval(showtime,1000)
      console.log(id)
    }
  }

  function end(){
    clearInterval(id)
    id=undefined;
  }
  
</script>

</body>
</html>

最后结果长这样，想知道效果自己去测试就好了，这里为什么要判断一下id===undefined呢，这是为了防止开多个定时器，大家开控制台看打印id就知道了，当然这里有很多看不懂的大家等看完dom就都能学会啦

2.2 Location ( 地址栏)对象

这里给个案例自己品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">查看Location对象</button>
<button onclick="func2()">跳转到往日情怀酿作酒的博客~</button>
<button onclick="func3()">F5</button>
<script>
    function func1(){
        console.log( location );
    }
    // 地址栏对象控制和操作地址栏
    // 所谓的地址就是当前页面所在地址
    // 地址结构:
    // 协议://域名:端口/路径/文件名?查询字符串#锚点
    console.log( `协议=>${location.protocol}` );
    console.log( `端口=>${location.port}` );
    console.log( `域名=>${location.hostname}` );
    console.log( `域名:端口=>${location.host}` );
    console.log( `路径=>${location.pathname}` );
    console.log( `查询字符串=>${location.search}` );
    console.log(`完整的地址信息=>${location.href}`);

    function func2(){
        // location.href="https://blog.csdn.net/weixin_74178589?spm=1011.2124.3001.5343"; // 页面跳转
        location.assign("https://blog.csdn.net/weixin_74178589?spm=1011.2124.3001.5343"); // 页面跳转
    }

    function func3(){
        location.reload(); // 刷新页面
    }
</script>
</body>
</html>

2.3 本地存储对象

使用存储对象的过程中, 对象数据会根据域名端口进行保存的,所以 js不能获取当前页面以外其他域名端口保存到本地的数据。也就是说,我们存储对象获取数据只能是自己当前端口或者域名下曾经设置过的数据,一旦端口或者域名改变,则无法获取原来的数据。

localStorage 本地永久存储
localStorage.setItem("变量名","变量值"); 保存一个数据到存储对象
localStorage.变量名 = 变量值保存一个数据到存储对象

localStorage.getItem("变量名") 获取存储对象中保存的指定变量对应的数据
localStorage.变量名获取存储对象中保存的指定变量对应的数据

localStorage.removeItem("变量名") 从存储对象中删除一个指定变量对应的数据
localStorage.clear() 从存储对象中删除所有数据

sessionStorage 本地会话存储
sessionStorage.setItem("变量名","变量值"); 保存一个数据到存储对象
sessionStorage.变量名 = 变量值保存一个数据到存储对象

sessionStorage.getItem("变量名") 获取存储对象中保存的指定变量对应的数据
sessionStorage.变量名获取存储对象中保存的指定变量对应的数据

sessionStorage.removeItem("变量名") 从存储对象中删除一个指定变量对应的数据
sessionStorage.clear() 从存储对象中删除所有数据

localStorage和sessionStorage的区别：

1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

2、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

3、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

4、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

三.DOM对象(JS核心)

DOM document Object Model 文档对象模型

整个html文档,会保存一个文档对象document
console.log( document ); // 获取当前文档的对象

3.1 查找标签

直接查找标签：

document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")

其中getelement返回的是标签对象，而getelements返回的是数组对象

导航查找标签：

elementNode.parentElement // 父节点标签元素
elementNode.children // 所有子标签
elementNode.firstElementChild // 第一个子标签元素
elementNode.lastElementChild // 最后一个子标签元素
elementNode.nextElementSibling // 下一个兄弟标签元素
elementNode.previousElementSibling // 上一个兄弟标签元素

CSS选择器查找：

document.querySelector("css选择器") //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组

3.2 绑定事件

静态绑定：直接把事件写在标签元素中。

<div id="div" οnclick="foo(this)">click</div>

<script>
function foo(self){ // 形参不能是this,这个self就代表这个标签
console.log("foo函数");
console.log(self);
}
</script>

动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定。

<p id="i1">往日情怀酿作酒</p>

<script>

var ele=document.getElementById("i1");

ele.οnclick=function(){
console.log("ok");
console.log(this); // this直接用,代表的就是这个对象
};

</script>

多个标签绑定事件

<ul>
<li>请关注</li>
<li>往日情怀酿作酒</li>
<li>谢谢</li>
</ul>

<script>

eles=document.querySelectorAll('ul li')
for(var i=0;i<eles.length;i++){
eles[i].οnclick=function (){
console.log(this.innerHTML)
// console.log(eles[i].innerHTML) //这个会报错
}
}
// console.log(i) //这里打印i会发现等于3

</script>

这个就能体现出this的重要性

3.3 操作标签

<标签名属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>

文本操作：

<div class="c1"><span>click</span></div>

<script>

    var ele =document.querySelector(".c1");

    ele.onclick = function (){
        // 查看标签文本
        console.log(this.innerHTML)
        console.log(this.innerText)

        // this.innerText='往日情怀酿作酒'
        this.innerHTML = "<a href='https://blog.csdn.net/weixin_74178589?spm=1011.2124.3001.5343'>往日情怀酿作酒</a>"
    }
    
</script>

大家可以测试一下，发现innerText和innerHTML的区别就是，前者是一个纯文本，后者会识别标签，然后把标签给识别上去

value操作：

像input标签，select标签以及textarea标签是没有文本的，但是显示内容由value属性决定

<input id="i1" type="text">

<script>
  ele=document.getElementById('i1');
  ele.click=function (){
    console.log(this.value)
    this.value='往日情怀酿作酒'
    console.log(this.value)
  }

这个就是当我们点击文本框的时候文本内容就会改变

css样式操作:

<h1>往日情怀酿作酒</h1>

<script>

  ele=document.getElementsByTagName('h1');
  ele[0].οnclick=function (){
    this.style.color='red'
  }

</script>

这个就是点击变成红色，其实这个也就是操作了节点里面的style属性

属性操作:

elementNode.setAttribute("属性名","属性值")
elementNode.getAttribute("属性名")
elementNode.removeAttribute("属性名");

并不是所有属性都可以像value那样操作。

class属性操作**

elementNode.className
elementNode.classList.add
elementNode.classList.remove

因为class是特殊的一个属性，所以有专门的方法，有了这个就能实现很多功能，例如商品：

这个就是这么实现的通过改变class属性实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .tab{
            width: 800px;
            height: 300px;
            /*border: 1px solid red;*/
            margin: 200px auto;
        }

        .tab ul{
            list-style: none;
        }

        .tab-title{
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }

        .tab .tab-title li{
            display: inline-block;
            padding: 10px 25px;
            font-size: 14px;
        }

        li.current {
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }

        .hide{
            display: none;
        }


    </style>
</head>
<body>


<div class="tab">
    <ul class="tab-title">
        <li class="current" index="0">商品介绍</li>
        <li class="" index="1">规格与包装</li>
        <li class="" index="2">售后保障</li>
        <li class="" index="3">商品评价</li>
    </ul>

    <ul class="tab-content">
        <li>商品介绍...</li>
        <li class="hide">规格与包装...</li>
        <li class="hide">售后保障...</li>
        <li class="hide">商品评价...</li>
    </ul>
</div>


<script>
     var titles = document.querySelectorAll(".tab-title li");
     var contents = document.querySelectorAll(".tab-content li");

     for (var i = 0;i<titles.length;i++){

         titles[i].onclick = function () {
             // (1) 触发事件标签拥有current样式
             for (var j = 0;j<titles.length;j++){
                 titles[j].classList.remove("current")
             }

             console.log(this);
             this.classList.add("current");

             // (2) 显示点击title对应的详情内容
             var index = this.getAttribute("index");
             // console.log(this.getAttribute("index"));
             // console.log(contents[index]);


             for (var z = 0;z<contents.length;z++){
                 contents[z].classList.add("hide");
             }

             contents[index].classList.remove("hide");

         }

     }

</script>

</body>
</html>

这个代码直接给大家，就不过多赘述了

节点操作 :

// 创建节点：
document.createElement("标签名")
// 插入节点
somenode.appendChild(newnode) // 追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点) // 把增加的节点放到某个节点的前边
// 删除节点
somenode.removeChild()：获得要删除的元素，通过父元素调用删除
//替换节点
somenode.replaceChild(newnode, 某个节点);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>

    img{
      display: block;
    }

  </style>

</head>
<body>


<button class="add_btn">添加节点</button>
<button class="del_btn">删除节点</button>
<button class="replace_btn">替换节点</button>
<div class="c1">
    <h3 class="c2">往日情怀酿作酒</h3>
</div>


<script>
  father=document.querySelector('.c1')


  add=document.getElementsByClassName('add_btn')[0];
  del=document.getElementsByClassName('del_btn')[0];
  replace=document.getElementsByClassName('replace_btn')[0]
  add.onclick=function (){


    var ele=document.createElement("h3")
    ele.innerText='往日情怀酿作酒'

    console.log(ele)

    father.appendChild(ele)
  }

  del.onclick=function (){

    ele=document.querySelector('.c1').firstElementChild
    console.log(ele)
    if(ele){
      father.removeChild(ele)
    }

  }
  replace.onclick=function (){

    ele=document.querySelector('.c1 h3:first-of-type')

    console.log(ele)

    if(ele){
      re_ele=document.createElement("img")
    re_ele.src='https://www.keaitupian.cn/cjpic/frombd/2/253/3246004806/1427273025.jpg'
    console.log(ele)
    father.replaceChild(re_ele,ele)
    }
  }

</script>

</body>
</html>

这个就是很好的一个替换删除的例子

效果大致如下

3.4 常见事件

onload事件：

这个就是当我们加载完所有的文档之后触发的，举个例子就是当我们把script写在文档的上面，如果涉及了dom操作就会因为找不到标签而报错，但是当我们把所有代码放在onload里面的话就会有问题啦，他会等到加载完文档再执行onload里面的内容

onsubmit事件：

于处理表单提交时的操作。当用户提交一个表单时，可以通过这个事件执行特定的 JavaScript 代码，比如验证输入数据、取消提交等

onchange事件 ：

用于在输入元素（如 <input>, <select>, 或 <textarea>）的值发生改变时触发。当用户改变输入的内容并移开焦点时，该事件会被触发

onmouse事件：

onmouse 事件系列是 JavaScript 中用于处理与鼠标相关的交互的事件。这些事件包括 onmouseover、onmouseout、onmousemove、onclick、ondblclick 和 onmousedown、onmouseup 等

onkey事件：

onkey 事件系列是 JavaScript 中用于处理与键盘交互的事件。主要的键盘事件包括 onkeydown、onkeyup 和 onkeypress

onblur和onfocus事件：

onblur 和 onfocus 是 JavaScript 中用于处理元素获得或失去焦点的事件。这些事件通常用于表单元素，如输入框和文本区域，以增强用户体验

冒泡事件：

<div class="c1">
<div class="c2"></div>
</div>

<script>

var ele1 = document.querySelector(".c1");
ele1.onclick = function () {
alert("c1区域")
};

var ele2 = document.querySelector(".c2");
ele2.onclick = function (event) {
alert("c2区域");

// 如何阻止事件冒泡
event.stopPropagation();
}

</script>

这个就是如果子标签再父标签里面，两个都绑定了同一个事件，当两个同时触发同一个事件的时候，子标签也会触发父标签的内容，这样当我们使用event.stopPropagation()就会阻止冒泡事件

四.总结

五.补充

这里给大家一个前端的员工关系代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box {
            width: 80%;
            height: 270px;
            margin: 20px auto;
        }

        .box td{
            width: 180px;
            text-align: center;
        }

        .box input{

            padding: 5px 5px;
            height: 20px;
        }
    </style>
</head>
<body>

<h3>员工管理系统</h3>

<div class="box">
    <table border="1" cellpadding="5px" >
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>部门</th>
            <th>删除</th>
            <th>编辑</th>
        </tr>
        </thead>

        <tbody class="tbody">
        <tr>
            <td>张三</td>
            <td>23</td>
            <td>销售</td>
            <td>
                <button onclick="del_tr(this)">删除</button>
            </td>
            <td>
                <button onclick="edit_tr(this)">编辑</button>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>21</td>
            <td>销售</td>
            <td>
                <button onclick="del_tr(this)">删除</button>
            </td>
            <td>
                <button onclick="edit_tr(this)">编辑</button>
            </td>
        </tr>
        <tr>
            <td>王五</td>
            <td>23</td>
            <td>运营</td>
            <td>
                <button onclick="del_tr(this)">删除</button>
            </td>
            <td>
                <button onclick="edit_tr(this)">编辑</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>


<fieldset class="add-box">
    <legend>添加员工</legend>
    <p>姓名：<input type="text" class="name"></p>
    <p>年龄：<input type="text" class="age"></p>
    <p>部门：
        <select name="" id="i1">
            <option value="销售">销售部</option>
            <option value="运营">运营部</option>
            <option value="财务">财务部</option>
        </select>
    </p>
    <button class="add">添加</button>
</fieldset>


<script>

    var add = document.querySelector(".add");
    var tbody = document.querySelector(".tbody");
    add.onclick = function () {

        var inputs = document.querySelectorAll(".add-box input");
        var tr = document.createElement("tr");
        for (var i = 0; i < inputs.length; i++) {
            var td = document.createElement("td"); // <td></td>
            td.innerHTML = inputs[i].value;
            tr.appendChild(td);
            // 清空
            inputs[i].value = ""
        }

        var s = document.querySelector("#i1");
        td = document.createElement("td");
        td.innerHTML = s.value;
        tr.appendChild(td);


        // 添加删除按钮
        var button = document.createElement("button");
        button.innerHTML = "删除";
        button.setAttribute("onclick", "del_tr(this)");
        td = document.createElement("td");
        td.appendChild(button);
        tr.appendChild(td);
        // 添加编辑按钮
        button = document.createElement("button");
        button.innerHTML = "编辑";
        button.setAttribute("onclick", "edit_tr(this)");
        td = document.createElement("td");
        td.appendChild(button);
        tr.appendChild(td);


        tbody.appendChild(tr);
    };

    function del_tr(self) {
        var tr = self.parentElement.parentElement;
        tbody.removeChild(tr);
    }

    function edit_tr(self) {
        self.innerHTML = "保存";
        self.setAttribute("onclick","save(this)");


        console.log(self.parentElement.parentElement.children);
        var children_td = self.parentElement.parentElement.children;

        for(var i=0;i<children_td.length-2;i++){

            var inp = document.createElement("input");
            inp.setAttribute("type","text");
            // inp.value = children_td[i].innerHTML;
            inp.setAttribute("value",children_td[i].innerHTML);
            console.log("::",inp);
            children_td[i].innerHTML = "";
            children_td[i].appendChild(inp);
        }

    }

    function save(self) {
        self.innerHTML = "编辑";
        self.setAttribute("onclick","edit_tr(this)");
        var children_td = self.parentElement.parentElement.children;
        for(var i=0;i<children_td.length-2;i++){
            children_td[i].innerHTML = children_td[i].firstElementChild.value
        }
    }

</script>

</body>
</html>