JavaScript
入门
引入JavaScript
注意script标签必须成对出现
数据类型
arr.length:获得长度
arr.indexOf:通过元素获得下标索引
arr.slice:截取arr数组的一部分返回一个新的数组
push,pop:push:压入到尾部,pop弹出尾部
unshift,shift:前面压入头部,后面弹出头部
arr.sort():排序
reverse():元素反转
concat():并没有修改数组,只是会返回一个新的数组
join连接符
流程控制
for循环
for(let i=0;i<100;i++){
console.log(i)
}
forEach循环
var age=[1,2,3,4,5];
//函数
age.forEach(function (value){
console.log(value)
})
for…in
//for(var index in object){}
for(var num in age){
if(age.hasOwnProperty(num){
console.log("存在"),
console.log(age[num])
})
}
Map和Set
1Map:通过Key获得value
2.set可以去重
函数
规范
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件,使用了相同的全局变量,冲突->如何减少冲突?
//唯一全局变量
var fiee={}
//定义全局变量
fiee.name='fiee';
fiee.add=function(a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局名字冲突问题
操作BOM对象
window
window代表浏览器窗口
navigator
封装了浏览器的信息
location
location代表当前页面的URL信息
location.assign(‘https://blog.kuangstudy.com/‘)//设置新的地址
document
document代表当前的页面,HTML DOM文档树
history
代表浏览器的历史记录
history.back()//后退
history.forward()//前进
操作DOM对象
核心
浏览器网页就是一个Dom树形结构!
- 更新:更新Dom节点
- 遍历dom节点:得到Dom节点
- 删除:删除一个dom节点
- 添加:添加一个新的节点
要操作一个Dom节点就必须要先获得这个Dom节点
获得dom节点
document.getElementsByid()//获得id为xx的
document.getElementsByTagName()//获得标签为xxx的
document.getElementsByClassName()//获得类名为xxx的
更新节点
- id1.innerText=””//修改文本的值
- id.innerHtml=””//可以解析HTML标签
删除节点
删除节点的步骤:先获取父节点,在通过父节点删除自己
var father=p1.parentElement;
father.removeChild(p1)
插入节点
我们获得了某个DOM节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个Dom节点存在已经存在元素了,我们就不能这么干了,会产生覆盖
追加:appendChild()//追加到后面
insertBefore
insertBefore(x1,x2)//将x1插入到x2之前
操作表单(验证)
- 文本框
- 下拉框
- 单选框
- 多选框
- 隐藏域
- 密码框
提交表单
可以使用MD5加密
jQuery
jQuery库里面存在大量的JavaScript代码
引入jQuery库
- cdn引入在线的
- 下载包放入文件中
公式:$(选择器).事件
事件
//当网页元素加载完毕之后响应时事件
$(function(){
$('')
})
鼠标事件,键盘事件
鼠标事件:mousemove
操作DOM