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>

二文本操作

<!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>

三 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>

四事件绑定方法

<!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>

五 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>

<!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>

六 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>

七模态对话框

<!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>

附加：面试错误问题

<!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>

时间： 2024-10-15 05:08:04

JavaScript笔记三的相关文章

从头开始学JavaScript 笔记(三)——数据类型

一.分类基本数据类型:undefined.null.string.Boolean.number 复杂数据类型:object object的属性以无序的名称和值对的形式 (name : value) 来定义二.详解 1.undefined:undefined类型只有一个值:undefined,在使用var对变量进行声明但未初始化时,这个变量的值就是undefined. 包含undefined值的变量与尚未定义的变量是不一样的,以下这个例子可以说明: var demo1;//声明但未初始化 al

JavaScript笔记(三)：JS也有入口函数Main

在C和Java中,都有一个程序的入口函数或方法,即main函数或main方法.而在JavaScript中,程序是从JS源文件的头部开始运行的.但是某种意义上,我们仍然可以虚构出一个main函数来作为程序的起点,这样一来不仅可以跟其他语言统一了,而且说不定你会对JS有更深的理解. 1. 实际的入口当把一个JavaScript文件交给JS引擎执行时,JS引擎就是从上到下逐条执行每条语句的,直到执行完所有代码. 2. 作用域链.全局作用域和全局对象我们知道,JS中的每个函数在执行时都会产生一个新的

高性能JavaScript笔记三（编程实践）

避免双重求值有四个标准函数可以允许你传入代码的字符串,然后它才你动态执行.它们分别是:eval.Function.setTimeout.setInterval 事实上当你在javascript代码中执行另外一段javascript代码时,都会导致双重求值的性能消耗,所以在大多数情况下,没必要使得eval和Function函数,因此最好避免使用它们.至于setTimeout和setInterval,建议传入函数而不是字符串来作为第一个参数现在Safari4和chrome的javaScript引

JavaScript笔记三：引用类型

1.Object对象创建Object对象, var person = new Object(); var person = { Person.name = "guoliang"; name : "guoliang", Person.age = 20; age : 20 }; 另外属性名也可以使用字符串,,第二种属于对象字面量表示法访问对象属性可以使用"."或"[ ]",当

JavaScript笔记之Function

一.函数定义 (1)使用function declaration 格式:function functionName(parameters) { function body } 注:此种方式声明的函数作用域是全局的,即在声明之前可以调用 (2)使用function expression 格式:var name = function (parameters) { function body }; 注:与(1)不同,在声明之前不可以调用 (3)使用function constructor() 格式:v

《世界是数字的》读书笔记三

<世界是数字的>读书笔记三第六章软件系统操作系统是软件中的基础层,他负责管理计算机硬件,并为其他被称作应用程序的程序运行提供支持. 6．1操作系统操作系统控制和分配计算机资源.首先,他负责管理CPU,调度和协调当前运行的程序.操作系统通常都需要管理数十个同时运行的进程或任务. 其次,操作系统管理RAM.他把程序加载到内存中以便执行指令. 最后,操作系统管理和协调外接设备的活动. 6．2操作系统怎么工作计算机启动时首先要加载代码,加载的过程中还要检查硬件,比如哪些设备已经接入电脑,,

【Bootstrap3.0建站笔记三】AspNetPager分页，每一列都可排序

1.AspNetPager分页,实现每一列都可排序: (1).需要将默认排序字段放在HTML页面中. (2).排序字段放置为td节点的属性. 如图: 实现的效果图如: HTML代码: <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class="table table-striped table-hover tabl

JavaScript--基于对象的脚本语言学习笔记(三)

事件处理器 1.一个数据校验表单的例程 <html> <head> <title>js练习</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> String.prototype.trim=function(){ r

Ajax学习笔记(三)

三.jQuery库详解 1.使用jQuery之后,javascript操作的不再是HTML元素对应的DOM对象,而是包装DOM对象的jQuery对象.js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性,从而实现动态更新HTML页面. 由此可见,使用jQuery动态更新HTML页面只需以下两个步骤: (1)获取jQuery对象.jQuery对象通常是DOM对象的包装 (2)调用jQuery对象的方法来改变自身.当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTM