前端学习：javascript进阶-阿里云开发者社区

知识点

复习
html
    标签，块级 行内
css
    position
    background
    text-align
    margin
    padding
    font-size
    z-index
    over-flow
    :hover
    opacity
    float(clear:both)
    line-height
    border
    color
    display
    补充：页面布局
    主站布局
        <div class="pg-header"></div>
            <style>width:980px; margin:0 auto /*内容自动居中*/</style>
        <div class="pg-body"></div>
        <div class="pg-footer"></div>
    后台管理布局
        position
            fixed  窗口定位，永远固定在窗口某个位置
            relative 单独无意义
            absolute 页面定位，第一次定位在指定页面位置，滚轮滚动则改变
        1.左侧菜单跟随滚动条 fixed
        2.左侧菜单固定不动  absolute
javascript
    for循环
        for(var item in [11, 22, 33]){
            console.log(item)  //输出索引
        }
        var arr = [11, 22, 33, 44]
        for(var i = 0; i < arr.length; i = i + 1){
            break;
        }
        while(条件){
        }
    条件语句
        if(){
        }
        else if{
        }
        else{
        }
        ==
        ===
        swich(name){
            case "1":
                console.log("1");
                break;
            case "2":
                console.log("2");
                break;
            default :
                console.log("default");
        }
    函数：
        function func(arg){
            return arg+1;
        }
        var result = func(1);
        console.log(result);
    普通函数：
        function func(){
        }
    匿名函数：
        setInterval("func()", 5000);
        setInterval(function(){
            console.log("123");
            }, 5000)
    自执行函数：
        function func(){
        }
        func()
        //解释到这里就会自动执行
        (function(arg){
            console.log(arg);
        })(1)
    序列化操作
        JSON.stringify(obj)  // 将对象转换为字符串
        JSON.parse(str)  // 将字符串转为对象
    转义
        客户端（cookie） -》 服务器端
        将数据进过转义后，保存在cookie中
        decodeURI()
        encodeURI()
    eval
        python
            val = eval(表达式)
                    exec(执行代码)
        javascript
            eval两者集合
    时间
        Date类
            var d = new Date()
            d.getxxx() 获取
            d.setxxx() 设置
    作用域
        其他语言（c#）：以代码块作为作用域
        public void func(){
            if(1 == 1){
                string name = "java";
            }
            console.writeline(name); //报错
        }
        python：以函数作为作用域
            def func():
                if(1==1):
                    name = "alex"
                print(name) //正常输出
            func()
            print(name) //报错
        javascript:
            1.以函数作为作用域
            function func(){
                if(1==1){
                    var name = "alex";
                 }
                 console.log(name);
            }
            2.函数的作用域，在函数未被调用之前，已经被创建
            3.函数的作用域存在作用域链，调用前被创建
            例如：
            xo = "eric";
            function func() {
                xo = "alex";
                function foo() {
                    console.log(xo)
                }
                xo = "tony";
                return foo;
            }
            var ret = func()
            ret()
            4.函数内局部变量提前申明
    面向对象
    function foo(){
        var xo = "alex";
    }
    foo()
    function Foo(n){
        this.name = n;  // 属性
        this.sayName = function(){
            console.log(this.name);
        }  // 方法
    }
    var obj = new Foo("we");
    obj.name
    obj.sayName()
    this 指代对象（python self）
    创建对象，new 函数()
    原型：
    function Foo(n){
        this.name = n;
    }
    # Foo原型  字典
    Foo.prototype = {
        “sayName": function(){
            console.log(this.name)
        }
    }
