CSS: 层叠样式表

主要作用: 美化页面, 将美化和HTML进行分离,提高代码复用性

选择器:

元素选择器: 元素的名称{}

类选择器: . 开头

ID选择器: #ID选择器

后代选择器: 选择器1 选择器2

子元素选择器: 选择器1 > 选择器2

选择器分组: 选择器1,选择器2,选择器3{}

属性选择器: 选择器[属性的名称='属性的值']

伪类选择器:

浮动:

float 属性: left right

清除浮动:

clear 属性: both left right

盒子模型: 上右下左 padding 10px 20px 30px 40px 顺时针的方向

内边距: 控制的盒子内距离

边框: 盒子的边框

外边距: 控制盒子与盒子之间的距离

绝对定位: position : absolute; top: left

JS开发: 是一门脚本语言,由浏览器来解释执行,不需要经过编译 JS是由我们浏览器解释执行的

ECMAscript：核心部分，定义JS的语法规范

DOM：document object Model

文档对象模型，主要用来管理页面的

BOM：Browser object Model

浏览器对象模型，主要有前进，后退，页面刷线，地址栏，历史记录，屏幕宽高

JS语法：变量弱类型，区分大小写，语法结束后的分号可有可无，写在script标签里

数据类型：
基本数据类型：String字符串/number数字/Boolean布尔/undefined为赋值/null空对象

引用数据类型：对象/内置对象

类型转换：JS内部自动转换

运算符和语句：运算符和java一样

“===”全等号：值和类型都必须相等

“==”值相等就可以

语句和java一样

JS输出：

alert（）直接弹框

document.write（）向页面输出

console.log（）向控制台输出

innerHTML向页面输出

获取页面元素：document。getElementById("名称")；

JS声明变量: var 变量的名字;

JS声明函数: function 函数的名称(参数的名字){}

JS开发的步骤:

1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作,  弹框, 修改页面内容,动态去添加一些东西

定时器

setInterval : 每隔多少毫秒执行一次函数
setTimeout: 多少毫秒之后执行一次函数
clearInterval：关闭循环程序
clearTimeout：关闭一次
显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"

【HTML中innerHTML属性】

表单中常用的事件:

onfocus: 获取焦点事件

onblur : 失去焦点的事件

onkeyup: 按键抬起的事件

onclick: 单击事件

ondblclick: 双击事件

表格隔行换色,鼠标移入和移除要变色:

onmouseenter: 鼠标移入

onmouseout: 鼠标移出

onload: 文档加载完成事件

onsubmit: 提交

onchange: 下拉列表内容改变

checkbox.checked 选中状态

shift：删除并返回数组的第一个元素

slice：从某个已有的数组返回选定的元素（截取从指定下标开始到指定下标结束的子数组）

写法： arrayObject.slice(start,end) start end为元素下标

arrayObject.slice(start) 省略end时表示截取到尾部

start,end还可以为负数，表示从尾部开始截取

sort：对数组的元素进行排序

注意：无论是数字还是字符串，默认的排序都是按首字母顺序，如果数字想按照大小排序，需要写排序算法。
toString：把数组转换为字符串，并返回结果

push

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

push与concat作用相似，都能连接数组

不同之处：
1）返回值类型不同。concat返回连接后的数组 push返回新数组的长度
2）concat连接后原数组没变，实际变成了新的数组push是对改变原数组（****）

join与toString的异同

相同点：都可以将数组转换成字符串

不同点：join默认用逗号分隔，但可以通过调用有参构造指定分隔符

toString只能用逗号分隔。不可以定制

JavaScript内置对象

常用的内部对象
Array、Global、Date、Math、String、Number、Boolean

Array：见上面部分

Global: ECMAScript 中的Global 对象在某种意义上是作为一个终极的“兜底儿对象”来定义的。换句话说，不属于任何其他对象的属性和方法，最终都是它的属性和方法。事实上，没有全局变量或全局函数；所有在全局作用域中定义的属性和函数，都是Global 对象的属性。本书前面介绍过的那些函数，诸如isNaN()、isFinite()、parseInt()以及parseFloat()等看起来都像独立的函数，实际上全都是Global对象的方法。还有就是常见的一些特殊值，

如：

NaN、undefined等都是它的属性。

encodeURI() 编码，加密

encodeURIComponent() 编码。支持中文和特殊字符

decodeURI() 解码，解密

decodeURIComponent() 解码

**eval：计算结果 **
alert(eval(2+2)); 也支持function定义

Date：

