day16 web前端之JavaScript

页面布局补充

样例页面：

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin:0;

        }

        .left{

            float: left;

        }

        .right{

            float:right;

        }

        .pg-header{

            height: 48px;

            background-color: #2459a2;

        }

        .pg-body .pg-menu{

            width:10%;

            height: 1000px;;

            background-color: antiquewhite;

            position: absolute;

            top: 48px;;

            left:0;

            /*bottom:0;*/

        }

        .pg-body .pg-content{

            width:90%;

            position: absolute;

            top: 48px;

            right:0;

            bottom:0;

            overflow: auto;

            background-color: #3300cc;

            z-index: 9;

        }

        .pg-header .logo {

            color: black;

            text-align: center;

            width:10%;;

            line-height: 48px;

            background-color: wheat;

        }

        .pg-header .userinfo img{

            border-radius: 50%;

        }

        .pg-header .userinfo{

            border:1px solid red;

            margin-top: 4px;

            width: 140px;

        }

         .pg-header .userinfo .infolist {

             display: none;

         }

        .pg-header .userinfo:hover .infolist{

            display: block;

            color: red;

        }

        .pg-header .userinfo .infolist{

            position: absolute;

            background-color: #009933;

            top: 43px;

            right: 36px;

        }

        .pg-header .userinfo .infolist a{

            position: relative;

            display: block;

            color: white;

            width: 140px;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="logo left">

            <span>welcome</span>

        </div>

        <div class="userinfo right" style="position: relative;">

            <a href=""><img src="1.png" alt="" width="42" height="40" ></a>

            <div class="infolist"  style="position: absolute;top: 43px;right:20px;z-index:10">

                <a>我的信息</a>

                <a>登陆</a>

            </div>

        </div>

    </div>

    <div class="pg-body">

        <div class="pg-menu">

         这是侧边栏

        </div>

        <div class="pg-content">

            <p>这是内容</p>  <p>这是内容</p>   <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>

            <p>这是内容</p>  <p>这是内容</p>   <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>

            <p>这是内容</p>  <p>这是内容</p>   <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>

            <p>这是内容</p>  <p>这是内容</p>   <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>

            <p>这是内容</p>  <p>这是内容</p>   <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>

            <p>这是内容</p>  <p>这是内容</p>   <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>

            <p>这是内容</p>  <p>这是内容</p>   <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>

            <p>这是内容</p>  <p>这是内容</p>   <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>

            <p>这是内容</p>  <p>这是内容</p>   <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>

            <p>这是内容</p>  <p>这是内容</p>   <p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p><p>这是内容</p>

        </div>

    </div>

</body>

</html>

JavaScript介绍

JavaScript诞生缘由

1. 网景公司(安德森)94年发布了第一款比较成熟的浏览器，但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。

2. 95年5月，网景公司做出决策，未来的网页脚本语言，必须"看上去与Java足够相似"，但是比Java简单

3. Brendan Eich 34 years old schema语言

4. 10天创造出了JavaScript，两种语言风格的混合产物----（简化的）函数式编程+（简化的）面向对象编程

5. JavaScript 的官方名称是 “ECMAScript”。

JavaScript介绍：

什么是javascript及其能做什么？

1.JavaScript 被设计用来向 HTML 页面添加交互行为。
2.JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
3.JavaScript 由数行可执行计算机代码组成。
4.JavaScript 通常被直接嵌入HTML 页面。
5.JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

JavaScript书写方式

第一种书写方式：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{}

    </style>

    <!--js的第一中书协方式-->

    <script>

        //alert("hello world");

        console.log("hello world")

</script>

</head>

<body>

</body>

</html>

基于先加载页面再加载js的过程来实现友好展示页面

第二种书写方式：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{}

    </style>

</head>

<body>

    <div>dbnbdasnbndabnsbna</div>

    <h1>dsadasdakds</h1>

    <div>dasd</div>

    <div>dasd</div>

    <div>dasd</div>

    <div>dasd</div>

</body>

<!--js的第二种方式-->

<script src="a.js"></script>

</html>

注释：
- 单行注释

// 我是单行注释

多行注释

/*内容*/ 我是多行注释

变量：

var 声明变量

var name=”assaa ” #局部变量

name = “ssdas” #全局变量

命名规则：
- 严格区分大小写
- 不能以数字开头
- 余下的可以是其他符号

数据类型：
- 数字

var num=10

var num2=10.

var num3=.1

parseInt ( )
函数可解析一个字符串，并返回一个整数。如果中间遇到不合法的字符，马上停止剖析，返回已经剖析过的数值。
如果开始就遇到不合法的字符，返回NaN。

例：

parseInt(“23”)值为23
parseInt(“23xyz”)值为23
parseInt(“xyz23”)值为NaN

parseFloat ( )
剖析参数字符串并返回浮点数。如果遇到不合法的字符串，马上停止剖析，返回已经剖析过的数值。用法类似于paraseInt

字符串

创建方式：

① 变量 = “字符串”
② 字串对象名称 = new String (字符串)

常见的方法：

跑马灯效果实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="wel">

        欢迎光临

    </div>

</body>

<script>

    function test(){

        var mywel = document.getElementById('wel');

        var content = mywel.innerText;

        var f_content = content.charAt(0);

        var l_content = content.substring(1,content.length);

        var new_content = l_content+f_content;

        mywel.innerText = new_content;

    }

//    执行函数

    setInterval("test()",1000)

</script>

</html>

第二种实现形式：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <marquee behavior="" direction="">我爱北京天安门</marquee>

</head>

<body>

</body>

</html>

列表

循环：
- 第一种循环方式：

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

    console.log('dadsa')

}

