js是运行在浏览器的编程语言
一、基础语法
1.1 js结束符
以；结束，可省略
1.2 输入输出语法
1.3字面量
1.4变量
let num=1；
var i=2 
1.5数组
数组长度：arr.length
遍历数组
例1：求数组的最大值和最小值
// 求数组中的最大值
let ar2=[12,89,2,0,68,87]
let max=ar2[0];
let min=ar2[0];
for(let i=1;i<ar2.length;i++){
if(max<ar2[i]){
max=ar2[i]
}
if(min>ar2[i]){
min=ar2[i]
}
}
document.write('最大值'+max)
document.write('最小值'+min)操作数组
增删改查
修改数组
let ar3=['hello','world','js']
for(let i=0;i<ar3.length;i++){
ar3[i]=ar3[i]+'apple'
document.write(ar3[i]+'<br>')
}增
let ar4=['77','8hb']
ar4.push('hello')
document.write(ar4+'<br>')
ar4.unshift('hello')
document.write(ar4)删
let ar6=[1,23,56,345,90]
document.write('删除最后一个元素'+ar6.pop()+'<br>')
document.write('删除第一个元素'+ar6.shift()+'<br>')
ar6.splice(1,2)//是从索引号为1的位置开始删，只删除2个
document.write(ar6)筛选数组
let ar5=[1,23,56,345,90]
let newArr=[]
for(let i=0;i<ar5.length;i++){
if(ar5[i]>10){
newArr.push(ar5[i])
}
}
document.write(newArr+'<br>')1.6数据类型
字符串拼接 ：“+”
模版字符串:``和${}
document.write('拼接字符串：我今年'+age+'岁')
document.write(`模板字符串：我今年${age}岁了`) 
数据类型的检测
类型转换
隐式转换
document.write(2+'2') //22
document.write(2-'2') //0
document.write(2*'2') //4
document.write(2/'2') //1显示转换
let st1='123'
console.log((Number(123)));
console.log(typeof (Number(123)));
console.log((parseInt(123.78)));
console.log((parseFloat(123.08)));
1.7运算符
赋值运算符 += 例：sum+=1
自增运算符 ++ 例：i++
比较运算符
逻辑运算符 && || !
运算符优先级
1.8 分支语句
if语句
if(true){console.log('ok')}三元运算符
3>5?1:6 //61.9 循环语句
while循环
for循环
退出循环 break
1.10函数
<script>
// 函数声明
function fun1(){
for(let i=1;i<=9;i++){
for(let j=1;j<=i;j++){
document.write(`${j}*${i}=${i*j}`);
}
document.write('<br>')
}
}
// 函数调用
fun1();
</script>函数参数
函数的返回值
function fun2(arr){
let sum=0
for(let i=0;i<arr.length;i++){
sum=sum+arr[i]
}
return sum
}
let result=fun2([12,43,0,90])
document.write(result)作用域
匿名函数
1.11对象
声明对象
对象的使用
<script>
let obj1={
usename:'zx',
age:18,
gender:'女',
'price-car':10000,
say:function(){
document.write('hello')
}
}
console.log(obj1)
// 查
document.write(obj1.age+'<br>')
document.write(obj1['price-car'])
// 修改
document.write(obj1.age=20)
// 增
document.write(obj1.car='宝马')
console.log(obj1)
// 删
document.write(delete obj1.age+'<br>')
console.log(obj1)
// 调用方法
obj1.say()
</script>
遍历对象
<script>
let obj1={
usename:'zx',
age:18,
gender:'女',
'price-car':10000
}
for(let k in obj1){
document.write(k)
document.write(obj1[k]+'<br>')
}
</script>内置对象
document.write('<h2>内置对象</h2>')
document.write(Math.random()*100+'<br>') //范围[0,100)
document.write(Math.ceil(1.2)+'<br>') //2
document.write(Math.floor(1.9)+'<br>') //1
document.write(Math.max(1,2,9,6)+'<br>')//9
document.write(Math.min(1,2,3,4)+'<br>')//1
document.write(Math.pow(2,2)+'<br>') //2的2次方 4
document.write(Math.abs(-89)+'<br>')//89二、WebAPI
三、DOM
DOM树
DOM对象
获取DOM对象
通过css3选择器获取DOM元素
 |  |
