前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目

流式布局思想

"""

页面的尺寸改变动态改变页面布局，或是通过父集标签控制多个子标签，这种布局思想就称之为 - 流式布局思想

1) 将标签宽高设置成 百分比，就可以随屏幕(父集)缩放而缩放

2) 将标签宽高设置成 视图百分比，就可以随屏幕缩放而缩放

3) 将子集字体设置成 继承值，就可以通过父集统一控制子集

"""

例子：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>流式布局</title>

    <style>

        /*body { margin: 0 }*/

        .box {

            width: 800px;

            height: 200px;

            background-color: orange;

            /*页面宽度缩放，盒子始终居中*/

            margin-left: auto;

            margin-right: auto;

            width: 80%;

            /*vw: view width | vh: view height*/

            width: 80vw;

            width: 80vh;

        }

        /*em、rem*/

        .sup {

            font-size: 40px;

        }

        .sub {

            /*font-size: inherit;*/

            /*font-size: 1.5em;*/

            /*width: 5em;*/

            font-size: 2rem;

        }

        html {

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div class="box"></div>

    <div class="sup">

        <div class="sub">字</div>

    </div>

</body>

</html>

JavaScript函数

简单的举例：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>js函数</title>

</head>

<body>

    <h1>js函数</h1>

</body>

<script>

    // 参数：你传你的，我收我的

    function fn1(a, b, c, d) {

        console.log(a, b, c, d);

        console.log('fn1 run');

    }

    fn1(1, 2, 3);

    let fn2 = function (...args) {

        console.log(args);

        console.log(args[0]);

        console.log('fn2 run');

    };

    fn2(1, 2, 3, 4);

    (function () {

        console.log('fn3 run');

    })();

    let fn4 = () => {

        console.log('fn4 run');

    };

    fn4();

    // 有参有反

    let fn5 = (a, b) => {

        console.log(a, b);

        return a + b;

    };

    let res = fn5(1, 2);

    console.log(res);

    // 箭头函数函数体如果只有返回值，可以简写

    let fn6 = (a, b) => a + b;

    res = fn6(10, 20);

    console.log(res);

    // 当形参只有一个，可以省略()

    let fn7 = a => a * ;

    res = fn7(10);

    console.log(res);

    // 当形参为空的简写方式

    let fn8 = () => 200;

    res = fn8();

    console.log(res);

</script>

</html>

面向对象JavaScript

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>面向对象js</title>

</head>

<body>

<h1>面向对象js</h1>

</body>

<script>

    // ES6

    class Student {

        constructor(name) {

            console.log('构造器调用了');

            this.name = name;

        }

        study() {

            console.log(`${this.name}在学习`)

        }

    }

    let s1 = new Student('Bob');

    console.log(s1.name);

    s1.study();

    //ES5

    function Teacher(name) {

        this.name = name;

        this.teach = function () {

            console.log(`${this.name}在教学`)

        };

        this.test = () => {

            console.log(`${this.name}-test`)

        }

    }

    let t1 = new Teacher('Tom');

    console.log(t1.name);

    t1.teach();

    t1.test();

    // 可以理解为类属性，所有对象共有

    Teacher.prototype.age = 10;

    Teacher.prototype.sleep = function () {

         console.log(`${this.name}在睡觉`)

    };

    console.log(t1.age);

    t1.sleep();

    let t2 = new Teacher('Jerry');

    console.log(t2.age);

    t2.sleep();

    /* 根组件、局部组件、全局组件都是Vue的对象，所以给Vue原型设置的变量，所有组件的this都可以访问该变量

    Vue.prototype.abc = 123;

    let localTag = {};

    Vue.component('',{});

    new Vue({

        components: {

           localTag

        }

    });

    */

    // function 与 箭头函数 是有本质区别的

    let h1 = document.querySelector('h1');

    // h1.onclick = function () {

    //     // alert(this.innerText);

    //     console.log(this);

    // };

    // h1.onclick = () => {

    //     // alert(this.innerText);

    //     console.log(this);

    // }

</script>

</html>

巴特西

前端Js复习-前后台的搭建-结合Bootstrap和JQuery搭建vue项目

流式布局思想

JavaScript函数

面向对象JavaScript

最新文章

热门文章