JavaScript笔记三

Posted 方杰0410

tags:

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

一 创建添加节点

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .box{
            width:100%;
            height:400px;
            background-color:wheat;
        }
    </style>


</head>
<body>

<div class="box">
    <h4>增加节点</h4>

</div>

<script>

    var ele=document.getElementsByTagName("button")[0];
    var ele_remove=document.getElementsByTagName("button")[1];
    var ele_repalce=document.getElementsByTagName("button")[2];
    var ele_box=document.getElementsByTagName("box")[3];

    ele.onclick=function(){
    //创建一个img标签  createElement
    var ele_img=document.createElement("img");  //img
    ele_img.src="http://dig.chouti.com/images/homepage_download.png";
        //添加标签：  appendChild  注意：父节点添加子节点
        ele_box.appendChild(ele_img)
        }

    //删除节点
    ele_remove.onclick=function(){
        //查找删除节点
        var ele_h4=document.getElementsByTagName("h4")[0];
        //removeChild  父节点删除子节点
        ele_box.removeChild(ele_h4);
    }

    //替换标签
    ele_repalce.onclick=function(){
        //创建一个img标签  createElement

        var ele_img=document.createElement("img");
        ele_img.src="http://dig.chouti.com/images/homepage_download.png";
        var ele_h4=document.getELementsByTagName("h4")[0];
        ele_box.replaceChild(ele_img.ele_h4)
    }

</script>

</body>
</html>
View Code

二 文本操作

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

<div id=c1"><p>fang</p></div>

<script>
    var ele=document.getElementById("c1");

    //取值操作
    console.log(ele.innerHTML);
    console.log(ele.innerText);

    //赋值操作

    ele.innerText="<a>clisk</a>";
    ele.innerHTML="<a href=‘‘>cliak</a>";
</script>
</body>
</html>
View Code

三  js操作

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

</head>
<body>

<script>
    var ele=document.getElementById("d1");
    console.log(ele.className);
    console.log(typeof ele.className);

    //  添加和删除class值

    ele.classList.add("t1");
    ele.classList.remove("t1");
</script>
</body>
</html>
View Code

四 事件绑定方法

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

<p id="p1">ppp</p>
<p class="c1">ppp</p>
<p class="c2">ppp</p>
<p class="c3">ppp</p>
<p class="c4">ppp</p>

<script>
    //事件绑定方式：1 查找绑定时间的标签；2 绑定事件：格式： 标签对象.on事件=function(){}
    //绑定一个标签：
    var ele=document.getElementById("p1");
    ele.onclick=function(){
        console.log(this);
        this.style.color="green";
    };

    //绑定多个标签
    var eles_p=document.getElementsByTagName("P");
    for (var i=0;i<eles_p.length;i++){
        eles_p[i].onclick=function(){
            alert(4567);
            }
        }



    //获取触发事件标签   this
    var eles_p=document.getElementsByTagName("P");
    for (var i=0;i<eles_p.length;i++){
        eles_p[i].onclick=function(){
            console.log(this);
            this.style.color="green";
            }
        }

</script>
</body>
</html>
View Code

五 left_menu

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left_menu{
            float:left;
            width:20%;
            backgriund-color:wheat;
            height:500px;
        }

        .right_content{
            float:left;
            width:80%;
            background-color:darkgrey;
            height:500px;
        }

        .item{
            height:100px;
            margin:10px;
        }

        .title{
            background-color:darkgray;
            text-align:center;
        }

        .hide{
            display:none;
        }

        .active{
            background-color:red;
        }
    </style>
</head>
<body>


<div class="outer">
    <div class="left_menu">
        <div class="item">
            <div class="title active">菜单一</div>
            <ul class="con">
                <li>111</li>
                <li>111</li>
                <li>111</li>
            </ul>
        </div>
        <div class="item ">
            <div class="title active">菜单二</div>
            <ul class="con hide">
                <li>222</li>
                <li>222</li>
                <li>222</li>
            </ul>
        </div>
        <div class="item ">
            <div class="title active">菜单三</div>
            <ul class="con hide">
                <li>333</li>
                <li>333</li>
                <li>333</li>
            </ul>
        </div>
    </div>
    <div class="right_content"></div>
</div>

<script>
    //查找标签
    var eles_title=document.getElementsByClassName("title");
    for (var i=0;i<eles_title.length;i++){
        eles_title[i].onclick=function(){
        //将菜单下的con显示出来
            this.nextElementSibling.classList.remove("hide");
            //讲其他菜单的con隐藏起来；
                var ele_parent=this.parentElement;
                var eles_children=ele_parent.parentElement.children;
                for (var j=0;j<eles_children.length;j++){
                    if (eles_children[j]!=ele_parent){
                        eles_children[j].children[1].classList.add("hide");
                    }
                }



            }
        }
</script>

</body>
</html>
View Code1
技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

        .left_menu{
            float:left;
            width:20%;
            background-color:wheat;
            height:500px;
        }

        .right_content{
            float:left;
            width:80%;
            background-color:darkgrey;
            height:500px;
        }

        .item{
            margin:10px;
        }

        .title{
            background-color:darkgray;
            text-align:center;
        }

        .hide{
            display:none;
        }

        .active{
            background-color:red;
        }
    </style>
