day20-js基础
一 选择器的优先级
权重值越大优先级越高。（无论权重是多少，内联样式表的优先级是最高的）
- 元素选择器、* 权重值是：1
- 类选择器的权重值是：2
- id选择器的权重值是：4
- 群组选择器：看每个独立选择器的权重值分别是多少
- 后代选择器和子代选择器：所有被>或者空格隔开的选择器的权重之和
- 后代选择器比较权重的时候，先比较比较第一大的独立选择器的权重，谁的权重大谁的优先级就高，如果第一大相同，就比较第二大的，以此类推。
二 认识js
2.1.什么是js
js是JavaScript的缩写，是一门专门用来控制前端页面的编程语言（属于脚本语言）
js是web中的行为标准 - 主要负责网页中内容的修改
2.2.js代码写到哪儿
①内联js - 将js代码写在标签的时间属性中
<button type="button" onclick="alert('你好阿菜!')">按钮1</button>
②内部js - 将js代码写在script标签中
<script type="text/javascript">
// js代码
alert('这是内部js')
</script>
③外部js - 将js代码写在js文件中，用script标签导入
<script src="js/02-认识js.js" type="text/javascript" charset="utf-8"></script>
注意：同一个script标签只能在导入外部js和内部js两个功能中选一个
2.3.js能干什么
①修改/获取标签内容
②修改/获取标签属性
③修改标签样式
④在网页中插入html代码
2.4.js怎么写（语法）
大小写敏感
一行语句结束一般不需要分号，箭头函数之前需要加分号
命名采用驼峰式命名
js中的标识符：由字母、数字、下划线和$组成，数字不能开头
三 变量
3.1 定义变量
语法：
变量 = 值
var 变量名 = 值
let 变量名 = 值
const 变量名 = 值
- 四种定义变量的方法
StudentName = '阿康'
console.log(StudentName)
var age = 18
console.log(age)
let sex = '男'
console.log(sex)
const height = 180
console.log(height)
- 四种方法的区别
a.前三种方式定义的变量，变量的值可以修改；用const定义的变量的值不可以修改
b.不同的作用域
①变量名 = 值 - 这儿的变量是全局变量(不管在哪儿定义都是全局变量)
②var 变量名 = 值 - 在函数中定义是局部变量，没有定义在函数中就是全局变量
③let 变量名 = 值 - 在{}中定义的是局部变量，没有定义在{}中的是全局的。
num = 100
var x = 'hello'
let a = 11
{
num2 = 200
var x2 = 'are'
let a2 = 22
}
function func1(){
num3 = 300
}
3.2 同时定义多个变量
变量名1=变量名2=变量名3=…=值
var a1,b1,c1=20
console.log(c1)
四 运算符
4.1 数学运算符：+、-、*、/、%、++（自增1）、–（自减1）
++/–放在前面后面和时候的不同
num = 10
num2 = ++ num //num2 = 11
num = 10
num2 = num ++ //num2 = 10
4.2 比较运算符：>、<、>=、<=、、!=、=、!==
结果都是布尔
console.log(10>20) //false
console.log(5 == '5') //true
console.log(5 == 5 ) //true
console.log(5 === '5') //false
console.log(5 === 5 ) //true
注意：js中的比较运算符，不支持连写表示范围
age = 30
console.log(18<=age<=28) //true
4.3 逻辑运算符：&&（逻辑与运算）、||（逻辑或运算）、!（逻辑非运算）
4.4 赋值运算符：=、+=、-=、*=、/=、%=
五 分支结构
5.1 if分支结构
语法：
if(条件语句){
代码块
}
if(条件语句){
条件满足执行的代码
}
else{
条件不满足需要执行的代码块
}
if(条件语句1){
代码块1
}else if()条件语句2{
代码块2
}else if(条件语句3){
代码块3
}
…
else{
代码块N
}
age = 19
if(age>=18){
console.log('成年')
}else if(age<=0 || age>=150){
console.log('你是魔鬼')
}else{
console.log('未成年')
}
5.2 switch
语法：
switch(表达式){
case 值1:{
表达式1
}
case 值2:{
表达式2
}
…
defalt:{
表达式N
}
}
说明：
- switch和case、defualt是关键字
- case语句后面的{}可以省略
- 表达式可以是任何有结果的表达式
- 值也必须时有结果的表达式，通常直接写一个固定的数据。
执行过程：
先计算表达式的值，然后让表达式的值依次和每个case后面的值进行比较，哪个case后面的值和表达式的值相等，就将这个case作为入口，依次执行这个case以及它后面的代码块，直接执行完或者遇到break就结束。如果没有哪个case后面的值和表达式的值相等，就将defalt作为入口（注意：defualt不是一定要放到最后）
switch(10){
default:{
console.log('表达式6')
}
case 0:{
console.log('表达式1')
}
case 1:{
console.log('表达式2')
}
case 2:{
console.log('表达式3')
}
case 3:{
console.log('表达式4')
}
case 4:{
console.log('表达式5')
}
}
5.3 三目运算符
表达式?值1:值2 - 判断表达式的值是否为true，如果是true，整个表达式的结果是值1，否则是值2。
六 循环结构
6.1 while循环
①while
while(条件语句){
循环体
}
②do-while（保证循环至少执行一次）
do{
循环体
}while(条件语句)
6.2 for循环
①for-in
for(变量 in 序列){
循环体
}
说明：
a.序列是字符串或者数组，变量取的是下标
b.序列是对象，变量qu的是属性名（相当于字典的key）
②标准for
for(表达式1;表达式2;表达式3){
循环体
}
执行过程：先执行表达式1，然后判断表达式2的结果是否为true，如果为true就执行循环体，执行完循环体就执行表达式3，再判断表达式2是否为true，为true就执行循环体，执行完循环体就执行表达式3…以此类推，直到表达式2的结果为false，整个循环结束。
names = ['张三','李四','阿康']
for(x in names){
console.log('x',x,names[x])
}
七 函数
7.1 函数的定义
function 函数命(参数列表){
函数体
}
注意：js中每个函数中都有一个变量arguments，用来接收这个函数在调用的时候传的所有的实参。
function sum(num1,num2){
return num1+num2
}
function func1(a=90,b,c=20){
console.log(`a:${a} b:${b} c:${c}`)
}
7.2 函数的调用
函数命(实参列表)
console.log(sum(1,2))
func1(40)
有默认值的参数可以放在没有默认值的前面。
注意：js中使用关键字传参无效，只能使用位置参数传参。
调用函数如果不给没有默认值的参数传参，不会报错，这个参数的值会是undefined
7.3 arguments
js中每个函数中都有一个变量arguments，用来接收这个函数在调用的时候传的所有的实参。
function func3(){
console.log(arguments)
}
func3()
func3(10)
func3(10,20)
func3('name','age',20)
console.log('===========================')
function func4(x){
console.log('x',x)
console.log(arguments)
for(i in arguments){
console.log('i',i,arguments[i])
}
}
func4()
func4(100,200)
func4('name','阿康','age',18)
7.4 匿名函数
函数命 = function (参数列表){
函数体
}
sum1 = function (x,y){
console.log(x+y)
return x+y
}
sum1(10,20)
7.5 箭头函数
语法:
(参数列表)=>{函数体}
sum2 = (x,y)=>{
console.log(`x+y:${x+y}`)
return x+y
}
sum2(100,200)