CSS、JavaScript 初心

目录

CSS篇

• 引用外部样式表的方式
• 选择器
  • 选择器类型
  • 群选择器(,)、通用选择器(*)
• 伪类和伪元素
• 页面的逻辑分区 -> div span

JavaScript篇

• 面对对象编程
• 特殊函数和对象
• AJAX 异步的JavaScript和XML
• 跨域请求

CSS篇

引用外部样式表的方式

1. 使用HTML链接样式表<link rel="stylesheet" href="uri_of_css">

2. 使用CSS链接样式表<style> @import uri("uri_of_css") </style>

<style>
    @import uri("uri_of_css")
</style>

选择器

• 选择器类型

1. 标签选择器        整体控制    *{}
2. 类选择器        精准控制    *.class{}
3. ID选择器        更精准的控制    *#id{}
4. 派生选择器        根据HTML的DOM树族谱关系选择对象
5. 伪选择器        选择伪类和伪元素

• 群选择器(,)、通用选择器()
  群选择器，在选择一堆具有公共css样式属性的不同对象时，用逗号隔开即可
  通用选择器如其名，选择所有对象，事实上，.class{}等价于.class{}

• DOM
  祖先标签/派生标签、父标签/子标签、同胞标签

伪类和伪元素

页面的逻辑分区 -> div span

div, 即division，和span一样，它们将页面切割成一个个逻辑分区，不过div的display方式是block，span的display方式是inline

JavaScript篇

面对对象

• 什么是对象

每个对象都具有一系列属性, 还具有特定的可以执行的操作
从而 field method 构成了对象

• 三种方式构建对象

    // json -> 适合创建单个对象的场景
    var user = {
        name: "Unknown",
        age: 0,
        show: function () {
            log(`姓名: ${ this.name }, 年龄: ${ this.age }`)
        }
    }

    // 工厂方法
    function getUser(name, age) {
        var user = {
            name: name,
            age: age,
            show: function () {
                log(`姓名: ${ this.name }, 年龄: ${ this.age }`)
            }
        }
        return user
    }

    // 构造函数, 构造函数能在lambda表达式中使用this关键字, 同时能捕获构造时的形参, 强烈推荐
    // 调用构造函数必须使用 new 关键字
    function User(name, age) {
        this.name = name
        this.age = age
        this.show = fun => {
            log(`姓名: ${ this.name }, 年龄: ${ this.age }`)
        }
    }

特殊函数和对象

• eval() 和 Function

• 简单实现jQuery中的ready()函数
  有时我们需要在head中进行DOM操作，而此时DOM文档并未加载，所以找不到标签导致报错，这时就需要注册window.onload监听事件，把DOM操作放在事件中
  模拟一下$库

var $ = window.$ || {
    inited: false,

    /** 打印日志 */
    log: function (any) {
        console.log(any)
        this.ready(function () {
            var divLog = document.getElementById("log");
            if (divLog !== null) divLog.innerHTML += any + "<hr>"
        })
    },

    init: function () {
        thiz = this
        this.ready(function () {
            // 设置inited字段
            thiz.inited = true
            // 设置viewport
            document.head.innerHTML += '<meta content="width=device-width,initial-scale=1.0" name="viewport">'
        })
        return true
    },

    ready: function (lambda) {
        if (this.inited) {
            return lambda()
        }
        window.addEventListener("load", lambda)
    },

    setTitle: function (title) {
        const nodeTitles = document.querySelectorAll("html head title")
        nodeTitles.forEach(
            function (e) {
                document.head.removeChild(e)
            }
        )
        const nodeTitle = document.createElement("title")
        nodeTitle.innerText = title
        document.head.appendChild(nodeTitle)
    },
}

if (!$.init()) {
    alert("warning: init $ failed!")
}

AJAX 异步的JavaScript和XML

• xhr: XMLHttpRequest
  AJAX主要通过XMLHttpRequest对象完成，一个简单的AJAX请求如下：

        function ls() {
            var xhr = new XMLHttpRequest();
            console.log(`${xhr.readyState} -> UNSET 对象创建完成`);
            xhr.open(method = "GET", url = "http://baidu.com:8888");
            xhr.timeout = 2000
            xhr.ontimeout = event => {
                console.log("timeout")
            }
            console.log(`${xhr.readyState} -> OPENED 已设置open目标`);
            xhr.addEventListener(
                "readystatechange", event => {
                    switch (event.target.readyState) {
                        case 2:
                            console.log(`${xhr.readyState} -> HEADERS_RECEIVED 已调用send方法`);
                            break;
                        case 3:
                            console.log(`${xhr.readyState} -> LOADING 接收response中`)
                            break;
                        case 4:
                            console.log(`${xhr.readyState} -> DONE response接收完毕`);
                            break;
                        default:
                            console.log("Unknown state")
                    }
                }
            )
            xhr.send();
        }

请求超时：

0 -> UNSET 对象创建完成
1 -> OPENED 已设置open目标
4 -> DONE response接收完毕
timeout

请求完成：

0 -> UNSET 对象创建完成
1 -> OPENED 已设置open目标
2 -> HEADERS_RECEIVED 已调用send方法
3 -> LOADING 接收response中
4 -> DONE response接收完毕

跨域请求

• 访问控制允许来源

可变参数 arguments

JavaScript具有强大的灵活性，字段的访问是通过String来匹配的，通过运算符[]来完成，这为可变参数的实现提供了便利
可以这样遍历传入函数的参数：

function f() {
  console.log(arguments)
  console.log(arguments.length)
  for (var key in arguments) {
    console.log(`${key} -> ${arguments[key]}`)
  }
}

f('a', 'b', 'c')

// output:
[object Arguments] {
  0: "a",
  1: "b",
  2: "c"
}
3
"0 -> a"
"1 -> b"
"2 -> c"

现在可以用arguments[0]、arguments['1']来依次获取第1、2个参数

END