一.Java知识体系结构

二.课程介绍(10天)

1.HTML(1.5天)

用来勾勒出网页的结构和内容

2.CSS(3天)

用来美化网页

3.JavaScript(4天)

让网页呈现动态的数据和效果

4.jQuery(1.5天)

框架,提高JavaScript开发效率

 

三.HTML原理

四.XML和HTML的联系

1.XML

可扩展标签语言

标签,属性,标签的嵌套关系都可扩展

用来存储或传输数据

扩展:自定义

2.HTML

超文本标签语言

语法是固定的(w3c)

用来显示数据

有一些特定的版本严格遵守XML规范

可以将HTML理解为标签固定的XML

 

五.跨行和跨列

六.英雄联盟案例

1.分区

分为3个区域

宽度都是960,都水平居中

在每个div上加上这句话:

style="border:1px solid red;width:960px;margin:0 auto;"

 

2.逐个区域写代码

补充

1.创建WEB项目

必须切换到JavaEE视图(点Eclipse右上角JavaEE)

选择项目下的Deployment,右键点击Generate...

2.上传代码

包含笔记,图片,代码

笔记和图片直接看day01.html

代码看WebBaisc项目

每次上传的内容,包含当天之前的内容

 

今天最后一次上传的就是完整的内容

 

一.表单

 

二.RGB

 

三.box模型

 

一.选择器的优先级

选择器是有优先级的,可以通过权重来计算其优先级

ID选择器:100

类选择器:10

元素选择器:1

.content div : 10+1

.data : 10

.content .data : 10+10

二.w3c官方手册

www.w3school.com.cn

doc.tedu.cn

 

三.行高

四.定位

1.定位的作用

解决元素排列(摆放)的问题

使用定位可以将元素摆放到任意位置

2.定位的分类(5)

1)默认的定位(1)

默认的,块元素垂直排列,行内元素左右排列

这种默认排列的方式称之为流定位

流:元素有序排列而形成的队伍

2)特殊的定位(4)

浮动定位:可以让块元素左右排列

相对定位:可以让元素以自身为目标产生微小的偏移

绝对定位:可以让元素以父亲为目标产生很大的偏移

固定定位:可以让元素以窗口为目标产生巨大的偏移

后三种定位都是以某元素为目标产生偏移

五.浮动定位

 

1.浮动的规律

 

一.浮动

1.浮动规律

 

2.照片墙案例

二.相对,绝对,固定定位

1.他们的共同点

都是要设置偏移,并且设置偏移的方式一样

设置偏移的语法 left:20px;

以任意边为基准,向目标中心方向偏移是正数 

2.他们的区别

2.1相对定位

以自身为目标

元素不脱离流(队伍),其位置不释放

position:relative;

只有相对定位不释放位置

2.2绝对定位

以带有position属性的父辈为目标

若所有父辈都有position则采用就近原则

若所有父辈没有position则以body为目标

绝对定位元素脱离流(队伍),位置会释放

position:absolute; 

2.3固定定位

以浏览器窗口为目标

固定定位元素脱离流(队伍),位置会释放

position:fixed;

 

可以把元素挂在窗口上永远不动

 

三.如何选择定位

固定定位:是否要将元素挂在窗口上不动?

浮动定位:是否要将块元素左右排列?

相对定位:是否元素在原有位置上产生很小的偏移?

绝对定位:15秒以后没想出来,就是绝对.

 

四.管理员列表

 

 

五.堆叠顺序

 

六.元素的显示方式

1.有哪几种显示方式

1)块

有宽高,上下排列

h/p/ol/ul/li/div/table/form

2)行内

无宽高,左右排列

span(i/em/b/strong/u/del)/a/label

3)行内块

有宽高,左右排列

img/input/select/textarea

2.如何修改显示方式

通过display属性修改显示方式

块:block

行内:inline

行内块:inline-block

隐藏:none (*)

 

七.管理员列表

 

 

五.堆叠顺序

六.元素的显示方式

1.有哪几种显示方式

1)块

有宽高,上下排列

h/p/ol/ul/li/div/table/form

2)行内

无宽高,左右排列

span(i/em/b/strong/u/del)/a/label

3)行内块