<body>
<ul class="nav">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<script>
const ul=document.querySelector('.nav')
const lis=document.querySelectorAll('ul li') //获取的为一个伪数组
console.log(ul)
console.log(lis)
for(let i=0;i<lis.length;i++){
console.log(lis[i]);
}
</script>
</body>
其他获取DOM元素的方法
操作DOM元素的内容
 |  |
<span>一段文字</span>
<script>
const span=document.querySelector('span')
span.innerText='hello span'
span.innerHTML='<strong>hello span</strong>'
</script>操作DOM元素的属性
操作元素的常用属性
操作元素的样式属性
通过style属性操作css
通过类名（className）操作css——会覆盖以前的类名
<style>
.box{
width: 200px;
height: 200px;
color: red;
background-color: antiquewhite;
}
.active{
width: 300px;
height: 300px;
margin: 0 auto;
background-color: skyblue;
border: 2px solid pink;
}
</style>
<body>
<div class="box">123</div>
<script>
const div=document.querySelector('.box')
div.className='box active' //如果想保留以前的样式，再加上即可
</script>通过classList类操作css
<script>
const div=document.querySelector('.box')
// div.className='box active' //如果想保留以前的样式，再加上即可
div.classList.add('active')
div.classList.remove('box')
// toggle 有还是没有，没有就加上，有就删除
div.classList.toggle('active')
</script>
操作表单元素的属性
<input type="text" value="掌声"></input>
<script>
const input1=document.querySelector('input')
console.log(input1.value); //获取表单中的值
input1.type='password' //更改表单属性
</script>
<input type="checkbox" ></input>
<button>提交</button>
<script>
const input1=document.querySelector('input')
const btn=document.querySelector('button')
input1.checked=true //将其状态改为选中状态
btn.disabled=true //将其改为禁用状态
</script> 自定义属性
定时器函数
<script>
let n=setInterval(function(){
console.log('一秒钟执行一次');
},1000)
console.log(n);
clearInterval(n)
</script>事件
语法
<button>点击</button>
<script>
let btn=document.querySelector('button')
// 方式一
btn.addEventListener('click',function(){
btn.style.backgroundColor='pink'
})
// 方式二
btn.onclick=function(){
btn.style.backgroundColor='pink'
}
</script>区别：
案例——随机点名
<div style="margin: 0,auto;">
<h2>随机点名案例</h2>
名字
<div class="na"></div>
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
let arr=['张三','李四','赵六','王五','马云']
let na=document.querySelector('.na')
let start=document.querySelector('.start')
let end=document.querySelector('.end')
let n;
start.addEventListener('click',function(){
n=setInterval(function(){
let random=parseInt(Math.random()*arr.length)
na.innerHTML=arr[random]
},100)
})
end.addEventListener('click',function(){
clearInterval(n)
})
</script>
事件类型
// 鼠标事件
btn.addEventListener('mouseenter',function(){
btn.style.backgroundColor='pink'
})
btn.addEventListener('mouseleave',function(){
console.log('789');
btn.style.backgroundColor=''
})
// 焦点事件
let input=document.querySelector('input')
input.addEventListener('focus',function(){
console.log('789');
})
input.addEventListener('blur',function(){
console.log('7');
})
// 表单输入触发
input.addEventListener('input',function(){
document.write(input.value)
})
// 键盘事件
input.addEventListener('keydown',function(){
console.log('鼠标按下了');
})
input.addEventListener('keyup',function(){
console.log('鼠标弹起了');
})event——事件对象
语法
事件对象的常用属性
this——环境对象
回调函数
事件流
阻止默认行为
其他事件
页面加载事件
页面滚动事件
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