DOM 文档对象模型
    查找
        直接查找
            var obj = document.getElementById("li");
        间接查找
            文件内容操作
            innerText 仅文本
            innerHTML 全部内容
            value
                input value 获取当前标签中的值
                select value 获取选中的value值（selectedIndex）
                textarea value获取当前标签中的值
            搜索框示例
    样式操作
        className
        classList
            classList.add
            classList.remove
        obj.style.fontSize="16px";
        obj.style.backgroundColor="red";
    属性操作
        attributes
        setAttribute
        removeAttribute
    创建标签，添加到html中
        1.字符串
        2.对象 document.createElement("div")
    提交表单
        任何标签都可以，通过dom提交表单
        document.getElementById("id").submit();
    其他
        console.log()  输出框
        alert()        弹出框
        var ret = confirm() 确认框 true/false
    url和刷新
        location.href  获取url
        location.href= "url" 设置url，重定向
        location.reload() 重新加载 相当于 location.href = location.href
    定时器
        var obj = setInterval(function(){}, 5000)
        clearInterval(obj)
    设置延时
        var obj = setTimeout(function(){}, 5000)
        clearTimeout(obj)
    事件
        onclick onblur onfocus
    面试题：行为 样式 结构 相分离的页面？
             js css html
    this 谁调用this，就指向谁
    绑定事件
        1.直接绑定标签， onclick="func()"
        2.现获取dom对象，然后进行绑定
            document.getElementById("id").onclick=func()
        this,当前触发事件的标签
            第一种绑定方式：
                onclick="func(this)"
                function func(self){
                    //self,当前点击的标签
                }
            第二种绑定方式：
                id ="id"
                document.getElementById("id").onclick=function(){
                    this 指代当前点击的标签
                }
            第三种绑定方式：
                一个事件可以执行多个函数
                addEventListener()
    css属性转为javascript   -去掉，首字符大写
    多查手册
    sublime  插件 emmet

代码实例：

AO对象

function func(age){
        console.log(age);  //function
        var age = 27;
        console.log(age);  //27
        function age() {}
        console.log(age); //27
    }
    func(3);
    /*
    active object ==> AO
    1.形式参数  AO.age = undefined; AO.age = 3;
    2.局部变量  AO.age = undefined;
    3.函数声明表达式  AO.age = function()
     */

一个hover两个元素不一样的效果

<style>
    .item:hover{
        background-color: #e4393c;
    }
    .item:hover .b{
        background-color: #64b5dd;
    }
</style>
<div class="item">
    <div class="a">1234567890</div>
    <div class="b">1234567890</div>
</div>

显示效果

javascript以函数为作用域

<script>
        xo = "eric";
        function func() {
            xo = "alex";
            function foo() {
                console.log(xo);  //tony
                xo = "Jack";
            }
            xo = "tony";
            return foo;
        }
        var ret = func();
        ret()
</script>

左侧菜单跟随滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单跟随滚动</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg-header{
            height:48px;
            background-color: #0d3ea2;
        }
        .pg-content .menu{
            width:200px;
            position: fixed;
            top:48px;
            left:0;
            bottom:0;
            background-color: #333333;
        }
        .pg-content .content{
            position:fixed;
            top: 48px;
            left:200px;
            right:0;
            bottom:0;
            background-color: #dddddd;
            overflow:auto;
        }
    </style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu">
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
    </div>
    <div class="content">
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
    </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

显示效果

左侧菜单固定不动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单固定不动</title>
    <style>
        body{
            margin: 0 auto;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height:48px;
            background-color: #0d3ea2;
        }
        .pg-content .menu{
            width:200px;
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
        }
        .menu-back{
             background-color: #333333;
        }
        .pg-content .content{
            position:absolute;
            top: 48px;
            left:200px;
            right:0;
            bottom:0;
            /*!*min-width:980px;*!  最小宽度*/
            /*overflow:auto;*/
        }
        .content-back{
            background-color: #dddddd;
        }
    </style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
    <div class="menu left">
        <div class="menu-back">
        <p style="margin-top: 0">lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
    </div></div>
    <div class="content right">
        <div class="content-back">
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
    </div>
</div></div>
<div class="pg-footer"></div>
</body>
</html>

效果同上

