Python 12 CSS&JavaScript&DOOM

第一部分：CSS

一、选择器

1、普通选择器

标签选择器： a
id选择器： #a
类选择器： .a
属性选择器： a[name="xxx"]

组合选择器:
后代选择器： p a
子选择器： p>a
相邻兄弟选择器： p+a
普通兄弟选择器： p-a

2、伪类：用来查找标签的某些状态（状态选择器）

a:link  # 未被访问
a:visited  # 已访问过
a:hover  # 鼠标悬停时
a:active  # 鼠标点击但还未松开时
input:focus  # input框获取到焦点时

3、伪元素：用来控制标签中的内容样式

p:first-letter  # 标签里第一个字符
p:before  # 在标签开头添加什么，可以清除浮动
p:after  # 在标签结尾添加什么，可以清除浮动

p:before {content: "hello", color: "red"}  # 在标签内容开头出现红色hello

二、浮动

<div style="float: left;"></div>

浮动可以让标签脱离html，相当于漂浮在整个文档上方，因此会造成一些副作用，比如父标签中就没有了内容，高度变成了0，下一行的标签会被浮动的标签覆盖。

解决的办法是用clear属性清除浮动，clear: "left"表示不允许该标签左边有浮动标签，如果有就另起一行。一般可以用伪元素的after。

<div style="float: left;"></div>
<div style="clear: left;"></div>

.clearfix:after{
    content: "";
    clear: "both";
}

<div class="clearfix">  # 一般默认clearfix是用来清除浮动的类
    <div style="float: left"></div>
</div>

三、溢出

如果内容超过了父标签的大小，多余的内容默认会溢出，是可见的，可以通过给父标签设置overflow属性，控制溢出的效果。

overflow:visible  默认可见
overflow:hidden  隐藏溢出部分
overflow:auto   溢出部分可以通过滑轮查看

四、定位

position:relative  相对定位，相对于自己本来的位置
position:absolute  绝对定位，相对于最近的已定位的祖先标签是绝对的
postion:fixed  固定定位，相对于body标签。

五、z-index

可以用来设置标签的级别，数字越大距离人越近。

六、opacity

透明度，0表示完全不透明，1表示完全透明。

第二部分：JavaScript 

一、数据类型

1、数字类型(number)

JS只有一种数字类型，不区分整型和浮点型。

parseInt("123")  //返回123
parseInt("abc")  //返回NaN，不是数字类型
parseFloat("123.123")  //返回123.123

2、字符串类型

.legth  // 返回字符串长度
.trim()  // 移除首尾空白，相当于strip
.trimLeft()
.trimRight()
.charAt(n)  // 返回索引为n的字符，相当于.index()
.indexOf(xx)  // 返回索引，想当于.find()
.substring(n, m)  // 切片
.slice(n, m)  // 切片
.toLowerCase()  // 变成小写
.toUpperCase()  // 变成大写
.split(xx)  // 切割 

3、数组

.length  // 返回长度
.push(xx)  // 在最后添加
.pop()  // 在最后删除
.unshift(xx)  // 在开头添加
.shift()  // 在开头删除
.slice(n,m)  // 切片
.sort()  // 排序，都当成字符串排序
.reverse()  // 反转

二、运算符

1、比较运算符

==弱等于，如果类型不同，会先转换成相同类型，在比较

===强等于，既判断类型又判断值。

2、逻辑运算符

&&相当于是and，|| 相当于or，！相当于非

3、三元运算符

var a = 100;
var b = 200;
var c = a > b ? a:b  // 如果a>b则等于a，否则等于b

三、函数

1、定义函数

function func(a,b){
    return a+b;
}
func(10,20);

2、自执行函数

(function(){
    return 1
})();

3、匿名函数

var a = function(){}

4、词法分析

JavaScript中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

函数内部无论是使用参数还是使用局部变量都到AO上找。

var age = 100;
function func(){
    console.log(age);
    var age = 10;
    console.log(age);
    return 0;
}
func();  //undefined  10  0

var age = 18;
function foo(){
    console.log(age);  // function
    var age = 22;
    console.log(age);  // 22
    function age(){
        console.log("呵呵")；
    }
    console.log(age);  // 22
}    
foo();

如果函数内部定义了同名的变量m和函数m，在调用时，函数声明之前，m都代表函数，声明之后m都代表变量。

四、对象

1、自定义对象

JS里的自定义对象相当于python中的字典，但是只能以字符串作为键。

var obj = {"a":100, "b": 200}
console.log(obj.a)  // 200
console.log(obj["a"])  // 200

2、内置对象（相当于内置模块）

①Date对象

var obj = new Date();  //默认是当前时间，可以传值，new Date("2018-10-20") 
obj.toLocalString()  // 获取本地时间

obj.getFullYear()  // 获取年份
obj.getMonth()  // 获取月份，从0-11
obj.getDay()  // 获取星期
obj.getDate()  // 获取日
obj.getHours()  // 获取小时
obj.getMinutes()  // 获取分钟
obj.getSeconds()  // 获取秒

