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库

  1. cdn引入在线的
  2. 下载包放入文件中

公式:$(选择器).事件

事件

//当网页元素加载完毕之后响应时事件
$(function(){
	$('')
})

鼠标事件,键盘事件

鼠标事件:mousemove

操作DOM

posted @ 2022-06-05 17:03  fieeDream  阅读(36)  评论(0编辑  收藏  举报