CSS选择方式
选择器是选取需设置样式的元素(标签)
分类：元素选择器、id选择器、类选择器
元素选择器
元素名称{color: red;}
id选择器(唯一)
#id属性值{color: red;}
类选择器
.class属性值{color: red;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: red;
}
#name {
color: blue;
}
.cls{
color: green;
}
</style>
</head>
<body>
<div>hello</div>
<div id="name">hello</div>
<div class="cls">hello</div>
</body>
</html>
JavaScript
JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互（JavaScript能够改变HTML内容、JavaScript能改变图像的src属性值JavaScript能够进行表单验证）
JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript（简称：JS）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准。
ECMAScript 6 (ES6)是最新的JavaScript版本(发布于2015年)。
引入方式
有内部脚本、外部脚本两种
内部脚本
将JS代码定义在HTML页面中
在HTML中，JavaScript 代码必须位于标签之间
<script>
alert("hello~~");
</script>
在HTML文档中可以在任意地方，放置任意数量的
一般把脚本置于 元素的底部，可改善显示速度，因为脚本执行会拖慢显示
外部脚本
将JS代码定义在外部JS文件中，然后引入到HTML页面中
1.创建外部文件，在文件中写JS代码（name.js）
alert("hello~~");
2.将JS文件导入到HXML中
<script src=./name.js"> </script> <!--src为路径-->
外部脚本不能包含
基础语法
书写语法
区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释:
➢单行注释：//注释内容
➢多行注释：/* 注释内容*/
大括号表示代码块
输出语句
使用window.alert()写入警告框（window. 可以省略）
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
window.alert("hello1") //弹出警告框
alert("hello2") //与上列代码功能一样
document.write("hello") //写入HTML
console.log("hello") // 写入浏览器的控制台
变量
JavaScript中用var关键字(variable 的缩写)来声明变量，而且是全局变量还可以重复定义
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则：
➢组成字符可以是任何字母、数字、下划线 (_)或美元符号($)
➢数字不能开头
➢建议使用驼峰命名
ECMAScript 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
ECMAScript 6新增了const关键字，用来声明一个常量(值不可更改)。一旦声明，常量的值就不能改变。
数据类型
JavaScript中分为：原始类型和引用类型
5种原始类型:
number：数字(整数、小数、NaN(Not a Number))
string：字符、字符串，单双引皆可
boolean：布尔。true, false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型
var num = 1
typrof num
数据不赋值默认为undefined类型
运算符
一元运算符：++，–
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，，=…
逻辑运算符：&&，||，！
三元运算符：条件表达式 ? truevalue : false_value
运算符与Java中的基本一样
* 使用==时，会先判断类型是否一样，如果不一样，则进行类型转换再比较值
*使用===时，会判断类型是否一样，如果不一样会直接返回false
类型转换
1.其它类型转换为number
string会按字符串的字面值转为数字，如果字面值不是数字则转换NaN，一般使用paresInt函数
boolean：true转换为1，false转换为0
2.其它类型转换为Boolean
number：0和NaN转换为false，其它转为0
string：空字符串转为0，其它转为true
null：转为false
undefind：转为false
流程控制语句
有if、switch、for、while、do.while，与Java的用法一摸一样
函数
函数是被设计为执行特定任务的代码块
定义函数通过function关键词进行定义
function name(参数1，参数2…){
要执行的代码
}
f
var return = name(参数, …)
*形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return即可
调用时与Java中的方法类似
result = name();
js函数调用可以传递任意个数参数
常用对象
Array对象
Array原来定义数组
定义
var 变量名 = new Arrsy(素列表);
var 变量名 = [元素列表];
访问
arr [索引] = 值
索引从0开始
JS数组类似于Java集合，长度、类型都可变。
Array对象属性
| 属性 | 概述 |
| constructor | 返回对创建此对象的数组函数的引用 |
| length | 设置或返回数组中元素的数目 |
| prototype | 使您有能力向对象添加属性和方法 |
对象方法
| 方法 | 概述 |
| concat() | 连接两个或更的数组,并返回结果。 |
| join() | 把数组的所有元素放入一个字符串。 元素通过指定的分隔符进行分隔。 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reverse() | 颠倒数组中元素的顺序。 |
| shif() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素 |
| sort() | 对数组的元素进行排序 |
| splice() | 删除元素，并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素,并返回新的长度。 |
| valueOf() | 返回数组对象的原始值 |
String
定义
var 变量名 = new String(a); //方法一
var 变量名 = s; //方法二
属性
| 属性 | 概述 |
| length | 字符串的长度 |
方法
| 方法 | 概述 |
| charAt() | 返回在指定位置的字符 |
| IndexOf() | 检索字符串 |
Java里有的方法JS里差不多也都有
*trinm()：该方法可以去除字符串两端的空白字符
自定义对象
格式
var 对象名称 = {
属性名称1：属性值1,
属性名称2：属性值2,
…
函数名称：function(形参列表){
}
…
};
BOM&DOM&事件监听
BOM对象
简介
Browser Object Model 浏览器对象模型
JavaScript将浏览器的各个组成部分封装为对象
组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
Window
获取
直接使用window，其中window.可以省略
属性
获取其他BOM对象
| 属性 | 概述 |
| history | 对History对象的只读引用。请参数History对象。 |
| Navigator | 对Navigator对象的只读引用。请参数Navigator对象。 |
| Screen | 对Screen对象的只读引用。请参数Screen对象。 |
| location | 用于窗口或框架的Location对象。请参阅Location对象。 |
方法
| 方法 | 概述 |
| alert() | 显示带有一段消息和一 个确认按钮的警告框。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。(点击确认会返回true，点击取消返回false) |
| setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式(只执行一次) |
setTimeout(function () {
alert("hello")
},3000) // 3秒后弹出“hello”
setInterval(function (){
alert("hello")
},3000) // 每3秒弹出“hello”
History
获取
使用window.history获取，其中window.可以省略
window.history.方法();
history.方法();
方法
| 方法 | 概述 |
| back | 加载history列表中的前一个URL |
| forword | 加载history列表中的后一个URL |
Location
获取
使用window.location其中window.可以省略
window.location.方法();
location.方法();
属性
| 属性 | 概述 |
| href | 设置或返回完整的URL |
DOM对象
简介
Document Object Model文档对象模型
将标记语言的各个组成部分封装为对象
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
JavaScript通过DOM，就能够对HTML进行操作了
改变HTML元素的内容
改变HTML元素的样式(CSS)
对HTML DOM事件作出反应
添加和删除HTML元素
DOM是W3C (万维网联盟)的标准
DOM定义了访问HTML和XML文档的标准
W3C DOM标准被分为3个不同的部分：
1.核心 DOM：针对任何结构化文档的标准模型
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
- XML DOM：针对XML文档的标准模型
3.HTML DOM：针对HTML文档的标准模型
Image：
Button：
获取Element对象
使用Document对象的方法来获取
getElementByld：根据id属性值获取，返回一个Element对象
getElementsByTagName：根据标签名称获取，返回Element对象数组
getElementsByName：根据name属性值获取，返回Element对象数组
getElementsByClassName：根据class属性值获取，返回Element对象数组
*HTML Element对象的使用一般是查阅文档使用
事件监听
事件：HTML 事件是发生在HTML元素上的“事情”。比如：按钮被点击、鼠标移动到元素之上按下键盘按键。
事件监听：JavaScript 可以在事件被侦测到时执行代码
事件绑定
事件绑定有两种方式，可以通过HTML标签中的事件属性进行绑定，还可以通过DOM元素属性绑定
//方式一：通过HTML标签中的事件属性进行绑定
//<input type="button" onclick="on()">
function on(){
alert("hello")
}
//方式二：通过DOM元素属性绑定
//<input type = "button" id="btn">
document.getElementById("btn").onclick = function (){
alert("hello")
}
常见事件
| 事件名 | 说明 |
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
*Event代表事件对象
正则表达式
概念
正则表达式定义了字符串组成的规则
定义
1.直接量（不要加引号）
var reg = /^\w{6,10}$/;
2.创建RegExp对象
var reg = new RegExp("/^\\w{6,10}$/");
方法
test(str)：判断指定字符串是否符合规则，返回true或false
语法
| 符号 | 解释 |
| ^ | 表示开始 |
| $ | 表示结束 |
| [] | 表示某个范围内的单个字符 |
| . | 代表任意单个字符 |
| \w | 代表单词字符：字母、数字、下划线 |
| \d | 表示数字字符 |
量词
| 符号 | 解释 |
| + | 至少一个 |
| * | 零个或多个 |
| ? | 零个或一个 |
| {x} | x个 |
| {m,} | 至少m个 |
| {m,n} | 至少m个，至多n个 |
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
