day06-js入门
1、nth选择器1
.list li:nth-child(2){} /* 1符合指定的元素li 2符合指定的序号2 两个条件必须同时满足 */
.list li:first-child{} /* 相当于 .list li:nth-child(1) */
.list li:last-child{} /* 最后一个 */
2、nth选择器2
.list li:nth-of-type(1){} / 选中所有指定的类型li 再找到对应的序号1 /
.list li:first-of-type{} /* .list li:nth-of-type(1) */
.list li:last-of-type{} /* 最后一个 */
3、按级别选中
.con>a {} /* 选中第一层子级 */
.con a {} /* 选中所有子集 */
.con+a {} /* 同级后面第一个 */
.con~a {} /* 同级后面所有的 */
4、属性选择器（有点类似于通配符）
.con div[class]{} /选中了所有设置了class属性的div/
.con div[class=”haha”] {} /class等于haha的/
.con div[class ^=”haha”] {} /haha开头的/
.con div[class$=”haha”]{} /haha结尾/
.con div[class*=”haha”]{} /有haha/
.con div[class|=”haha”]{} /* 等于haha 或者 以haha- 开头的 */
5、transition属性 转换(变换)
transition-property 设置过渡效果的 CSS 属性的名称。width height bgco
transition-duration 完成过渡效果需要多少秒或毫秒 s ms
transition-timing-function 速度曲线 linear ease
transition-delay 过渡效果延时多久开始
.con1 {
transition: width 2s ease,height 1s ease;
transition: all 2s ease; /*参1 改变的属性 参2改变 的时间 参3 运动曲线 参4延迟到的时间*/
}
.con1:hover{
width: 600px;
height: 300px;
}6、transform
translate(x,y) 设置盒子位移
scale(x,y) 设置盒子缩放
rotate(deg) 设置盒子旋转
skew(x-angle,y-angle) 设置盒子斜切
perspective 设置透视距离
transform-style flat | preserve-3d 设置盒子是否按3d空间显示
translateX、translaeY、tratnslateZ 设置三维移动
rotateX、rotateY、rotateZ 设置三维旋转 deg
scaleX、scaleY、scaleZ 设置三维缩放
多个属性 空格隔开 比如 transform: skew(0deg,0deg) scale(1,1);
tranform-origin 设置变形的中心点
backface-visibility 设置盒子背面是否可见 hidden visible
.con1 {
transition: all 2s ease; /*参1 改变的属性 参2改变 的时间 参3 运动曲线 参4延迟到的时间*/
transform: translate(0px,0px);
transform-origin: 0px 0px;
transform:perspective(800px) scaleZ(1); /*设置多个属性用空格隔开*/
transform-style: preserve-3d; /*3d效果*/
backface-visibility: hidden;/*背面隐藏*/
}
.con1:hover{
transform: translate(100px,50px);
}7、animation 动画
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。 linear ease
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。n 或者 infinite
animation-direction 规定是否应该轮流反向播放动画。 normal 或者 alternate
.box {
animation: move 2s ease 2 alternate;/* 参1 动画名字 参2 动画时间 参3 动画曲线 参4 延时时间 参5 执行次数 大于0的数或者是infinite 参6 反向执行*/
/*alternate 反向执行 会占用动画次数*/
}
@keyframes move {
/*from{
width: 30px;
top: 0;
background-color: gold;
}
to{
width: 300px;
top: 300px;
background-color: #987643
}*/
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}8、js的引入方式
# 通过script标签引入
9、定义变量
//var是定义变量的关键字
var name = “xiaoming”; //字符串
var age = 18;//数字
var num = 3.5;//数字
var isGood = false;//布尔类型
10、变量命名
var a = 3;// 区分大小写 下面是两个变量
var A = 3;
va r iNum = 18; //匈牙利命名法
11、获取页面标签
window.onload = function () {} // 当文档加载完毕 然后就执行{}里面的代码
var oDiv1 = document.getElementById(“div1”); // 通过id获取div对象 [object HTMLDivElement]
var oDiv2 = document.getElementsByName(“haha”);// 是类似于数组的一个对象[object NodeList]
alert(oDiv2.length); // 获取长度
lert(oDiv1.item(0));//通过下标索引取出一个对象
alert(oDiv1[1]); //[object HTMLParagraphElement] 是个p元素
var oDiv1 = document.getElementsByTagName(“div”);//可以认为是类似于数组的一个对象[object HTMLCollection]
alert(oDiv1.length); //获取对象的个数
alert(oDiv1.item(0)); // 根据脚标获取具体的对象
alert(oDiv1[1]); //[object HTMLDivElement]