一.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官方手册
三.行高
四.定位
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)计算器案例
2392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