</head>
<body>


<div class="outer">
    <div class="left_menu">
        <div class="item">
            <div class="title active">菜单一</div>
            <ul class="con hide">
                <li>111</li>
                <li>111</li>
                <li>111</li>
            </ul>
        </div>
        <div class="item">
            <div class="title active">菜单一</div>
            <ul class="con  hide">
                <li>222</li>
                <li>222</li>
                <li>222</li>
            </ul>
        </div>
        <div class="item">
            <div class="title active">菜单一</div>
            <ul class="con  hide">
                <li>333</li>
                <li>333</li>
                <li>333</li>
            </ul>
        </div>
    </div>
</div>

<script>
    //查找标签
    var eles_title=document.getElementsByClassName("title");
    for (var i=0;i<eles_title.length;i++){
        eles_title[i].onclick=function(){
        //将菜单下的con显示出来
            this.nextElementSibling.classList.remove("hide");

            //将其他菜单的con隐藏起来
            for (var j=0;j<eles_title.length;j++){
                if (eles_title[j]!=this){
                    eles_title[j].nextElementSibling.classList.add("hide");
                }
            }
        }
    }
</script>
</body>
</html>
View Code2

六 text

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color:white;
            height:2000px;
        }

        .shade{
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background-color:grey;
            opacity:0.4;
        }

        .hide{
            display:none;
        }

        .models{
            position:fixed;
            top:50%;
            left:50%;
            margin-left:-100px;
            margin-left:-100px;
            height:200px;
            width:200px;
            background-color:wheat;
        }

    </style>

</head>
<body>

<div class="back">
    <input class="c" type="button" value="click">
</div>

<div class="shade hide handles"></div>

<div class="models hide handles">
    <input class="c" type="button" value="cancel">
</div>


<script>
    var eles=document.getElementsByClassName("c");
    var handles=document.getElementsByClassName("handles");
    for (var i=0;i<eles.length;i++){
        eles[i].onclick=function(){
            if (this.value=="click"){
                for (var j=0;j<handles.length;j++){
                    handles[j].classList.remove("hide");
                }
            }

            else{
                for (var j=0;j<handles.length;j++){
                    handles[j].classList.add("hide");
                }

            }
        }

    }

</script>
</body>
</html>
View Code

七 模态对话框

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

    <style>
        .shade{
            position: fixed;

            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.5;

        }

        .model{
            width: 300px;
            height: 200px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;


        }

        .hide{
            display: none;
        }
    </style>

</head>
<body>


<div class="back">
    <button>click</button>
</div>

<div class="shade hide"></div>
<div class="model hide">
    <p><input type="text"></p>
    <p><input type="text"></p>
    <p><input type="text"></p>
    <button>cancel</button>
</div>






<script>

   var ele1=document.getElementsByTagName("button")[0];
   var ele2=document.getElementsByTagName("button")[1];


   ele1.onclick=function () {
         var ele_shade=this.parentElement.nextElementSibling;
         var ele_model=ele_shade.nextElementSibling;

         ele_model.classList.remove("hide");
         ele_shade.classList.remove("hide");

   };

   ele2.onclick=function () {
        var ele_model2=this.parentElement;
        var ele_shade2=ele_model2.previousElementSibling;

       ele_shade2.classList.add("hide");
       ele_model2.classList.add("hide");
   };










    var eles_button=document.getElementsByTagName("button");

    for (var i=0;i<eles_button.length;i++){
        eles_button[i].onclick=function () {
            if (this.innerText=="click"){

                var ele_shade= this.parentElement.nextElementSibling;
                var ele_model=ele_shade.nextElementSibling;

                ele_shade.classList.remove("hide");
                ele_model.classList.remove("hide");

            }
            else {
                 var ele_model2=this.parentElement;
                 var ele_shade2=ele_model2.previousElementSibling;

                  ele_shade2.classList.add("hide");
                  ele_model2.classList.add("hide");
            }
        }

    }

</script>


</body>
</html>
View Code

附加：面试错误问题

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //function a(a,b){
         //   alert(a+b);
         //   }

          <!---->
        <!--var a=1;-->
        <!--var b=2;-->
        <!--a(a,b)-->


        <!--setTimeout(fn,milintime)-->

        <!--function foo(){-->
            <!--console.log("ok")-->
        <!--};-->

        <!--var ID=setTimeout(foo,1000);-->
        <!--clearTimeout(ID);-->
    </script>
</head>
<body>

</body>
</html>
View Code

 

以上是关于JavaScript笔记三的主要内容，如果未能解决你的问题，请参考以下文章

php生成各种验证码

英特尔十代酷睿硬核来袭！惠普战66 三代轻薄笔记本首发评测

日常Geetest滑动验证码（三代canvas版）处理小结（以B站登录验证为例）

JavaScript 有用的代码片段和 trick

36个工作中常用的JavaScript函数片段

译丨Yarn - Javascript 新一代套件管理