一、选择器的优先级
1.选择器的优先级
权重值越大优先级越高。（无论权重是多少，内联样式表的优先级都是最高的）
元素选择器、* 权重值是：1
类选择器权重值是：2
id选择器权重值是：4
群组选择器：看每个独立的选择器的权重值分别是多少
后代、子代选择器：所有被>或者空格隔开的选择器的权重之和
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><p ><p ><p >我是段落1</p></p></p><style type="text/css">/* 单个选择器的优先级 */#p1{color: blue;}.c3{color: green;}p{color: red;}#p1{background-color: yellow;}p #p1{background-color: aquamarine;}/*后代选择器比较权重的时候：先比第一大的独立选择器谁大谁优先级高，如果第一大相同，就比第二天的选择器，以此类推...*/.c2>#p1{border-top: 2px solid red;}body>#p1>p>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 >我是段落1</p><img 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 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,b3 console.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)
微信便捷交流