顶部菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顶部菜单栏</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body{
            margin: 0 auto;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height:48px;
            background-color: #0d3ea2;
            line-height: 48px;
             color: white;
        }
        .pg-header .logo{
            width:200px;
            color:white;
            font-size: 21px;
            text-align: center;
            background-color: #0d3686;
        }
        .pg-header .icons{
            padding: 0 20px;
        }
        .pg-header .icons:hover{
            background-color: #0d3686;
        }
        .pg-header .icons .num{
            background-color: red;
            display: inline-block;
            padding: 10px 7px;
            font-size:12px;
            border-radius: 50%;
            line-height: 1px;
        }
        .pg-header .user{
            padding: 0 30px;
            height: 48px;
            margin-right: 100px;
            background-color: #0d3ea2;
        }
        .pg-header .user .menu{
            position: absolute;
            right:40px;
            top:48px;
            width:160px;
            z-index:20;
            background-color: #dddddd;
            display:none;
        }
        .pg-header .user .menu a{
            display:block;
            text-underline: none;
            /*background-color: #0d3686;*/
        }
        .pg-header .user:hover{
            background-color: #0d3686;
        }
        .pg-header .user:hover .menu{
            display:block;
        }
        .pg-header .user .menu a:hover{
           background-color: #64b5dd;
        }
        .pg-header .user a img{
            width:40px;
            height: 40px;
            border-radius: 50%;
            margin-top: 4px;
        }
        .pg-content{
        }
        .pg-content .menu{
            width:200px;
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
        }
        .menu-back{
             background-color: #333333;
        }
        .pg-content .content{
            position:absolute;
            top: 48px;
            left:200px;
            right:0;
            bottom:0;
            z-index:9;
            /*!*min-width:980px;*!  最小宽度*/
            /*overflow:auto;*/
        }
        .content-back{
            background-color: #dddddd;
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div class="logo left">毛豆科技</div>
    <div class="user right">
        <a href="#"><img src="img/微信头像.jpg" alt=""></a>
        <div class="menu">
            <a href="#">设置</a>
            <a href="#">资料</a>
            <a href="#">退出</a>
        </div>
        </div>
        <div class="icons right">
         <i class="fa fa-commenting-o" aria-hidden="true"></i>
             <span class="num">5</span>
     </div>
     <div class="icons right">
         <i class="fa fa-envelope-o" aria-hidden="true"></i>
     </div>
</div>
<div class="pg-content">
    <div class="menu left">
        <div class="menu-back">
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
            <p>lalalallala</p>
    </div></div>
    <div class="content right">
        <div class="content-back">
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
        <p>lalalallala</p>
    </div>
</div></div>
<div class="pg-footer"></div>
</body>
</html>

显示效果

提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
</head>
<body>
<form id="f1" action="http://www.baidu.com/s?">
    <input type="text" name="wd">
    <input type="submit" value="提交">
    <a onclick="submitForm()">提交</a>
</form>
<script>
    function submitForm() {
        document.getElementById("f1").submit();
    }
</script>
</body>
</html>

事件捕捉冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            width:400px;
            height:300px;
            background-color: #e4393c;
        }
        #content{
            width:300px;
            height:200px;
            background-color: #0d3ea2;
        }
    </style>
</head>
<body>
捕捉：html -> body -> div
冒泡：div -> body -> html
<div id="main">
    <div id="content"></div>
</div>
<script>
    var main = document.getElementById("main");
    var content = document.getElementById("content");
    // false 冒泡  true  捕捉
    main.addEventListener("click", function () {
        console.log("main");
    }, true);
     content.addEventListener("click", function () {
        console.log("content");
    }, true);
</script>
</body>
</html>

添加标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加标签</title>
</head>
<body>
    <button onclick="addElement1()">添加1</button>
    <button onclick="addElement2()">添加2</button>
    <div id="i1"><p><input type="text"></p></div>
    <script>
        // 通过字符串创建
        function addElement1() {
            // 创建标签，添加到li里面
            var tag = document.getElementById("i1");
            var newTag = "<p><input type='text'></p>";
            // beforeBegin  afterBegin  beforeEnd  afterEnd
            tag.insertAdjacentHTML("beforeEnd", newTag);
        }
        // 通过对象方式
         function addElement2() {
            // 创建标签，添加到li里面
            var tag = document.getElementById("i1");
            var input = document.createElement("input");
            input.setAttribute("type", "text");
            input.style.color = "red";
            var p = document.createElement("p");
            p.appendChild(input);
            tag.appendChild(p);
        }
    </script>