第二种循环方式：循环字典列表等形式的数据类型

for(var i in arr){

    console.log(i + '----' + arr[i])

}

字典（json）

var dict={“name”:”hello”,“age”:“12”}

元组
集合
bool
对象
运算符

算术运算符：
    +   -    *    /     %       ++        --

比较运算符：
    >   >=   <    <=    !=    ==    ===   !==

逻辑运算符：
     &&   ||   ！

赋值运算符：
    = +=   -= *=   /=

字符串运算符：
    + 连接，两边操作数有一个或两个是字符串就做连接运算

流程控制：
- 顺序结构：代码按行执行
- 分支结构：单分支；双分支；多分支

switch。。。。case案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

<script>

    var num = 66;

    switch (num) {

        case 66:

            console.log("快了。。")

            break

        case 73:

            console.log("挂了")

            break

        case 84:

            console.log("真死了")

            break

    }

</script>

循环结构

do … while:先干一次再说

函数：js的三种书写方式

1：function test(){

      console.log('sdadsadsa');

}

2：var func= function(){

       console.log('sasassa');

}

3：(function() {

        console.log('sdasda');

})()   #直接运行

前两种方式都需要后期调用才能执行

系统函数:

eval()是python中的exec和eval的合集,可以编译代码也可以获取返回值

eval("x=7;y=90;console.log(x+y)")

序列化:
- JSON.stringify(obj) 序列化
- JSON.parase(obj) 反序列化
转义：
- decodeURI() URI中未转义的字符
- decodeURIComponent（） URI组件中的未转义字符
- encodeURI（）转义URI中的字符
- encodeURIComponent（）转义URI组件中的字符
- URIError（）由编码和解码跑出的错误
js的事件对象：

时钟案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #clock{

            color: #3300cc;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div id="clock"></div>

</body>

<script>

    function clock() {

        var mydate=new Date()

//    console.log(mydate)

        var myyear = mydate.getFullYear()

        var mymonth = mydate.getMonth()

        var myday = mydate.getDate()

        var myhour = mydate.getHours()

        var myminute = mydate.getMinutes()

        var mysec = mydate.getSeconds()

        var res = myyear + "-" + mymonth + "-" + myday + " " + myhour + ':'+myminute+":" + mysec

        console.log(res)

        var myclock = document.getElementById("clock")

        myclock.innerText=res

    }

    setInterval("clock()",1000)

</script>

</html>

JavaScript之DOM操作

什么是HTML DOM？

1.HTML Document Object Model（文档对象模型）

2.HTML DOM 定义了访问和操作HTML文档的标准方法

3.HTML DOM 把 HTML 文档呈现为带有元素、属性和文本

的树结构（节点树）

Javascript之DOM操作：

获取元素节点：

1.直接查找：或得到的元素都是数组，可以通过数组的提供的方法进行相应的操作

document.getElementById(“idname”)

document.getElementsByTagName(“tagname”)

document.getElementsByName(“name”)

document.getElementsByClassName(“name”)

2.间接查找

parentElement // 父节点标签元素

children // 所有子标签

