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 src="./js/014引入方式.js"></script> # 通过script标签引入
<div class="box" onclick="alert('哈哈');" >我是一个div</div> # 写到标签里的js 依赖于事件 不推荐

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]