参考网址：http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var date = new Date(“July 4,2004,6:25:22”)
var date = new Date(“July 4,2004”)
var date = new Date(2004,7,4,6,25,22)// 2004年8月4日
var date = new Date(2004,7,4)// 2004年8月4日
var date = new Date(“2004/7/4”)
var date = new Date(Milliseconds)
var date = new Date();
获取日期和时间的方法
getYear()：返回年数；（小于2000年返回两位）
getFullYear()：返回年数；
getMonth()：返回当月号数；（比实际小1）
getDate()：返回当日号数；
getDay()：返回星期几；（0表示星期日 1-6就是星期1至星期六）
getHours()：返回小时数；
getMinutes()：返回分钟数；
getSeconds()：返回秒数；
getTime()：返回毫秒数；
设置日期和时间的方法
setYear()：设置年数；
setMonth()：设置当月号数；（set7表示8月）
setDate()：设置当日号数；
setDay()：设置星期几；
setHours()：设置小时数；
setMinutes()：设置分钟数；
setSeconds()：设置秒数；
setTime()：设置毫秒数；
课堂练习：
在页面打印当前年月日时分秒和星期
yyyy年MM月dd日 HH:mm:ss 星期***

正则表达式语法

两种写法
第一种字面量方式
var reg = /abcd/g；
var box = /box/; //直接用两个反斜杠
var box = /box/ig;
第二种 new 对象的方式
var box = new RegExp('box', 'ig'); //第二个参数可选模式修饰符
这两种写法都是两部分参数，第一部分定义验证规则，第二部分是属性
属性就三个值 i g m
i-忽略大小写进行匹配
g-全局匹配
m-多行匹配
第一部分规则是正则的关键。
\d 匹配一个数字字符。等价于 [0-9]。
\D 匹配一个非数字字符。等价于 [^0-9]。
\w 用于匹配字母，数字或下划线字符。
\W W大写，可以匹配任何一个字母或者数字或者下划线以外的字符
[a-z] 字符范围。匹配指定范围内的任意字符。
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。
x|y 匹配 x 或 y
{n} 表示前面的字符或者组合项连续出现n次
{n,} 表示前面出现的字符或者组合项，至少出现n次
{n,m} 表示前面出现的字符或者组合项，至少出现n次，至多出现m次，（n<＝m）
\d{4} 4个任意的数字[a-z]{6}
验证邮政编码：/^\d{6} /
验证固定电话：/^\d{3}-\d{8} | \d{4} - \d{7}/
验证身份证号码：/^\d{15} | \d{18} | \d{17}[x X] /
验证移动电话：/^\d13|\d15\d{9}/
验证电子邮箱地址：/^\w+((-\w+)|(.\w+))@[A-Za-z0-9] ((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+/ /^([\w.-]+)@(\w+).(\w+)/

BOM

BOM：浏览器对象模型(BrowserObjectModel)
window.open
window.open(URL,name,features,replace)
URL:地址
name：窗口名称
features：新窗口要显示的标准浏览器的特征
replace：一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
窗口其他方法
moveTo(x,y)
方法格式：window.moveTo(x,y);
功能：将窗口移动到指定坐标(x,y)处;
resizeTo(x,y)
方法格式：window.resizeTo(x,y);
功能：将当前窗口放大或缩小到(x,y)指定大小，x、y分别为宽度和高度;
resizeBy(x,y)
方法格式：window.resizeBy(x,y);
功能：要使窗口宽度放大或缩小的像素数。可以是正、负数值。
将当前窗口改变到指定的大小(x,y),当x、y的值大于0时为扩大，小于0时为缩小。
moveBy（x,y）
功能：相对窗口的当前坐标把它移动指定的像素。
.focus .blur ## 得到或失去焦点
js中的三种消息对话框分别是alert()，confirm()，prompt()
1、alert():警告窗口
有一个确认按钮。
①写在script标签中

②括号中的内容为字符串或者整型

③点击确认即可关闭，无返回值

window.alert(“欢迎！请按“确定”继续。”)，

2、confirm():确认对话框,返回true/false，
有确认和取消两个按钮
①写在 script标签中
②括号中的内容为字符串和整型
③点击确认返回true，点击取消返回false

3、prompt(？，？):弹出消息对话框
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
①写在script标签中
②str1: 要显示在消息对话框中的文本(提示语)，不可修改
str2：文本框中的内容，可以修改
③点击确认返回输入框中的内容，取消返回null

DOM

什么是DOM: Document Object Model : 管理我们的文档增删改查规则

【HTML中的DOM操作】

一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
DOM的文档操作:

添加节点: appendChild

创建节点: document.createElement

创建文本节点: document.createTextNode()

查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。

删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。

修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点
复制节点：
nodeObject.cloneNode（Boolean）true克隆当前节点以及所有子节点；false只克隆当前节点

DOM操作属性节点

属性是元素的一部分，所以只有获得元素节点后，才能获取和设置属性节点。
getAttribute("属性名") 通过指定属性名，获取属性值
setAttribute("属性名","新属性值") 如果属性名存在，则更改属性值。如果不存在，则创建一个新属性并赋值。
简便形式：element.属性名可以获取和设置指定属性的属性值。但该属性必须存在。
element.removeAttribute("属性") 删除元素节点的指定属性名
element.attributes 返回元素节点中包含所有属性的集合

DOM操作文本节点

DOM将元素中的文本内容当作节点层次之一，即文本节点，文本节点是TextNode对象。
下面文本节点的属性我只列出了一个文本节点独有属性data，但文本节点也是Node对象，所以依然可用其他节点属性，例如nodeName/Type/Value、获取相关层次节点等属性，而length属性和data.length差不多。
文本节点中最容易出现的兼容问题就是空白文本节点，后面会说到怎么解决。
除了通过文本节点的方法和属性来处理文本节点(前提是要获取到文本节点)；还可以将文本内容提取成字符串，处理后，再放回去。关于这两种操作的用法后面会依次介绍。

属性
data 设置或获取 TextNode 对象的值。
方法
appendData(string) 添加字符串到文本节点末尾处。
insertData(offset, string) 从offset指定位置插入string
deleteData(offset, count) 从offset起删除count个字符
replaceData(off,count,string) 从off起将count个字符用string替换
splitText(offset) 从offset起将文本节点分割
substringData(offset, count) 返回从offset起的count个字符
关于空白文本节点

导致空白文本节点的原因：当标签换行，就会产生一个换行符，或者打一个空格，浏览器解析时会把他们当做空白文本节点。
在获取第一个子节点时极容易获取到空白文本节点。那怎么避免空白文本节点呢？
一是所有标签写一行，但这不符合代码美感。
二是将文本内容单独存储在一个元素子节点中，避免元素子节点同时存在文本节点和元素节点，这样再通过firstElementChild和children等属性就只拿到元素节点，再单独对该节点进行处理。

解决空白节点后，下面开始操作文本节点，这里采用文本节点的方法来处理文本内容，使用方法类似于字符串。下面是一个综合案例：

Title

有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换

技术分析:

切换图片:

每个三秒钟做一件事:

步骤分析:

1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
    1. 开启定时器: 执行切换图片的函数 changeImg()
4.  changeImg()
    1. 获得要切换图片的那个元素

1. 完成页面定时弹出广告

1.1 需求分析

一般网页，当我们刚打开的时候，它会5秒之后，显示一个广告，让我们看5秒钟，然后他的广告就自动消失了！

1.2 技术分析

定时器
- setInterval : 每隔多少毫秒执行一次函数
- setTimeout: 多少毫秒之后执行一次函数
- clearInterval：关闭循环程序
- clearTimeout：关闭一次
显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"

1.3 步骤分析

确定事件: 页面加载完成的事件 onload
事件要触发函数: init()
init函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
  1. 再去开启一个定时5秒钟之后,关闭广告

1.4 代码实现

2. 完成完成表单的校验

2.1 需求分析

我们做了一个简单的表单校验，每当用户输入出错的时候，我们是弹出了一个对话框，提示用户去修改。这样的用户体验效果非常不好好。我们今天就是需要来对他进行一个修改，当用户输入信息有问题的时候，我们就再输入框的后面给他一个友好提示。

2.2 技术分析

【HTML中innerHTML属性】

【JS中的常用事件】

onfocus 事件: 获得焦点事件

onblur : 失去焦点

onkeyup : 按键抬起事件

2.3 步骤分析

2.4 代码实现

定时器:

setInterval("test()",3000) 每隔多少毫秒执行一次函数

setTimeout("test()",3000) 多少毫秒之后执行一次函数

timerID 上面定时器调用之后

clearInterval()

clearTimeout()

切换图片

img.src = "图片路径"

事件: 文档加载完成的事件 onload事件

显示广告 : img.style.display = "block"

隐藏广告: img.style.display ="none"

引入一个外部js文件

4. 复选框的全选和全不选

4.1 需求分析

商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有的商品

4.2 技术分析

事件 : onclick点击事件

4.3 步骤分析

全选和全不选步骤分析:

1.确定事件: onclick 单机事件
2.事件触发函数: checkAll()
3.函数要去做一些事情:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态

代码实现

function checkAll(){
//              获得当前第一个checkbox的状态
                var check1 = document.getElementById("check1");
                //得到当前checked状态
                var checked = check1.checked;
//                  获得所有分类项的checkbox
//              var checks = document.getElementsByTagName("input");
                var checks = document.getElementsByName("checkone");
//              alert(checks.length);
                for(var i = 0; i < checks.length; i++){
//                  修改每一个checkbox的状态
                    var checkone = checks[i];
                    checkone.checked = checked;
                }
            }

6. 使用JS控制下拉列表左右选择

6.1 需求分析:

在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品

6.2 步骤分析:

6.3 代码实现