前端-----js

一补充css的层叠性

　　权重:

　　　　行内样式(1000)>内接样式(如link等...)

　　　　id(100)>class(010)>标签(001)

　　　　如果同是继承来的,距目标越近的优先级越高

　　　　继承来的(权重为0)的和直接选中(就是直接精确到某个标签)的优先级没法比.

　　　　权重一样大的,以后设的为优先级最高

　　　　同样是继承来的且描述也一样近,在数权重

　　　　如果选中了标签了,数权重(数选择器的数量)权重越大,优先级越高.

　　　!importa :可以设置选中标签优先级无限大.

二 js(javascript) 初始

　　JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。

　　　1.ECMAScript基础语法:

- js引入方式

　　　　　　　　行内js

　　　　　　　　内接js

　　　　　　　　外接js

- 声明变量

　　　　　　var 就这一个,JavaScript不用关心其他的一些事情（比如内存的释放、指针等），更关心自己的业务　　　

- 测试语句

　　　　　　　　console.log(变量)

　　　　　　　　alert(变量) 这个全写为window.alert(window是全局对象,此处可以省略不写)

　　　　　　　　confirm()

- 数据类型(5个)

　　　　　　　基本数据类型: Number,String,boolean, undefined 未定义 , null.

　　　　　　　引用数据类型:Array,aoject,function,date

　　　　　　　　typeof:查看数据类型

- 运算符

　　　　　　　需要注意是++,出现在变量前先自加1 在赋值

　　　　　　　　　　　　　出现在变量后先赋值,在加1

　　　　　　　== : 比较的是数值

　　　　　　　===:比较的是数之和数据类型

　　　　　　　所有的数据都能转成false:

　　　　　　　　几种可以转为false的类型:null,undefined,0,NaN

　　　　　　　数据类型转换:

　　　　　　　　　　数字转字符串:(三种)

　　　　　　　　　　　　隐式转换(空字符串加数字),强制类型转换(强制类型转String(),变量点toString()),特殊的(两个字符串数字是可以相减的,并且减完是数字类型)

　　　　　　　　　　字符串转数字:(三种)

　　　　　　　　　　　　强转(Number(变量)),parseInt(可以将字符串转为数字,但是只能转字符串开头的数字类型,如果前面没有,也就是说这个字符串没有含数字,则返回NAN,nan也是数字类型;并且它支取整数,不会四舍五入如果是parseIn(1.8+2.2)那么会先计算再取值,如果是parseIn(1.8)+parseIn(1.2)那他会先取值在计算),parseFloat(stringNum);　　　　　　　　　　

- 流程控制

var ji=20;
if(ji>=20){
    console.log('好')
}

　　　　if else

var ji  = 20;
if(ji>=20){
    console.log('恭喜你，吃鸡成功，大吉大利')
}else{
    console.log('很遗憾 下次继续努力')

}

　　　　if else if else

var age = 15;
if (age > 18) {
    console.log('来了老弟！！');
} else if (age < 18 && age > 10) {
    console.log('来了小老弟！！');
}else{


console.log('来了');}

　　　　switch

var gameScore = 'better';

switch(gameScore){

//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，
那么直到该程序遇到下一个break停止
//        一对一只能匹配完全一样的(===)
    case 'good':
    console.log('玩的很好');
    //break表示退出
    break;
    case  'better':
    console.log('玩的老牛逼了');
    break;
    case 'best':
    console.log('恭喜你 吃鸡成功');
    break;
    default:
    console.log('很遗憾');}

　　　　while

　　　　1.初始化循环变量

2.判断循环条件

　　　　3.更新循环变量

var a=1;
while (a<=9){
    console.log(a);
    a+=1;
}

　　　do while

//不管有没有满足while中的条件do里面的代码都会走一次,如果满足了就会遵循while循环走
var i = 3;//初始化循环变量
do{

    console.log(i)
    i++;//更新循环条件

}while (i<10) //判断循环 //

　　for 循环　　

var a=0;
for (var i=1;i<=100;i+=1){
    a+=i;

}
console.log(a);

- 内置对象

例子隐藏块:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="">-->

    <link rel="stylesheet" href="授课/csss.css">
</head>
<body>
<button id="btn" onclick="show()">隐藏</button>
<div id="box" style=""></div>
</body>
<script type="text/javascript" src="授课/jss.js" ></script>
</html>

#box{
    width: 200px;
    height: 200px;
    background-color: red;
}

var b=true;
var a=document.getElementById('box');
var c=document.getElementById('btn');
    function show() {
        if (b) {
            a.style.display = 'none';
            console.log(a.id);
            b=false;
            c.innerText='显示';
        }
        else{
            a.style.display='block';
            console.log(a.id);
            b=true;
            c.innerText='隐藏';
        }
    }

猜你喜欢