CSS、JavaScript 初心
目录
CSS篇
- 引用外部样式表的方式
- 选择器
- 选择器类型
- 群选择器(,)、通用选择器(*)
- 伪类和伪元素
- 页面的逻辑分区 -> div span
JavaScript篇
- 面对对象编程
- 特殊函数和对象
- AJAX 异步的JavaScript和XML
- 跨域请求
CSS篇
引用外部样式表的方式
-
使用HTML链接样式表
<link rel="stylesheet" href="uri_of_css"> -
使用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
