原创

前端学习:javascript进阶

本文为博主原创文章,欢迎转载,请注明出处
本文链接:https://pengshiyu.blog.csdn.net/article/details/79365654

知识点

复习

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.直接绑定标签, οnclick="func()"
        2.现获取dom对象,然后进行绑定
            document.getElementById("id").οnclick=func()

        this,当前触发事件的标签
            第一种绑定方式:
                οnclick="func(this)"
                function func(self){
                    //self,当前点击的标签
                }
            第二种绑定方式:
                id ="id"
                document.getElementById("id").οnclick=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>

效果
这里写图片描述

文章最后发布于: 2018-02-24 21:49:23
展开阅读全文
0 个人打赏

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览