CSS及javascript
一、CSS简介
css是一门语言，用于控制网页的表现。
cascading style sheet:层叠样式表
二、css的导入方式
css代码与html代码的结合方式
（1）css导入html有三种方式：
1.内联样式：<div style="color:red">...</div>
2.内部样式：<style type="text/css"> div{}
3.外部样式：定义link标签，引入外部css文件
（2）css的选择器与属性
1.css选择器即选择需要设置样式的元素（标签）注意：将style写入<head>中。
元素选择器
id选择器
类选择器
谁选择的范围小，谁先生效。
2.属性
案例：
三、JavaScript简介
javascript是一门跨平台，面向对象的脚本语言（不用编译），可与网页交互。
javascript能改变html的内容。
JavaScript能改变图像的src属性值。
javascript能进行表单验证。
四、JavaScript引入方式
1.内部脚本：<script>标签可以放置于任何地方，数量也不受限制。但一般放置于<body>中。将JS代码定义在HTML中。alert（）==》弹出警告框
2.外部脚本：创文件，写alert（）
导入html中，<script src="..."></script>
五、JavaScript的基本语法
（1）书写语法：
区分大小写
分号写不写都无所谓，但一般情况下写
注释：//表示单行注释，/*...*/表示多行注释
大括号表示代码块
（2）输出语句：
使用window.alert("");写入警告框
使用document.write()写入HTML页面里输出
使用console.log()写入浏览器控制台
（3）变量
类似于全局变量，可重复定义。
用var关键字来声明变量，变量可以存储不同类型的值
let只在代码块中有效，不可重复声明。
（4）数据类型
原始：number，String，boolean，null，undefined
引用
使用typeof运算符可获取数据类型
（5）运算符
一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：+=，-=，*=，/=，%=
关系运算符：>,<,>=,<=,!=,==(会类型转换），===（全等于，判断类型是否一样）
逻辑运算符：&&，||，！
三元运算符：条件表达式？true_value:false_value
(6)类型转换：
1.其他类型转为number
String--》number
用parseInt（eg.alert(parseInt(str)))
string的字面值不是数字，则转换成NAN。
boolean--》number
true转成1，false转成0.不能用parseInt
2.其他类型转为boolean
number：0和NAN转成false
其他数字转成true
string：空字符串转成false
其他则转成true
null：false
undefined：false
str！=null&&str.length>0 =str
(7)流程控制语句
if，switch，for（建议用let），while，do...while
（8）函数（方法）
funtion 名（参数1，参数2[可传任意个参数]）{
return ...;
}
直接调用名（）；
六、JavaScript对象
（1）Array（类似于java中的集合）
1. var 名=new Array（元素列表）；
2.var 名=[ ];
Array对象的属性：length：元素的个数
方法：push：添加
eg.名.push();
splice:删除元素
eg.名.splice(m,n);从m开始删，删n个元素
（2）String
1.var 名=new String（）；
2.var 名=“ ”；
属性：length，不再是Java中的方法了
方法：charAt（），Indexof（），trim（）--》去除字符串两端的空格
（3）自定义对象
var 名={
属性名：值，
属性名：值，
属性名：值...
属性名：function（）{
}
}；
（4）BOM对象
Brouser object Model（浏览器对象模型）
JavaScript将浏览器的各个部分封装成对象。
1.window：窗口对象
方法：alert（）；
confirm（）；弹出确定，取消键，有返回值。
定时器：setTimeout（function(){}，毫秒值）只执行一次
setInterval() 循环执行
2.History：历史记录对象
history.方法（）
方法：back（）：前一个
forward（）:后一个
3.Location：地址栏对象
location.方法（）
属性：设置或返回完整的URL
（5）DOM（Document Object Model）文档对象模型
可对Html文档进行操作
Html DOM：针对html文档的标准模型
image：<img>
Button:<input type="button">
1.获取Element元素对象
使用document对象的方法来获取
getElementById（）通过id属性来获取，返回一个Element对象
getElementByName（）通过name属性来获取，返回一个对象数组
getElementByclassName（）通过class属性来获取一个Element对象数组
getElementBytagName（）通过标签名称，获取一个对象数组
Dom将img封装成对象，可以修改src属性值。
div：style：设置元素css的样式
innerHtml：设置元素内容
元素.style.color="...";返回元素的样式
input中的checkbox多选：可以改变是否被选择
对象.checked=true|false；
eg.document.getElementById("check1").checked=true;
(6）事件监听
JavaScript能够在事件被监测时执行代码
事件即发生在元素上的事情
1.事件绑定方式
第一种方法不建议，JavaScript代码与HTML代码耦合
2.常见的事件（DOM event）
onblur：失去焦点
onfocus：获得焦点
onchange：域的内容被改变
onsubmit：返回true，表单被提交
返回false，表单不被提交
七、正则表达式
1.定义：直接量：注意不要加引号
var reg=/^\w{6,12}$/
创建regexp对象：
var reg=new regexp（"^\\w{6,12}$")
2.方法：测试给定的字符串是否符合规则
返回true或false，eg.reg.test(str)