②Json对象

json是和语言无关的一种通用字符串类型，可以被大部分语言识别并转换成属于当前语言的格式。

var obj = {"a": 100, "b": 200}
var str = Json.stringify(obj)  // 序列化
var dic = Json.parse(str)  // 反序列化

③RegExp对象（正则）

var r1 = new RegExp('^1[3-9]\d{9}')  // 字符串里有两个\
var r1 = /^1[3-9]d{9}/  等价于上面

r1.test("13658643870")  // true
r1.test()  // false，如果不传值，默认是字符串类型的“undefined”

var r2 = /x/i  // i代表不区分大小写，但是只匹配第一个值
var r3 = /x/g  // g代表不区分大小写，但是匹配所有符合结果的值

④Math对象

和Json一样不需要创建

Math.abs(x)  // 返回绝对值
Math.max(x,y)  // 最大值
Math.min(x,y)  // 最小值
Math.pow(x,y)  // x的y次方
Math.sqrt(x)  // 平方根
Math.round(x)  // 四舍五入
Math.random()  // 0-1随机小数

⑤File对象

五、BOM对象和DOM对象

BOM（Browser Object Model）浏览器对象模型，用来操作浏览器相关属性。

DOM（Document Object Model）文档对象模型，用来操作文档。

1、BOM对象

alert;
confirm;
console.log();

location.href  // 获取当前url
location.href('xxxx')  // 跳转到某个页面

setTimeout(xx, 3000)  // 3秒后执行
var clock = setInterval(xx, 3000)  // 每隔3秒执行一次
clearInterval(clock)  // 终止循环

2、DOM对象

// 直接查找
document.getElementById("xx").innerText = "xx"  // 修改标签内容
document.getElementsByClassName("xx")  // 保存到一个变量中，可以通过索引取值
document.getElementsByTagName("xx")

// 间接查找
var t = document.getElementById("xx");
t.parentElement
t.children
t.firstElementChild
t.lastElementChild
t.nextElementSibling
t.previousElementSibling

// 标签创建和删除
var tag = document.createElement("span");  // 创建标签
tag.innerText = "xx"  // 设置文本为xx

var t = document.getElementById("x")
t.appendChild(tag)  // 将tag变成t的子节点 
t.insertBefore(tag)  // 将tag变成t的上一个兄弟节点

t.removeChild(tag)  // 删除标签

// 属性操作
var tag = document.getElementById("xx");
tag.getAttribute("xx");
tag.setAttribute("xx", 123);

// 样式操作
var tag = document.getElementsByTagName[0];
tag.className;  // 获取所有的class，字符串格式
tag.classList;  // 数组格式class
tag.classList.remove("x")  // 删除x
tag.classList.add("xx")  // 添加xx类名

tag.style.name = "xx"
tag.style.backgroundColor = "red"  // 如果有中横线，去掉，变成驼峰式

 事件绑定：

<button id='btn1' onclick=func1();>按钮</button>
<script>
    // 方式一
    function func1(){
        xxxxx
    }
    // 方式二
    var tag = document.getElementById("btn1");
    tag.onclick = function(){
        xxx
    }
</script>

<body>

<label for="province">省</label>
<select id="province">
    <option value="">-请选择省-</option>
</select>

<label for="city">市</label>
<select id="city">
    <option value="">-请选择市-</option>
</select>

<script>
    var city_data = {
        "江苏省":["南京","镇江","苏州"],
        "山东省":["济南","青岛","淄博"]
    };
    // 0.获取两个select标签
    var proTag = document.getElementById("province");
    var cityTag = document.getElementById("city");
    // 1.获取所有省份信息并添加到select标签中
    for (var i in city_data){
        var opt = document.createElement("option");
        opt.innerText = i;
        opt.value = i;
        proTag.appendChild(opt);
    }
    // 2.绑定事件，当选择省份时自动添加该省份的市到select框
    proTag.onchange = function(){
        // 2.0.清空市的选项
        cityTag.innerHTML = "";
        // 2.1.获取选择的省份
        var province = this.value;
        // 2.2.将市添加到标签中
        var cityArray = city_data[province];
        for (var i in cityArray){
            var opt = document.createElement("option");
            opt.innerText = cityArray[i];
            opt.value = cityArray[i];
            cityTag.appendChild(opt);
        }
    }
</script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="inp">
<button id="btn_begin">开始</button>
<button id="btn_end">结束</button>

<script>
    var t;
    var inp = document.getElementById("inp");
    var begin = document.getElementById("btn_begin");
    var end = document.getElementById("btn_end");

    var time = new Date();
    inp.value = time.toLocaleString();

    function f(){
        var now = new Date();
        inp.value = now.toLocaleString();
    }

    begin.onclick = function(){
        if(!t){
            t = setInterval(f,1000);
        }
    };
    end.onclick = function(){
        clearInterval(t);
        t = null;
    }
</script>
</body>
</html>