JS进阶

Posted 2020-10-10 黎明NB

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS进阶相关的知识，希望对你有一定的参考价值。

一 DOM复习

二节点操作

三 onsubmit事件

四事件传播

五焦点

六模态对话框

一 DOM复习

控制html页面的所有标签对象（document，element）


1 属性操作
   （1）element.innerHTML element.Text

 (2) element.属性=值  
      
  getAttribute("属性名")
  setAttribute("属性名"，"属性值")
 
 （3）element.claaslist.add
      element.claaslist.remove()
二节点操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 200px;
            width: 200px;
            border:1px solid red;
        }
    </style>
  <script>
      window.onload=function () {
          var ele_add=document.getElementsByClassName(‘addBtn‘)[0];
    var ele_replace=document.getElementsByClassName(‘replaceBtn‘)[0];
    var ele_del=document.getElementsByClassName(‘delBtn‘)[0];
    ele_add.onclick=function () {
        //新建节点
        var ele_a=document.createElement(‘a‘);
        //属性值添加
        ele_a.innerHTML="点击";
        ele_a.setAttribute("href","http://baidu.com");
        ele_p=document.getElementsByClassName(‘c1‘)[0]
        ele_p.appendChild(ele_a)

        //新建节点
//        var ele_img=document.createElement("img");
        //属性的赋值
//        ele_img.src="Bootstrap_i2.png";
//        ele_img.height=50;
//        ele_img.width=50;
//        var ele_p1=document.getElementById(‘p1‘)
//        var ele_p=document.getElementsByClassName(‘c1‘)[0];
//        ele_p1.appendChild(ele_img)
//        ele_p.appendChild(ele_img)

    }
    ele_del.onclick=function () {
            //删除节点
        ele_p=document.getElementsByClassName(‘c1‘)[0];
        var ele_p1=document.getElementById(‘p1‘);
        ele_p.removeChild(ele_p1);

    }
    ele_replace.onclick=function () {
//        //替换节点
         var ele_a=document.createElement(‘a‘);
//       // 属性值添加
        ele_a.innerHTML="点击";
        ele_a.setAttribute("href","http://baidu.com");
        var ele_p1=document.getElementById(‘p1‘);
        var  ele_p=document.getElementsByClassName(‘c1‘)[0];
        ele_p.replaceChild(ele_a,ele_p1);
//
    }
    var eles=document.getElementsByClassName(‘del‘);
    for (var i=0;i<eles.length;i++){
        eles[i].onclick=function () {
            console.log(this.parentElement.parentElement);
            var ele_tr=this.parentElement.parentElement;
            var ele_tbody=document.getElementById(‘t1‘);
            ele_tbody.removeChild(ele_tr)
        }
    }
      }

</script>

</head>
<body>
<div class="c1">
    <p id="p1">p1</p>
</div>
<button class="addBtn">ADD</button>
<button class="delBtn">del</button>
<button class="replaceBtn">replace</button>
<hr>
<table>
    <tbody id="t1">
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text"></td>
        <td><button class="del">del</button></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text"></td>
        <td><button class="del">del</button></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text"></td>
        <td><button class="del">del</button></td>
    </tr>
    </tbody>
</table>

<script>
//    var ele_add=document.getElementsByClassName(‘addBtn‘)[0];
//    var ele_replace=document.getElementsByClassName(‘replaceBtn‘)[0];
//    var ele_del=document.getElementsByClassName(‘delBtn‘)[0];
//    ele_add.onclick=function () {
        //新建节点
//        var ele_a=document.createElement(‘a‘);
        //属性值添加
//        ele_a.innerHTML="点击";
//        ele_a.setAttribute("href","http://baidu.com");
//        ele_p=document.getElementsByClassName(‘c1‘)[0]
//        ele_p.appendChild(ele_a)

        //新建节点
//        var ele_img=document.createElement("img");
        //属性的赋值
//        ele_img.src="Bootstrap_i2.png";
//        ele_img.height=50;
//        ele_img.width=50;
//        var ele_p1=document.getElementById(‘p1‘)
//        var ele_p=document.getElementsByClassName(‘c1‘)[0];
//        ele_p1.appendChild(ele_img)
//        ele_p.appendChild(ele_img)

//    }
//    ele_del.onclick=function () {
            //删除节点
//        ele_p=document.getElementsByClassName(‘c1‘)[0];
//        var ele_p1=document.getElementById(‘p1‘);
//        ele_p.removeChild(ele_p1);

