day02
js浏览器脚本
- 可以动态操作标签的内容
- 通过用户行为，触发HTML和css 的改变。
js代码写那；
- script标签内
- script标签写在head或者 body 下都行
- 习惯写在body, 外部加载的 js 文件， 写在 head;
- js 是弱类型语言： 定义变量是，不必先定义出 数据类型；
定义变量
-
let 定义临时变量
-
const 定义常量
-
var 已经抛弃（不要在用了)
-
js 代码，每一句的 结尾， 根据最新规则， 不必加分号，如果两句代码写在同一行，还是要加上分号；
let a = 10
var array = []
for( var i = 1; i<= 10; i++)
{
var fun = functio(){
alert(i)
}
array.push(fun);
}
array[1]()
- var 是全局变量，所以最好不要用；
- typeof a ; 看类型
数据类型
-
number 数字类型
-
最新规范 是’’; 字符串 ，但是都行
-
string
-
boolean
-
object
-
undefined 未定义
-
function(){}
-
json 类似 py字典，java的map;（重要）
-
const a = {key: value, key:value, key: value}
-
json中的key 只能是 字符串，不能是别的，v可以是任意的
-
静态的 key,用电， 否则用【】
知识点
- 加括号 是调用函数 返回结果，不加括号表示的 是函数本身；
运算符
-
< =, +,-,& ! |
let a=1
let b=10
console.log(a===b)
// 等于是三个等号
// 不等于是 ！==
// 两个等号 值判断 数值， 三个 等号判断 类型和数值
js 中允许 吧函数作为 参数传递
- () => {} js中的lambda 表达式
增强For， 寻欢 的是下标；
- for(i in array)
{
console.log(array[i])
}
dom 对象
-
document object model 页面 对象模型
-
页面中 每一个 标签 在 js 中 对应一个对象
-
HTML中的 标签 拿到 js 中
-
document 中 的根节点 是 dom最大 的对象, 获取任何 一个 dom 都要通过 document对 象
-
documnet.getElementById 弃用
-
现在用 document.querySelector(传选择器) 获取第一个
-
document.querySelectorAll(传选择器) 获取全部
事件
- 通过用户行为来触发函数 的一种机制
- 设置 在dom 对象 上， 事件 对应 着 一个 函数
- onclick 点击 事件
- 取消 事件 ab.οnclick= null
鼠标事件
-
onmousedown 鼠标按下
-
点击事件 是按下并取消， 按下就是 按下
-
onmouseup 鼠标抬起触发
-
任何 按键抬起 都会触发 ，无论 鼠标在哪按下， 只要在界面上 抬起 就可以了
-
点击事件 只有左键按下 并 抬起时候 触发，并且必须在 该元素上 按下抬起 才会触发
-
onmousemove 鼠标移动 事件
-
- 对应下
-
onmouseleave 鼠标离开事件 离开块就触发一次 如果移动到子元素上，不算离开。
-
onmouseenter 鼠标移入事件 从子元素上过来不算移入，从子元素移入进来 就不算 移入
-
- 对应上
-
onmouseout 鼠标离开事件 移动到子元素 上， 也算离开；
-
onmouseover 鼠标移入事件 如果从子元素 上移入，也算移入
所有鼠标事件 都有一个 内置参数， 我们叫做句柄
- which:1 左键 2 滚轮 3 右键
- target: 获取到你点击的元素
- screenx: 相对于屏幕的 左边
- clienty ： 相对于浏览器下边缘；导航栏下面的顶点
键盘事件
-
onkeydown 表示的是键盘按下
-
onkeyup 表示 的是键盘 抬起
-
onkeypress 键盘按下
-
区别
-
keydown 是 按下任何按键都 触发（能不能产生字符）
-
keypress 不能 ctrl,shift不能触发，并且必须有字母菜 触发
-
onblur 失去焦点
-
onchange 失去焦点的同时 并且发生改变
-
onfocus 获取焦点
也有内置参数
- 类似鼠标事件
jQuery
- jQuery 是 js 的一个 框架
- 作用; 更方便快捷 操作 dom 元素
- 如果使用： 第一步，先引入jquery;
<script> src =""; </scritp>
-
第二步： 在js中 先测试入口 函数；
-
jquery 中 有一个 万能函数， $();
-
$(function) 入口函数
-
类似 javase 中的 main 方法
-
入口函数作用：等待所有的 标签 加载 完成 后 执行
-
$(选择器) {获取 jQuery dom 注意； jQuery和 js 的 dom 是不一样 的}
-
jquery 的方法 只能 支持 jquery dom
-
jquery dom => js dom dquerydom[0]
-
js dom=> jquery dom $(js dom)
s设置事件
-
jquery dom. 事件名（function(){});
-
注意和 js dom 的区别
-
js 事件吧 On 去掉 = jquery 事件
-
event.pageX || event.clientX;
-
没有pageX 的话 去取 clientX
jquery 方法
- offset() 获取边距
- $(’#a’).offset().left; offset().top
- $(’#a’).css(json{
k:v,
k: v…
})
day02下
轮播
-
淡入和 淡出
-
淡入： 慢慢显示出来
-
有图： 图要一样大；
-
加载背景图：url();
-
如果标签过小，那么会显示不全
-
标签过大： 那么会平铺
-
repeat-x, repeat-y; background-style：no-repeat;
-
bgckground-size: 设置背景图大小
-
该属性必须先加载背静图，在对背景图进行大小设置；顺序很重要；
-
图片标签： img
-
alt;如果图片不能正常加载，那么显示改文字， src; 图片的路径；
-
如果不设置宽度和高度，那么加载的图片默认 和原来的 一样；
-
如果设置 了高度和宽度，那么图片 的 不能显示完全，会等比例的 缩放 进行完全 显示；
-
background-size: 120px 120px; 全部显示
-
2:00- 2:10; 睡着
-
创建虚拟 dom, 并不在 HTML标签中
-
$(标签) ；ex: const div = $(
) -
只要把虚拟dom 加载进入实体，就可以存在 ex: $(’#wrap’).append(div)
透明度；
- 0到1 之间的数值； 0表示 的是全 透，1 表示的是不透
- border-radius: 圆角，数值 是 圆角半径
- 半径 是 边长 的1/2；
伪类hover
-
表示 鼠标 移上 之后 的样式
-
this 表示你点 的那个li ,就是 那个dom 对象
-
jQuery的当前的 dom 对象 $(this).index();//表示获取当前 对象 ，在同级元素中排在 第几个;（0）开始
-
const index = $(this).index()
-
点击的是第几个 li,那么就显示第几个 div 背景
-
$(‘wrap>div’).eq(index).fadeIn(2000).siblings(‘div’).fadeOunt(2000);
旋转
-
2d 旋转
-
transform: 转换
-
transform: rotate(角度： deg)
-
transform: rotate(2deg);
-
缩放：
-
transform: scale(0-1);
-
阴影：
-
box-shadow: 右阴影 下阴影 锐化 阴影色
setTimeOut(函数，延迟时间)
day03
实现 3d 样式的 两个条件
-
在实现3d效果的 标签上架 transform-style: preserve-3d;
-
在实现 3d 效果的 标签 的父元素 上 架一个 镜头 的距离, perspective: 800-1200
-
transform: rotateX
-
translateX, translateXZ…平移 ，他不能超过 镜头距离perspective 的数值
-
了解 旋转后 坐标轴 跟着 旋转了， 就是注意 ratateX 和left 的区别，就是坐标系不一样了
-
transform-origin: 0px 0px 0px ; 确定旋转点
-
线性渐变： background: linear-gradient(0deg , pink , yellow); 颜色以 pink色开始，以黄色结束， 从下往上，其中颜色可以写多个；linear-gradient(0deg, yellow,blue,pink)
-
径向 渐变：确定一个点，逐渐 向外变化，
-
bgc:-webkit-radial-gradient(120px 120px , 100px 100px , red, blue);
-
setTimeOut(function t(){} time);
-
倒影： -webkit-box-reflect: above; below; // 5px; 倒影和原图之间的距离
-
托盘： div
-
半透明：opacity:0.5
day03下午
动画样式
-
要是实现动画，需要两步：
-
1 定义动画
-
@keyframes 动画名 {
0%{样式
left: 0;
}
50%{}
100%{
left: 0;
}
} -
动画是css3 的样式，可能 存在 浏览器不兼容 的问题；
-
所以需要添加内核
-
@-webkit-keyframes donghua{
0% { }
100%{ }
} -
moz
-
o
-
- 执行动画
-
在选择器 animation: 动画过度时间 ex: animation: donghua 1s 延迟时间 执行次数
-
默认情况下动画 执行完 就停止了， 样式回归到原来的 状态
-
速度曲线： ease 默认（开始慢，逐渐变快，在变慢）；
-
ease-in 慢-》快
-
ease-out 快-》慢
-
ease-in-out
-
linear 匀速
-
延迟时间
-
一定时间后 在执行 动画
-
执行次数
-
infinate
-
偶数次是否反向
-
默认： normal
-
alternate 反向
-
停留位置
-
none 默认 动画结束后 停留在无动画状态
-
forwards 动画结束后停留在 最后一帧
螺旋矩阵
- append 和 appendTo 反过来
- cursor: poninter;
java日历
-
const d = new Date();
-
d.getYear(); 获取1900到现在的时间差
-
d.getFullYear();
-
d.getMonth(); 0到11 ，不是1到12；
-
d.getDay(); 获取星期数 0-6 周日是0
-
d.getDate();获取当前日期，从1 开始
-
d.getHours()
-
d.getMinutes();
-
d.getDeconds();
-
d.getMillisecods(); 获取毫秒数 0到999
-
边框合并
-
border-collapse: collapse;