有宽高,左右排列

img/input/select/textarea

2.如何修改显示方式

通过display属性修改显示方式

块:block

行内:inline

行内块:inline-block

隐藏:none (*)

 

七.管理员列表

 

一.计算平方案例

二.js调试技巧

1.看错误信息

看浏览器控制台的错误信息

调你会的单词看

2.打桩

观察程序执行的过程

看每一步变量的值是否正确

3.排除法+二分法

每次删除一半代码留一半代码

判断是哪一半中含有语法错误

这种方法是用来定位语法错误的

 

三.猜数字案例

一.常用内置对象

1.String

和Java类似

2.Number(*)

toFixed(n)

3.Boolean

没有什么API

4.Array(*)

如何创建数组

数组倒转方法

数组排序方法(*)

 

5.Math

和Java类似

6.Date

如何创建日期

如何转换为本地格式的字符串

如何读写时间分量

7.RegExp(*)

7.1如何创建正则对象

1)直接量

/正则表达式/模式

举例: /\d/g

2)创建对象

new RegExp(正则字符串,模式)

举例: new RegExp("\d","g")

7.2匹配模式

g:global,全局检测字符串.

i:ignore,忽略大小写来检测字符串.

7.3正则对象的方法

1)reg.exex(str)

普通模式:从str里找出和reg匹配的第1个子串

全局模式:第n次调用从str里找出和reg匹配的第n个子串

2)reg.test(str) 特别常用,十分重要

判断str里是否包含和reg匹配的子串

7.4字符串支持正则的方法

1)str.replace(reg,"")

将str中和reg匹配的所有子串都替换成目标

2)str.match(reg)

从str中找出和reg匹配的子串

 

3)str.search(reg)

从str中找出和reg匹配的第1个子串的索引

 

8.Function(*)

arguments (*)

eval(*)

一.外部对象介绍

 

二.动态时钟

 

三.发送消息

 

四.DOM

一.图片轮播

 

二.联动菜单

 

三.加入购物车

 

四.加法

一.合计

二.自定义对象

1.如何创建自定义对象

1.1直接量

var student = {"name":"zs","age":23};

{}代表一个对象,内含多组键值对

key一般都是字符串,而value可以是任意类型的数据

采用直接量方式创建的对象也叫JSON对象

1.2构造器(new的函数/首字母大写)

1)内置构造器

特殊: Array,Date,RegExp,Function

通用: Object

2)自定义构造器

声明一个函数,首字母要大写

声明参数,让调用者清楚要传什么参数

让对象记住这些参数

2.总结

无论用哪种方式创建出来的对象都一样,都是Object

若创建的对象给别人用,建议用第3种方式

若创建的对象给自己用,用第1、2种方式都行

若没有函数建议用第1种,否则建议用第2种

三.事件

1.事件概述

1)什么是事件

就是用户的动作,就是js调用的时机

2)事件的分类

鼠标事件

键盘事件

状态事件:某个条件(状态)达成时自动触发

2.事件的定义

1)直接定义事件

在元素上通过事件属性(如onclick)定义事件

优点:很直观

缺点:HTML和js耦合度高

2)后绑定事件(*)

在页面加载后,使用js获取元素并给它绑定事件

优点:HTML和js耦合度低

缺点:不直观

3)取消事件

在事件函数内return false

3.事件对象

1)什么是事件对象

当事件被触发时,有一些信息可以被确定下来

如:左键或右键,点击的位置(坐标),按键

开发项目时可能需要使用这些信息(较少)

浏览器为了方便开发者,将这些信息封装到一个对象里

这个对象叫event,事件对象

2)如何获取事件对象

直接定义事件

在调用函数时直接传入event

在写这个函数时加参数来接收它

后绑定事件

触发事件时浏览器会自动给函数传入event

在写这个函数时加参数来接收它

4.事件处理机制

1)冒泡机制

事件是由内向外传播的

这种规律称之为冒泡机制

2)冒泡机制的作用

可以简化事件的定义

可以在父元素上定义一个事件,接收众多子元素的事件

需要知道事件源

3)事件源

事件发生的具体位置

事件发生的源头

通过事件对象可以获取事件源

 

4)计算器案例