firstElementChild // 第一个子标签元素

lastElementChild // 最后一个子标签元素

nextElementtSibling // 下一个兄弟标签元素

previousElementSibling // 上一个兄弟标签元素

表格案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="button" value="全选" onclick="selectAll()">

<input type="button" value="反选" onclick="ReverseAll()">

<input type="button" value="取消" onclick="cancelAll()">

<!--table>(thead>tr>th{&nbsp;}*3)+(tbody>tr*3>td{&nbsp;}*3) 快速创建table-->

<table border="1">

    <thead>

    <tr>

        <th>操作</th>

        <th>ip</th>

        <th>端口</th>

    </tr>

    </thead>

    <tbody id="info">

    <tr>

        <td><input type="checkbox"/></td>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

    </tr>

    <tr>

         <td><input type="checkbox"/></td>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

    </tr>

    <tr>

         <td><input type="checkbox"/></td>

        <td>&nbsp;</td>

        <td>&nbsp;</td>

    </tr>

    </tbody>

</table>

</body>

<script>

    function selectAll(){

        var myTbody = document.getElementById('info')

//             console.log(myTbody)

        var myTrs = myTbody.children

//            console.log(myTrs)

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

            var myInput = myTrs[i].children[0].children[0]

            myInput.checked=true

        }

    }

    function cancelAll() {

       var myTbody = document.getElementById('info')

//             console.log(myTbody)

        var myTrs = myTbody.children

//            console.log(myTrs)

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

            var myInput = myTrs[i].children[0].children[0]

            myInput.checked=false

        }

    }

     function ReverseAll() {

       var myTbody = document.getElementById('info')

//             console.log(myTbody)

        var myTrs = myTbody.children

//            console.log(myTrs)

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

            var myInput = myTrs[i].children[0].children[0]

            if(myInput.checked){

                myInput.checked=false

            }else{

                myInput.checked=true

            }

        }

    }

</script>

</html>

执行效果：

属性节点的操作：

对节点的类进行操作：

tag.className => 直接整体做操作

tag.classList.add('样式名') 添加指定样式

tag.classList.remove('样式名') 删除指定样式

模态框实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .one{

            position: fixed;

            top:0;

            left:0;

            right:0;

            bottom:0;

            background-color:darkgrey;

            opacity: 0.6;

        }

        .info{

            width: 400px;

            height:400px;

            position: fixed;

            top: 50px;

            left:400px;

            right:400px;

            background-color: white;

        }

        .hide{

            display: none;

        }

        .show{

            display: block;

        }

    </style>

</head>

<body>

    <div>

        <input type="button" value="点击" onclick="showModel()">

    </div>

    <!--遮罩层-->

    <div class="one hide"></div>

    <div class="info hide">

        <p>

            <input type="text"><p></p>

            <input type="text"><p></p>

            <input type="button" value="取消" onclick="cancel()">

            <input type="button" value="确定">

        </p>

    </div>

</body>

<script>

    function showModel(){

        var myone=document.getElementsByClassName("one")[0]

        var info=document.getElementsByClassName("info")[0]

//        console.log(myone)

        myone.classList.remove('hide')

        info.classList.remove('hide')

    }

    function cancel(){

         var myone=document.getElementsByClassName("one")[0]

         var info=document.getElementsByClassName("info")[0]

         myone.classList.add('hide')

         info.classList.add('hide')

    }

</script>

</html>

获取文本节点的值：

innerText innerHtml

value获取当前选中的value值

1.input value获取当前标签中的值

2.select （selectedIndex）

3.textarea

innerHTML 给节点添加html代码：

该方法不是w3c的标准，但是主流浏览器支持

tag.innerHTML = “<p>要显示内容</p>”;

案例：输入框搜索关键字(focus, blur)

使用js操作css属性的写法是有一定的规律：

1、对于没有中划线的css属性一般直接使用style.属性名即可。如：

obj.style.margin，obj.style.width，obj.style.left，obj.style.position等

2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如：

obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等。

创建节点实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="myinput">

    </div>

</body>

<script>

    var myinput = document.getElementById('myinput')

//    var tag = "<input type='text'>"

//    myinput.insertAdjacentHTML('before',tag)

    var myipt = document.createElement("input")

    myipt.setAttribute("type","button")

    myipt.setAttribute("value","点击")

    myinput.appendChild(myipt)

</script>

</html>