爱站程序员基地一、选择器的优先级
1.选择器的优先级
权重值越大优先级越高。（无论权重是多少，内联样式表的优先级都是最高的）
元素选择器、* 权重值是：1
类选择器权重值是：2
id选择器权重值是：4
群组选择器：看每个独立的选择器的权重值分别是多少
后代、子代选择器：所有被>或者空格隔开的选择器的权重之和
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><div id=\"div1\" class=\"c1\"><div id=\"div2\" class=\"c2\"><p id=\"p1\" class=\"c3\" style=\"color: deeppink;\">我是段落1</p></div></div><style type=\"text/css\">/* 单个选择器的优先级 */#p1{color: blue;}.c3{color: green;}p{color: red;}#p1{background-color: yellow;}div #p1{background-color: aquamarine;}/*后代选择器比较权重的时候：先比第一大的独立选择器谁大谁优先级高，如果第一大相同，就比第二天的选择器，以此类推...*/.c2>#p1{border-top: 2px solid red;}body>#div1>div>p{border-top: 5px dotted blue;}</style></body></html>
二、认识JS
1.什么是js
js是JavaScript的缩写，是一门专门用来控制前端页面的编程语言（属于脚本语言）
js是web标准中的行为标准 – 主要负责网页中内容的修改
2.js代码写在哪儿
内联js – 将js代码写标签的事件属性中
内部js – 将js代码写在script标签
外部js – 将js代码写在js文件中，然后在html中用script标签导入
注意：同一个script标签只能在导入外部js和写内部js两个功能中选一个
3.js能干什么
a.修改/获取标签内容
b.修改/获取标签属性
c.修改标签样式
d.在网页中插入html代码
4.js怎么写（语法）
大小写敏感
一行语句结束一般不需要分号, 箭头函数之前需要加分号
命名采用驼峰式命名
js中的标识符：由字母、数字、下划线和$组成，数字不能开头
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><!-- ===============js写在哪儿================ --><!-- 内联js --><!-- <button οnclick=\"alert(\'你好,js!\')\" type=\"button\">按钮1</button> --><!-- 内部js --><!-- <script type=\"text/javascript\">// 这儿可以写js代码alert(\'这是内部js\')</script> --><!-- 外部js --><!-- <script src=\"./js/02-认识js.js\" type=\"text/javascript\" charset=\"utf-8\"></script> --><!-- ================js能干什么================ --><p id=\"p1\">我是段落1</p><img id=\"img1\" src=\"img/bear.png\" ><br><br><!-- 修改内容 --><button type=\"button\" onclick=\"document.getElementById(\'p1\').innerText = \'hello js!\'\">修改内容</button><button type=\"button\" onclick=\"document.getElementById(\'img1\').src = \'img/hat1.png\'\">修改图片</button><button type=\"button\" onclick=\"document.getElementById(\'p1\').style.color=\'red\'\">修改颜色</button><script type=\"text/javascript\">// for(i=0;i<10;i++){// document.write(\'<a class=\"c1\" href=\"\">我是超链接</a>\')// }names = [\'张国荣\', \'王祖贤\', \'张曼玉\', \'周润发\', \'刘德华\']for(x in names){document.write(\'<p>\'+names[x]+\'</p>\')}</script></body></html>
三、变量
1.定义变量
1)语法：
变量名 = 值
var 变量名 = 值
let 变量名 = 值
const 变量名 = 值
1）四种定义变量的方法
studentName = \'小明\'console.log(studentName)var age = 18console.log(age)let sex = \'男\'console.log(sex)const height = 180console.log(height)
2）四种方法的区别
a.前三种方式定义的变量，变量的值可以修改；用const定义的变量的值不能修改
studentName = \'张三\'age = 20sex = \'女\'console.log(studentName, age, sex)// height = 190 //报错，因为const定义的变量中的数据不能修改
b.不同的作用域
a. 变量名 = 值 – 这儿的变量是全局变量(不管在哪儿定义)
b. var 变量名 = 值 – 在函数中定义是局部变量，没有定义在函数中就是全局
c. let 变量名 = 值 – 在{}中定义的是局部变量，没有定义在{}中的是全局的
num = 100 // num是全局的var x = \'hello\' // x是全局的let a = 11{num2 = 200var x2 = \'you\'let a2 = 22}function func1(){num3 = 300var x3 = \'are\'let a3 = 33console.log(\'函数中:\', num, x, a, num2, x2)}func1()console.log(num, num2, num3)console.log(x, x2)console.log(a)// console.log(a2)// console.log(a3)if(age>=18){let school = \'清华大学\'console.log(\'if里面:\',school)}// console.log(school)
2.同时定义多个变量
变量名1=变量名2=变量名3=… = 值
a=b=c=100console.log(a,b,c)// var/let/const 变量1,变量2,变量3,...var a1,b1,c1 = 20console.log(a1, b1, c1) // undefined undefined 20var b1,b2,b3console.log(b1, b2, b3) // undefined undefined undefinedvar c1=100, c2=200, c3=300console.log(c1, c2, c3)
四、运算符
1.数学运算：+、-、*、/、%、++、–
console.log(10+20)console.log(10-20)console.log(10*20)console.log(5/2)console.log(9%2)
++(自增1)、–(自减1)
变量++、++变量
age = 18age++ //age = age+1console.log(age) //19++ageconsole.log(age) //20age--console.log(age) //19--ageconsole.log(age) //18
增操作，++/–放在前面和后面的时候的不同
num = 10num2 = ++num // num+=1; num2=numconsole.log(num2) //11num = 10num2 = num++ //num2 = num; num+=1console.log(num2) //10a = 10result = 12 + a++ - --a + ++aconsole.log(result) //23
2.比较运算运算符：>、<、>=、<=、、!=、=、!==
结果都是布尔值
console.log(10 > 20) // falseconsole.log(5 == \'5\') // trueconsole.log(5 == 5) // trueconsole.log(5 === \'5\') //falseconsole.log(5 === 5) // true// 注意: js中的比较运算符，不支持连写表示范围age = 30// console.log(18<=age<=28) // true
3.逻辑运算符: &&(逻辑与运算)、||(逻辑或运算)、!(逻辑非运算)
console.log(true && true)console.log(true && false)console.log(false && true)console.log(false && false)console.log(true || true)console.log(true || false)console.log(false || true)console.log(false || false)console.log(!true)num = 18console.log(num%3==0 && num%7==0)
4.赋值运算符: =、+=、-=、*=、/=、%=
运算规则和python一样
num = 100num += 10 // num = num+10num -= 20
5.三目运算符：?:
表达式?值1:值2 – 判断表达式的结果是否为true，如果是，整个运算表达式的结果是值1否则是值2
age = 18result = age>=18?\'成年\':\'未成年\'console.log(result)num = 10result = num%3?\'不是3的倍数\':\'3的倍数\'console.log(result)
五、分支结构
-
if分支结构
if(条件语句){
代码块
}if(条件语句){
满足条件要执行的代码块
}else{
条件不满足要执行的代码块
}if(条件语句1){
代码块1
}else if(条件语句2){
代码块2
}else if(条件语句3){
代码块3
}
…
else{
代码块N
}执行过程和应用和python一样
age = 19if(age>=18){console.log(\'成年\')}else{console.log(\'未成年\')}
语法：
switch(表达式){
case 值1:{
代码块1
}
case 值2:{
代码块2
}
case 值3:{
代码块3
}
…
defualt:{
代码块N
}
}
2.switch
说明：
- switch和case、defualt是关键字
- case语句后面的{}可以省略
- 表达式可以是任何有结果的表达式
- 值也必须是有结果的表达式，通常会直接写一个固定的数据
执行过程：
先计算表达式的值，然后让表达式的值依次和每个case后面的值进行比较，哪个case后面的值和表达式的值相等，
就将这个case作为入口，依次执行和这个case以及它后面所有的代码块，直接执行完或者遇到break就结束。
如果没有哪个case后面的值和表达式的值相等，就将defualt作为入口（注意：defualt不是一定要放在最后）
switch(0){case 0:console.log(\'表达式1\')breakcase 1:console.log(\'表达式2\')case 2:console.log(\'表达式3\')breakdefault:console.log(\'表达式6\')case 3:console.log(\'表达式4\')case 4:console.log(\'表达式5\')}
练习：根据成绩打印等级：A-B-C-D
90-100(A) 80-89(B) 60-79© 60分以下(D)
parseInt(数据) – 将数据转换成整数
score = 89switch(parseInt(score/10)){case 10:case 9:console.log(\'A\')breakcase 8:console.log(\'B\')breakcase 7:case 6:console.log(\'C\')breakdefault:console.log(\'D\')break}
六、循环结构
1.while循环
1）while
while(条件语句){
循环体
}
2) do-while(保证循环至少执行一次)do{循环体}while(条件语句)2.for循环1) for-infor(变量 in 序列){循环体}注意：变量取的不是元素而是下标或者key2) 标准forfor(表达式1;表达式2;表达式3){循环体}表达式1while(表达式2){循环体表达式3}执行过程: 先执行表达式1, 然后判断表达式2的结果是否为true，如果为true是执行循环体，执行完循环体再执行表达式3；再判断表达式2是否为true,为true又执行循环体，执行完循环体再执行表达式3;以此类推，如果表达式2的结果是false整个循环就结束
names = [\'张三\', \'老王\', \'李四\', \'小明\']for(x in names){console.log(\'x:\', x, names[x])}stu1 = {\'name\':\'余婷\', \'age\': 18, \'face\': 100}for(x in stu1){console.log(\'x:\', x, stu1[x])}// js控制循环执行100次for(let i=0;i<100;i++){console.log(i, \'==========\')}// js控制循环产生100~999的数字序列for(let i=100;i<1000;i++){console.log(\'i:\', i)}// 产生0~100中所有的偶数for(let i=0;i<=100;i+=2){console.log(\'偶数i:\', i)}// 产生50~1的数字序列for(let i=50; i>=1;i--){console.log(\'倒数i:\', i)}
3.continue和break – 和python一样
七、函数
1.函数的定义
function 函数名(参数列表){
函数体
}
注意：js中每个函数中都有一个局部变量arguments,用来接收这个函数在调用的时候传的所有的实参
function sum(num1, num2){return num1+num2}function func1(a, b=10, c=20){// console.log(\'a:\', a, \'b:\', b, \'c:\', c)console.log(`a:${a} b:${b} c:${c}`)}// 有默认值的参数可以放在没有默认值参数的前面function func2(a=10, b, c=20){console.log(`a:${a} b:${b} c:${c}`)}
2.函数的调用
函数名(实参列表)
console.log(sum(10, 30))func1(40)func2(1,2,3)// 注意: js中使用关键字参数传参无效, 只能使用位置参数func1(c=300,a=200,b=100) // a:300 b:200 c:100// 调用函数的如果不给没有默认值的参数传参，不会报错，这个参数的值会是undefinedfunc1() // a:undefined b:10 c:20func1(1,2,3,4,5,6,7,8) // a:1 b:2 c:3
3.arguments
js中每个函数中都有一个局部变量arguments,用来接收这个函数在调用的时候传的所有的实参
function func3(){console.log(arguments)}func3()func3(10)func3(10,20)func3(\'name\', \'age\', 30)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(1, 4, 9, 19, 80)
4.匿名函数
函数名 = function (参数列表){
函数体
}
函数名 = lambda 参数列表: 返回值
sum2 = function(x,y){console.log(x+y)return x+y}sum2(12.5, 10)
5.箭头函数
(参数列表)=>{函数体}
sum3 = (x,y)=>{console.log(`x+y: ${x+y}`)return x+y}sum3(100, 200)// name = \'小明\'// python: f\'你的名字是:{name}\'// js: `你的名字是:${name}`nums = [19, 89, 78, 65, 12]nums.sort(function(item1, item2){return item1-item2})console.log(nums) // [12, 19, 65, 78, 89]nums = [19, 89, 78, 65, 12]nums.sort(function(item1, item2){return item2-item1})console.log(nums) // [89, 78, 65, 19, 12]nums = [19, 89, 78, 65, 12]nums.sort(function(item1, item2){return item2%10-item1%10})console.log(nums) // [19, 89, 78, 65, 12]// 正则re = /^\\d{3}$/result = re.test(\'789asdf\')console.log(result)