//    }
//    ele_replace.onclick=function () {
//        //替换节点
//         var ele_a=document.createElement(‘a‘);
//       // 属性值添加
//        ele_a.innerHTML="点击";
//        ele_a.setAttribute("href","http://baidu.com");
//        var ele_p1=document.getElementById(‘p1‘);
//        var  ele_p=document.getElementsByClassName(‘c1‘)[0];
//        ele_p.replaceChild(ele_a,ele_p1);
//
//    }
    var eles=document.getElementsByClassName(‘del‘);
    for (var i=0;i<eles.length;i++){
        eles[i].onclick=function () {
            console.log(this.parentElement.parentElement);
            var ele_tr=this.parentElement.parentElement;
            var ele_tbody=document.getElementById(‘t1‘);
            ele_tbody.removeChild(ele_tr)
        }
    }
</script>

</body>
</html>

三 onsubmit事件

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

<form action="" id="submit">
    <p>姓名<input type="text"  name=‘user‘ id="username"></p>
    <p>年龄<input type="text"  name=‘age‘ id="age"></p>
    <input type="submit" >
</form>
<input type="text" id="test">
<script>
    var ele_form=document.getElementById(‘submit‘);
    var ele_user=document.getElementById(‘username‘);
    var ele_age=document.getElementById(‘age‘);
    ele_form.onsubmit=function (event) {
        var username=ele_user.value;
        var userage=ele_age.value;
        alert(username);
        alert(userage);
        //阻止默认事件发生
       // 方式一
        //return false
        //方式二
        event.preventDefault()
        //event对象：某次事件触发时所有的状态信息

    }



</script>
<script>
    var ele_test=document.getElementById(‘test‘);
    ele_test.onkeydown=function (e) {

//        if (e.keyCode==13){ alert(6666)}
        if (e.keyCode==13){ console.log(6666)}


    }

</script>
</body>
</html>

四事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height:500px;
            width:400px;
            border:1px solid red;
            background-color: greenyellow;
        }
        .c2{
            height:200px;
            width:200px;
            border:1px solid green;
            background-color: #2459a2;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>
</div>
<script>
    var ele_b=document.getElementsByClassName(‘c1‘)[0];
    var ele_s=document.getElementsByClassName(‘c2‘)[0];
     ele_b.onclick=function () {
alert(6666)
     }
       ele_s.onclick=function (event) {
alert(222)
           event.stopPropagation();//阻止事件传播
     }
</script>
</body>
</html>

五焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="search" placeholder="username">
//模拟placeholder 只是一个提示功能，而value是一个默认的值，如果不写点提交就可以发送出去
<script>
    var ele_search=document.getElementById(‘search‘);
    ele_search.onfocus=function () {
        this.value=‘‘

    }
     ele_search.onblur=function () {
        if (this.value.trim()==""){
            this.value=‘username‘
        }

    }
</script>
</body>
</html>

六模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            width: 100%;
            height: 2000px;

        }
        .shade{
            position: fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:gray ;
            opacity: 0.5;
        }
        .hide{
            display: none;
        }
        .model{
            position: fixed;
            top:100px;
            left:40%;
            width:400px;
            height: 400px;
            background-color: white;
        }
    </style>
</head>
<body>
<div class="back">
        <button id="add">add</button>
</div>
<div class="shade hide"></div>
<div class="model hide"><form action="">
        <p>姓名<input type="text"></p>
        <p>年龄<input type="text"></p>

        <input type="button" id="btn" value="提交">
    </form>
</div>
<script>
    var ele_add=document.getElementById("add");
    var ele_mdoel=document.getElementsByClassName("model")[0];
    var ele_shade=document.getElementsByClassName("shade")[0];
    ele_add.onclick=function () {
        ele_mdoel.classList.remove("hide");
        ele_shade.classList.remove("hide")
    }
</script>
</body>
</html>

以上是关于JS进阶的主要内容，如果未能解决你的问题，请参考以下文章

我的C语言学习进阶之旅解决 Visual Studio 2019 报错：错误 C4996 ‘fscanf‘: This function or variable may be unsafe.(代码片段

我的Android进阶之旅关于Android平台获取文件的mime类型：为啥不传小写后缀名就获取不到mimeType？为啥android 4.4系统获取不到webp格式的mimeType呢？(代码片段

Atom编辑器入门到精通 Atom使用进阶