</body>
</html>

绑定多个事件函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定多个事件函数</title>
</head>
<body>
    <div id="i1" style="width: 300px; 
    height:400px; background-color: red"></div>
    <script>
        var tag = document.getElementById("i1");
        tag.addEventListener("click", function () {
            console.log("111");
        },false);
        tag.addEventListener("click", function () {
            console.log("222");
        },false);
    </script>
</body>
</html>

行为样式结构分离实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行为样式结构分离实例</title>
    <style>
        #i1{
            background-color: #0d3686;
            width: 300px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <script>
        var div = document.getElementById("i1");
        div.onclick = function(){
            console.log("hello world")
        }
    </script>
</body>
</html>

表格隔行换色-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格隔行换色-1</title>
</head>
<body>
    <table border="1px" style="width:300px">
        <tr onmouseover="t1(0)" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr>
        <tr onmouseover="t1(1)" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr>
        <tr onmouseover="t1(2)" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        function t1(n) {
            var tag =document.getElementsByTagName("tr")[n];
            console.log(tag);
            tag.style.backgroundColor="red";
        }
        function t2(n) {
            var tag =document.getElementsByTagName("tr")[n];
            console.log(tag);
            tag.style.backgroundColor="";
        }
    </script>
</body>
</html>

表格隔行换色-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格隔行换色-2</title>
</head>
<body>
    <table border="1px" style="width:300px">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        var trs = document.getElementsByTagName("tr");
        var len = trs.length
        for(var i = 0; i < len; i++){
            // i =0 1 2 作用域改变了
            trs[i].onmouseover = function () {
                //this指向调用者
                this.style.backgroundColor="red";
            };
            trs[i].onmouseout = function () {
                this.style.backgroundColor="";
            };
        }
    </script>
</body>
</html>

设置延时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置延时</title>
</head>
<body>
<div id="i1"></div>
<input onclick="del()" type="button" value="删除">
<script>
    function del() {
        var tag = document.getElementById("i1");
        tag.innerText="已删除";
        var obj = setTimeout(function () {
            tag.innerText="";
        }, 5000)
    }
</script>
</body>
</html>

输入框提示功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框提示功能</title>
</head>
<body>
    <div style="width:600px; margin: 0 auto;">
        <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字">
        <input id="i2" type="text" placeholder="请输入关键字">
    </div>
    <script>
        // 光标移入输入框隐藏提示文字
        function Focus() {
            var tag = document.getElementById("i1");
            var val = tag.value;
            if(val=="请输入关键字"){
                tag.value="";
            }
        }
        // 光标移出输入框显示提示文字
        function Blur() {
            var tag = document.getElementById("i1");
            if(tag.value.length==0){
                tag.value="请输入关键字";
            }
        }
    </script>
</body>
</html>

效果

前端学习：javascript进阶

知识点

AO对象

一个hover两个元素不一样的效果

javascript以函数为作用域

左侧菜单跟随滚动

左侧菜单固定不动

顶部菜单栏

提交表单

事件捕捉冒泡

添加标签

绑定多个事件函数

行为样式结构分离实例

表格隔行换色-1

表格隔行换色-2

设置延时

输入框提示功能

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

前端学习：javascript进阶

知识点

AO对象

一个hover两个元素不一样的效果

javascript以函数为作用域

左侧菜单跟随滚动

左侧菜单固定不动

顶部菜单栏

提交表单

事件捕捉冒泡

添加标签

绑定多个事件函数

行为样式结构分离实例

表格隔行换色-1

表格隔行换色-2

设置延时

输入框提示功能

热门文章

最新文章

相关课程

相关电子书

相关实验场景