前四天笔记在此连接:
web前端笔记+表单练习题+五彩导航栏练习题-CSDN博客
https://blog.csdn.net/simply_happy/article/details/136917265?spm=1001.2014.3001.5502
# 1.边框弧度
div {
width: 300px;
height: 50px;
background-color: aqua;
/* border-radius: 20px; */
/* 左上 右上+左下 右下 */
/* border-radius: 10px 20px 30px 40px; */
/* 胶囊形状：盒子高度的一半 */
border-radius: 25px;
border-top-right-radius: 70px;
}
## 2.盒子阴影
div {
width: 100px;
height: 100px;
background-color: pink;
/* x轴的偏移量 y轴的偏移量必须写 */
/* x轴的偏移量 y轴的偏移量 模糊的半径 扩散的半径 颜色 */
box-shadow: 5px 2px 10px 10px black inset;
}
## 3.文字阴影
p {
text-shadow: 5px 5px 3px pink;
}
## 4.列表属性
li {
width: 200px;
height: 200px;
background-color: aqua;
list-style: none;
list-style-type: none;
}
## 5.resize
textarea {
width: 500px;
height: 60px;
resize: none;
}
**<textarea name="" id="" cols="30" rows="10"**>
***rows 和* cols *属性，用于声明 <textarea> 的精确尺寸***
## 6.浮动
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
/*
顶部是对齐的
脱离标准流
*/
.out {
width: 800px;
height: 400px;
background-color: brown;
}
.box2 {
width: 300px;
height: 300px;
background-color: pink;
float: right;
}
**float *CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。***
## 7.浮动的问题
**元素高度塌陷、文字环绕不正常等。以下是一些解决浮动问题的方法：**
.father {
width: 700px;
/* 1.给父盒子高度 */
/* height: 400px; */
/* float: left; */
background-color: aqua;
}
.left {
width: 300px;
height: 300px;
background-color: blue;
float: left;
}
/* p {
/* 清除浮动的影响 */
/* clear: both; */(**清除两边浮动**)
/* } */
/* p::before {
display: block;
content: "";
clear: both;
} */
.father::after {
content: "";
display: block;
clear: both;
}
## 8.flex布局
\* {
padding: 0;
margin: 0;
}
ul {
/* 此时ul就会变成一个弹性容器 li就是弹性盒子 。子项会默认在一行排列
主轴：默认在水平方向
测轴：默认在垂直方向
子元素可以自动挤压和延伸
*/
display: flex;
width: 600px;
height: 300px;
background-color: aqua;
margin: 0 auto;
}
li {
list-style: none;
width: 100px;
height: 200px;
background-color: aquamarine;
}
## 9.主轴上的对齐方式
\* {
margin: 0;
padding: 0;
}
ul {
display: flex;
width: 600px;
height: 300px;
background-color: aqua;
margin: 0 auto;
/*改变主轴对齐方式 */
justify-content: flex-end;
/* 两边贴边，其余平分 */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: center;
}
li {
list-style: none;
width: 100px;
height: 200px;
background-color: aquamarine;
}
## 10.侧轴的对齐方式
\* {
margin: 0;
padding: 0;
}
ul {
display: flex;
width: 600px;
height: 300px;
background-color: aqua;
margin: 0 auto;
/* 侧轴 */
align-items: center;
align-items: end;
align-items: start;
}
ul li:nth-child(3) {
align-self: center;
}
li {
list-style: none;
width: 100px;
height: 200px;
background-color: aquamarine;
}
## 11.修改主轴方向
\* {
margin: 0;
padding: 0;
}
ul {
display: flex;
width: 600px;
height: 300px;
background-color: aqua;
margin: 0 auto;
/* 主轴方向改为垂直方向，从上到下 */
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;
}
li {
list-style: none;
width: 100px;
height: 200px;
background-color: aquamarine;
}
## 12.弹性伸缩比
\* {
margin: 0;
padding: 0;
}
ul {
display: flex;
width: 700px;
height: 400px;
background-color: rgb(51, 59, 59);
}
li {
list-style: none;
height: 40px;
background-color: aqua;
}
ul li:first-child {
flex: 1;
/* 整数：占用父级剩余尺寸的分数 */
}
ul li:nth-child(2) {
flex: 1;
}
ul li:last-child {
flex: 1;
}
## 13.换行
\* {
margin: 0;
padding: 0;
}
ul {
display: flex;
width: 800px;
height: 400px;
background-color: aqua;
/* flex-wrap: wrap; */
justify-content: space-between;
align-content: space-evenly;
}
li {
list-style: none;
width: 170px;
height: 100px;
background-color: pink;
}
## 14.grid
.box {
display: grid;
width: 500px;
height: 900px;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: repeat(4, 100px);
/* 单元格之间的间距 */
grid-gap: 20px;
}
.box div {
border: 1px solid pink;
}
.test {
grid-column-start: 1;
grid-column-end: 3;
/* grid-row-start: 2;
grid-row-end: 4; */
grid-row: 2/5;
}
## 1.透明度
div{
width: 300px;
height: 200px;
background-color: black;
/**0-1 越靠近0越透明*/
opacity: 0;
}
## 2.元素的显示与隐藏
div{
/*opacity: 0*在页面仍存在*/
display: none;/*在页面中不在占有位置*/
visibility: hidden;/*在页面中仍然占有位置*/
visibility: visible;
width: 300px;
height: 300px;
background-color: black;
}
## 3.光标的样式
a{
/* 工 */
cursor: text;
/* 手 */
cursor: pointer;
/* 十字 */
cursor: move;
/* 箭头 */
cursor: default;
}
p{
cursor: pointer;
}
## 4.轮廓的样式
input{
/* outline-width: 100px;
outline-color: aqua;
outline-style: solid; */
outline: none;
}
/* 标签获取焦点的状态 */
input:focus{
outline: 1px solid blue;
}
## 5.过渡
div{
width: 100px;
height: 100px;
background-color: aqua;
/* transition: all 2s; */
transition: width 2s,height 3s,background-color 4s;
}
div:hover{
width: 1000px;
height: 200px;
background-color: blanchedalmond;
}
## 6.媒体查询
div{
width: 1000px;
height: 1000px;
}
/* 500-800px 800-1200px */
@media screen and(min-width: 500px) and (max-width:800px)
{
div{
background-color: aqua;
}
}
@media screen and(min-width: 800px) and (max-width:1200px)
{
div{
background-color: rgb(255, 0, 153);
}
}
## 7.字体
@font-face {
font-family: myFont ;
src: url();
}
p{
font-family: myFont;
font-size: 30px;
}
## 8.平移
div{
width: 300px;
height: 200px;
}
.father{
position: relative;
border: 1px solid black;
}
.son{
transition: all 2s;
position: absolute;
top: 0;
left: 0;
background-color: blanchedalmond;
/* 百分比参照的是盒子自身的尺寸
正数---x方向
正数负数都可以 */
transform: translateX(150%);
transform: translateY(-100px);
transform: translateZ();
/* transform: translate(x轴的偏移量,y轴的偏移量); */
transform: translate(200px 400px);
transform: translateX(200px)translateY(400px);
}
.father:hover .son{
transform: translate(200px 400px);
}
## 9.旋转
div{
width: 300px;
height: 200px;
}
.father{
position: relative;
border: 1px solid black;
}
.son{
transition: all 2s;
position: absolute;
top: 0;
left: 0;
background-color: blanchedalmond;
}
.father:hover .son{
/* 旋转的单位是deg(度) */
transform: rotateZ(60deg);
transform: rotate(70deg);
}
## 10.改变原点
div{
width: 300px;
height: 200px;
}
.father{
margin: 0 auto;
position: relative;
border: 1px solid black;
}
.son{
transition: all 2s;
position: absolute;
top: 0;
left: 0;
background-color: blanchedalmond;
}
.father:hover .son{
/* 旋转的单位是deg(度) */
/* transform: rotateZ(60deg); */
transform: rotate(70deg) rotateY(45deg);
/* transform-origin: 水平方向原点的位置 垂直方向原点的位置; */
/* 方向名词 像素 */
transform-origin: top right;
transform-origin: 100px 200px;
}
## 11.多重转换
div{
width: 300px;
height: 200px;
}
.father{
margin: 0 auto;
position: relative;
border: 1px solid black;
}
.son{
transition: all 2s;
position: absolute;
top: 0;
left: 0;
background-color: blanchedalmond;
}
.father:hover .son{
transform: translate(100px,200px) rotateY(45deg);
## 12.缩放
div{
width: 300px;
height: 200px;
}
.father{
margin: 0 auto;
position: relative;
border: 1px solid black;
overflow: hidden;
}
.son{
transition: all 2s;
position: absolute;
top: 0;
left: 0;
background-color: blanchedalmond;
}
.father:hover .son{
/* transform: scale(x轴的缩放 y轴的缩放); */
transform: scale(1.5,2);
transform: scale(-1);
/* 大于1表示放大的倍数 ,小于1表示缩小的倍数 */
}
## 13.倾斜
div{
width: 300px;
height: 200px;
}
.father{
margin: 0 auto;
position: relative;
border: 1px solid black;
}
.son{
transition: all 2s;
position: absolute;
top: 0;
left: 0;
background-color: blanchedalmond;
}
.father:hover .son{
transform: skewX(45deg);
}
## 14.空间转换
div{
width: 300px;
height: 200px;
}
.father{
margin: 0 auto;
position: relative;
border: 1px solid black;
/* 视距 */
perspective: 1000px;
transform: translate3d(100px 100px 200px);
transform-style:preserve-3d ;
}
.son{
transition: all 2s;
position: absolute;
top: 0;
left: 0;
background-color: blanchedalmond;
}
.father:hover .son{
transform: translateZ(100px);
}
## 15.动画
/* 定义动画 */
@keyframes mymovie {
form{
width: 0;
height: 0;
background-color: rgb(249, 240, 255);
}
to{
width: 1200px;
height: 300px;
background-color: aqua;
}
}
@keyframes mymovie2{
0%{ width: 1200px;
height: 300px;
background-color: aqua;
}
25%{
width: 1200px;
height: 300px;
background-color: rgb(255, 0, 0);
}
50%{
width: 1200px;
height: 300px;
background-color: rgb(0, 255, 98);
}
/* .... */
}
/* animmation 复合属性:动画名称 动画花费时间 */
div{
animation: mymovie 3s;
animation-duration: 3s;
/*动画延迟 */
animation-delay: 3s;
/* 执行完毕时的状态 */
animation-fill-mode: forwards;
/* 速度曲线 */
animation-timing-function: steps(40);
/* 重复次数 */
animation-iteration-count: 3;
/* animation-iteration-count: infinite;无限循环 */
animation: mymovie 3s ease 2s 3 reverse forwards;
}
div:hover{
/* 暂停动画 */
animation-play-state: paused;
}JavaScript:是一门弱数据类型的编程语言,实现的是人机交互的效果
干嘛:
1.做网页特效
2,做表单验证
3,是数据交互
4,服务器编程
5,
ECMAScript(变量,数据类型,分支,循环,对象) WebApi:Dom操作文档,Bom操作文档
JavaScript的书写位置:
内部JS:写在HTML里边,用<**script**>包住
写在<body**>**结束标签的前面
2,外部JS
代码写在.js结尾的文件中,通过
变量:计算机用来存储数据的容器,
盒子
注意:变量指的是容器
变量的基本使用:
声明变量 let变量名
变量赋值 变量名 = 变量值
重新赋值
let声明的变量,不允许重复声明
let声明多个变量
let age1=21,age2=12
var和let区别:
1,var可以重复声明变量
2,let声明的变量,不能在声明前使用
3,var不存在快起作用域的概念
后面声明变量使用let
变量的命名规范:
1,只能用有效字符(数字,字母,下划线,$)组成,并且不以数字开头
2,不能使用关键字,保留字,
3,js严格区分字母的大小写
4,起名最好是具有意义的
5,遵循小驼峰命名法
数据类型:
基本数据类型:
number
string:通过"" '`'包起来,都是字符串 ``包起来的字符串可以进行换行
字符串的拼接:+
模板字符串可以拼接字符串和变量
bool: true\false
undefined:未定义类型:变量声明了,但是未赋值
null
引用数据类型:
object
function
array
判断数据类型:type of 变量
js是数据类型语言,他的变量类型,只有在赋值之后,才能确定.也就是说,变量赋予的变量值是什么数据类型,变量就是什么数据类型
数据类型转换:
隐式和显示
隐式转换:
+两边存在一边是字符串,则另外一边会被转换成字符串
除了+,其他的算数运算符会将转换成数字类型
显示转换
转换为数字:
Number()
如果参数中出现字符,最终结果会是NAN,NAN本身也是属于number类型,不是一个数字not a number
parseInt()尽可能的将参数转化为整型
parseFloat()尽可能的将参数转化为浮点
转换成字符串:
String()
变量.toString()
运算符:
算术运算符:+ - * / %
赋值运算符:= += -= /= %=
a+=3 =====>> a=a+3
自增自减运算符
i++:赋值运算符的优先级大于后++,先进行赋值运算
++i:前++的优先级高于赋值运算符,先进行前加加,再进行赋值运算
i--
比较运算符:
**> < >= <= == === !== **
==:只会判断值是否相同
===:会判断值和数据类型
NAN不等于任何值,包括它自身
逻辑运算符:
&& 两真才真
|| 一真则真
! 取反
js:
**<script> src="路径" **
**</script>**
prompt()
let 变量名=变量值
数据类型:
基本数据类型 变量数据类型
string()
.tostrong()
运算符:
算数运算符:
赋值运算符:= += -=
一元运算符 ++ -- !
a = 12
b = a++
c = ++b
关系运算符:> >= < <= == ===(值,数据类型都会进行比较) != !==
逻辑运算符1:&& || !
位移运算符:基于二进制的运算
0 1
原码:十进制对应的二进制
反码:除了符号位之外,其余取反
补码:反码+1
|:两个0才为0
### 1.位运算
let a = 2
let b = 3
console.log(a|b)
// 0
// & 两个1才为1
console.log(a&b)
console.log(a^b)
### 2.表达式和语句
// 表达式:是一组代码的集合
let x = 7
3+4
x++
// 语句:if js的命令
// alert()
### 3.if-else语句
// 顺序,选择,循环
// 顺序:代码默认的自上到下,从左到右
// 选择(分支):面对不同的条件,执行不同的代码
// 条件只要最终返回的是布尔值就可以
// if(条件){
// // 满足条件时执行的代码
// }
// else{}
// 条件不满足时,执行的代码
// let age = Number(prompt("请输入你的年纪:"))
// if (age>18){
// console.log("成年了");
// }
// else{
// console.log("一边玩去");
// }
// else if(条件2){
// 条件2满足时执行的代码
// }
### 4.三元运算符
// 条件? 满足条件时执行的代码:不满足条件时执行的代码
// let age = 21
// age > 18 ? console.log("成年"):console.log("小孩")
// let a=2,b=3
// c=a>b ? a : b
// console.log(c)
let a = +prompt("输入一个数")
a=a < 10 ? "0"+a : a
console.log(a)
### 5.switch语句
// switch(数据){case 值1:代码 case 值2:代码 default:代码}
let day = prompt("请输入今天星期几:")
switch(day){
case "1":
alert("今天星期一")
break
case"2":
alert("今天星期二")
break
case"3":
alert("今天星期三")
break
case"4":
alert("今天星期四")
break
case"5":
alert("今天星期五")
break
case"6":
case"7":
alert("今天周末")
break
default:
alert("error")
}
### 6.断点调试
1.断点调试是指在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。进行分析从而找到这个Bug
2.断点调试是程序员必须掌握的技能。
3.断点调试也能帮助我们查看java底层源代码的执行过程，提高程序员的Java水平
### 7.循环
// 循环:某一段代码重复执行
// while
// *
// while(循环条件){循环体 }
// 变量的初始值
// let i = 1
// // 终止条件
// while(i<=10){
// console.log(i)
// // 初始值变化
// document.write(i)
// i++
// }
let i=1,n=1,sum1=0,sum2=0
while(i<=100){
sum1=sum1+i
i++
}
while(n<=100){
if(n%2 === 0 ){
sum2=sum2+n
}
n++
}
console.log(sum1)
console.log(sum2)
### 8.break,continue
let i = 1
while(i<10){
if(i===4){
// break
//终止掉距离自己最近的一层循环
i++
continue
// 跳出本次循环
}
console.log(i)
i++
}### 1.dowhile语句
let i = 1
do{
console.log("hello world")
i++
// 不管条件是否成立都会执行一次
}while(i<1)
### 2.for循环
// for循环:
// for(声明临时变量;循环条件;变化值){循环体}
for(let i=1;i<=100;i++){
console.log(i)
}
### 3.循环嵌套
for(let i=1;i<=7;i++){
console.log(`今天是第${i}天`)
for(let j=1;j<=7;j++){
console.log(`送了${j}朵花`)
}
}
### 4.数组
// 数组:存储多条数据,数组中存放不同的数据类型
// 数组的声明方式
// 1.new
let arr1 = new Array()
console.log(arr1)
// 2.字面量
let arr2=[1,2,3,"zhangsan",true]
console.log(arr2)
// 3.数组的长度
console.log(arr2.length)
// 查看数组里边的元素 数组下标:从0开始
console.log(arr2[3])
console.log(arr2[7])
// 遍历数组
for(let i=0;i<arr2.length;i++){
console.log(arr2[i])
}
// [2,3,4,5,6,714]求所有元素的和以及平均值
let arr3=[2,3,4,5,6,714]
let sum=0
let ar=0
for(let i=0;i<arr3.length;i++){
sum+=arr3[i]
}
document.write(sum)
document.write(`<br>`)
document.write(sum/arr3.length)
### 5.数组的操作
let arr1=[1,2,3,4]
// 查 数组名[下标]
// 改
arr1[0]="zhangsan"
console.log(arr1)
// 增
// 数值名.push():一次把一个或多个进行追加数组的前面
arr1.push("o((>ω< ))o")
arr1.push("对对对","对对对")
// unshift():一次把一个或多个进行追加到数组的后面
arr1.unshift("(⊙o⊙)？")
// 删除
// pop()从数组中删除最后一个元素,把元素
arr1.pop()
// shift()从数组中删除第一个元素
arr1.shift()
// splice(start/删除多个元素)删除指定元素
arr1.splice(2,3)
arr1.splice(2,3,"wwwwwd","assssssss","true")
### 6.函数
// 函数:一段实现某一功能的代码的集合 本质:实现了代码的高度复用
// 函数在js中的定义方式
// function函数名([参数]){函数体}
function sayhi(say){
console.log(say)
}
// 函数调用 函数名()
// sayhi()
// sayhi()
// 函数只能return出去一条数据
sayhi("顶顶顶顶顶顶顶顶顶顶顶")
function getsum(num1,num2){
// console.log(num1+num2)
return num1+num2,num1-num2
}
let a=getsum(1,2)
console.log(a)
// getsum(1,2)
### 7.函数作为参数传参
// function test1(){
// console.log("test1~~~~")
// }
// function test2(){
// test1()
// console.log("test2~~~~")
// }
function test2(fn){
fn(1)
console.log("test2~~~~")
}
//es6 箭头函数
test2((x,y) => {
console.log("test1")
})
function getmax(arr){
let max =0
for(let i in arr){
if(arr[i]>max){
}
}
}
### 8.值传递和引用传递
function change(Array){
// console.log(a)
// console.log(b)
// a+=10
// b+=100
// return a,b
Array.push("zhansan")
}
x=2
y=3
// change(x,y)
// console.log(x)
// console.log(y)
let arr1=[1,2,3,4]
change(arr1)
console.log(arr1)
### 9.默认值参数
function getarea(r,PI = 3.14){
return r*r*PI
}
let a=getarea(3)
console.log(a)
### 10.可变参数
function getsum(num1,num2){
// return num1+num2
console.log(arguments)
let sum=0
for(let i in arguments){
sum +=arguments[i]
}
console.log(sum)
return sum
}
let a = getsum(1,3,4)
document.write(a)
console.log(a)
### 11.作用域
// 作用域:名称在某一个范围内生效,这个范围为就是他的作用域
// 全局作用域 局部作用域 块级作用域
let a=1
function test01(){
console.log(a)
}
test01()
// console.log(b)
for(let i=0;i<=0;i++){
let zhangsan="zhangsan"
console.log(i)
}
console.log(zhangsan)
### 12.对象
let name=[172,120,119]
// 对象
let zhangsan={
unname: "张三",
age:21,
sing: () =>{
console.log("你是会唱歌的")
}
}
// 对象:属性和方法
// 查看 对像名.属性
console.log(zhangsan,unname)
zhangsan.sing()
console.log(zhangsan["age"])
### 1.剩余参数
//... 剩余参数,接到的是除了位置参数以外其余的参数,返回的是真数组
function test(a,b,...arr){
console.log(a+b)
console.log(arr)
console.log(arguments)
}
test(1,2,3,4)
## 2.垃圾回收机制
// 内存中的生命周期
// 1,内存分配
// 2,内存使用
// 3,内存回收,使用完毕之后
// 内存泄漏,该回收的,
// 栈
// 堆
//
// js:引用计数法 标记清除法
// 引用计数法:如果一个对象已经没有指向它的的引用了
// 内存消耗:循环引用的内存,
// 1.记录引用次数
// 2.++ --
// 3.引用次数为0时,释放内存
// let arr=[1,2,3,4]
let obj={
unname:"zhangsan"
}
let a = obj
a = null
// 标记清除 从根部查找内存中的对象,凡是能找到的,都是是我要进行使用的
let obj2={
a:obj3
}
let obj3={
b:obj2
}
obj2=null
### 3.闭包
// 内层函数+外层函数的变量 。内层函数使用了外层函数的变量
// function outer() {
// let i = 10
// function inner() {
// console.log(i)
// }
// return inner
// }
// let a = outer()
// a()
// a()
// 闭包：外部访问函数内部的变量
// let num = 0
// function test1() {
// num++
// console.log(`这是函数调用的第${num}次`)
// }
// test1()
// test1()
// num = 300
// test1()
function outer() {
let num = 0
function inner() {
num++
console.log(`这是函数调用的第${num}次`)
}
return inner
}
let a = outer()
a()
a()
a()
num = 21
a()
### 4.math
console.log(Math.E)
console.log(Math.PI)
let a = 4.999
let b = 3.11
// 向下进行取整
console.log(Math.floor(a))
// 向上取整
console.log(Math.ceil(b))
console.log(Math.abs(-111))
// 最大值最小值
console.log(Math.max(1, 21, 32, 12, 21))
console.log(Math.min(1, 21, 32, 12, 21))
// 随机数 只能取[0,1)
console.log(Math.floor(Math.random() * ((20 - 10) + 1)) + 10)
//
// function get_random(n, m) {
// return Math.floor(Math.random() * ((m - n) + 1)) + n
// }
// console.log(get_random(100, 200))
// 四舍五入
console.log(Math.round(3.51))
// 开平方根
console.log(Math.sqrt(9))
// 幂次方
console.log(Math.pow(2, 3))
### 5.date
// 实例化时间对象
let date = new Date("2024-05-01 00:00:00")
console.log(date)
// 年
let year = date.getFullYear()
console.log(year)
// 月 0-11
let m = date.getMonth() + 1
console.log(m)
// 日
let day = date.getDate()
console.log(day)
// 时分秒
let hh = date.getHours()
let mm = date.getMinutes()
let ss = date.getSeconds()
console.log(hh)
console.log(mm)
console.log(ss)
// 星期
let w = date.getDay()
console.log(w)
// 获取毫秒数
// let mins = date.getMilliseconds()
// console.log(mins)
// 时间戳 此刻距离19700101 00:00:00 的毫秒数
let timechuo = date.getTime()
console.log(timechuo)
function get_time() {
let date = new Date()
let year = date.getFullYear()
let m = date.getMonth() + 1
let day = date.getDate()
let hh = date.getHours()
let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
let ss = date.getSeconds()
let w = date.getDay()
return `${year}-${m}-${day} ${hh}:${mm}:${ss} 今天星期${w}`
}
let a = get_time()
console.log(a)
### 6.获取元素对象
// 1、通过css选择器获取
// document.querySelector("css选择器")
let div1 = document.querySelector(".box1")
console.dir(div1)
// document.querySelectorAll("ul li") 拿到的是伪数组，直接考虑for循环
let lis = document.querySelectorAll("ul li")
console.log(lis)
for (let i in lis) {
console.log(lis[i])
}
// 其他
console.log(document.getElementById("li4"))
### 1.元素内容
// 1.获取元素对象
const box1=document.querySelector("div")
console.log(box1)
// innerText() 不识别标签
console.log(box1.innerText)
box1.innerText="新内容"
console.log(box1.innerText)
// innerHTMl
console.log(box1.innerHTML)
box1.innerHTML=`<h1>xxxx</h1>`
console.log(box1.innerHTML)
// textContent 不识别标签
box1.textContent=`<h1>5555</h1>`
### 2.改属性
const ipt = document.querySelector()
// 对象.属性=值
ipt.type="passwd"
### 3.改style样式
// 1. 获取元素
const box =document.querySelector("div")
// 更改style样式
// 1.对象.style.样式=""
box.style.width="100px"
// 碰见带-的复合属性,采用小驼峰的方式
box.style.backgroundColor="brown"
// className
box.className="box_style"
// classList
// box.classList.add("box_style")追加新的类名到元素对象上
box.classList.add("box_style")
// box.classList.remove("box_style")移除元素对象的类名
// 如果类名存在则移除,如果不存在则添加
box.classList.toggle("box1")
### 4.补充
// 像是checked这样的属性名=属性值的属性,js在进行赋值时,通过true/false去控制属性值
document.querySelector("input[value='nv']").checked="true"
console.log(document.querySelector("input[value='nv']").checked)
### 5.查找结点
console.log(document.querySelector(".son").parentNode)
console.log(document.querySelector(".father").childNodes)
console.log(document.querySelector(".father").children)
// 查找兄弟节点
console.log(document.querySelector(".father").nextElementSibling)
console.log(document.querySelector(".father").previousElementSibling)
// console.log(document.querySelector(".father").nextSibling)
### 6.事件监听
// 事件:事件源 事件类型 处理函数
// l0 on事件类型
const button = document.querySelector("button")
const box = document.querySelector("div")
// 事件源.on事件类型=function(){}
// 同一个事件源，后面注册的事件会对前面注册的事件进行覆盖
// button.onclick = function () {
// box.style.display = "none"
// }
// button.onclick = null
// button.onclick = function () {
// console.log("666")
// }
function text() {
alert("666")
box.style.display = "none"
}
// l1 事件监听 不会覆盖
button.addEventListener("click", text, true)
button.removeEventListener("click", text, true)
// button.addEventListener("click", function () {
// // alert("666")
// console.log("444")
// }, true)
