web前端 js基础
1.引入
1.body 标签的 script 标签中
2.将代码写在js的格式文件中,在body标签中引用
代码如下
2.数据类型
1.数字型 number 1
2.字符串型 string '1'
3.布尔型 boolean true
4.undefined型 undefined undefined
5.null型 object null
6.typeof 运算符 可以检测变量的类型
3.变量声明
var 变量名 = 变量值
4.数字类型
1.不分大小、整浮、正负
2.科学计数法 例:3e8 3乘10的八次
3.不同进制的数字
0b 二进制
0 八进制
0x 十六进制
4.NaN “not a number" 它是一个数字类型的值
5.字符串类型
1.单双引号包裹
2.字符串拼接
’1‘+’2‘结果是’12‘
3.字符串和变量的拼接
’字符串1‘+变量名’字符串2‘
4.空字符串 ’ ‘
5.length 字符串的长度
6.输入输出语句
输入语句 prompt()
输出语句 alert() 弹出警示框
console.log() 控制台输出
7.数据类型的转换
1.转数字型
Number()
parseInt()转换为整数
parseFloat()转换为浮点数
2.转字符型
String() toString()
3.转布尔型
Boolean()
8.运算
8.1算术运算符
加、减、乘、除、取余
8.2隐式类型转换
如果参与运算的不是数字型,自动将次操作符转换为数字型
8.3关系表达式
1.大于> 小于< 大于等于>= 小于等于<=
2.等于 == 值相等
===全等 值、类型完全相等
3.NaN 不自等
4.不相等 !=
不全等!==
5.非 !
6.与 && 都真才真
7.或 || 有真就真
8.优先级 非>与>或
8.4赋值运算符
=
+=
-+
*=
/=
%=
++
--
8.5a++与++a的区别
a++先取值后计算
++a先计算后取值
8.6运算优先级
非>数学运算>关系运算>逻辑运算
9.分支
if
switch
10.循环
while
do while
for
break 结束当前循环
continue 跳出本次循环,执行下次循环
11.数组
11.1创建数组
1.var arr = new Arr() 利用new创建
2.var arr = Arr[] 利用字面量创建数组
11.2获取数组元素
数组元素从0开始
1.arr[0]
2.利用for遍历数组
3.使用 数组名.length可以访问数组元素的数量
11.3数组新增元素
通过修改数组元素的长度增加数组元素 增加部分由于没有赋值 所以默认undefined
11.4利用数组冒泡排序
代码如下
12.函数
12.1声明
function 函数名 (参数1,参数2) {
函数内容
}
12.2调用
函数名(参数1,参数2);
12.3调用问题
1.实参=形参 输出正确结果
2.实参>形参 只取到形参的个数
3.实参<形参 多得形参定义为undefined,结果为NaN
13.作用域
变量可用性的代码范围
全局变量:在代码任意位置都可以使用
局部变量:在函数声明内部可以使用
14.预解析
变量预解析:把变量的声明提前,但不提前变量的赋值
函数预解析:函数的声明提前,但不提前函数的调用
15.对象
15.1定义
对象作为具体的一个盒子 由属性和方法组成。
15.2创建
1.利用字面量
var obj = {
属性名:属性值,
方法名:function(){}
}
2.利用new
var obj = new Object;
属性名:属性值;
方法名:function(){};
3.构造函数
function 构造函数名(){
this.属性名=属性值;
this.方法名=function(){}
}
15.3调用
1.调用属性
对象名.属性名
对象名['属性名']
2.调用方法
对象名.方法名()
15.4遍历对象
for (变量名 in 对象名) {
}
15.5Date对象
new Date()
1.如果Date()不写参数,则返回当前时间
2.如果Date()写参数,则返回括号里时间
16.MDN文档查阅
Date
获得Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1日过了多少毫秒数(时间戳) 程序加密
1.通过 valueOf() getTime()
2.简单写法(最常用) +new Date() (之前已定义Date对象)
3.H5 新增的 Date.now()
数组对象Array
数组对象的创建
1.利用字面量
var arr = [1,2,3]
2.利用newArray
var arr = new Array(2,3) 注意:括号里不能写一个数字,如果写一个数字表示的是数组的长度 例如:Array(2) 表示里面有2个空的数组元素
检测是否为数组
1.instanceof 运算符
arr instanceof Array 如果输出true表示arr是数组,反之不是
2.Array.isArray(参数) H5新增的
Array.isArray(arr) 如果输出true表示arr是数组,反之不是
添加删除数组元素
1.push() 在数组末尾添加一个或多个数组元素
arr.push(元素1,元素2) push完毕返回的是新数组的长度 原数组变化为新数组
2.unshift 在数组的开头添加一个或多个数组元素
arr.unshift(元素1,元素2) unshift完毕返回的是新数组的长度 原数组变化为新数组
3.pop() 删除数组的最后一个元素
arr.pop() pop后面不跟参数 pop完毕的返回值是删除的数组元素 原数组变化为新数组
4.shift() 删除数组的最后一个元素
arr.shift() shift后面不跟参数 shift完毕的返回值是删除的数组元素 原数组变化为新数组
数组排序
翻转数组
reverse()
arr.reverse() 表示翻转arr
数组排序(冒泡排序)
sort()
arr.sort(function(a,b) {
return a - b; 表示升序
return b - a; 表示降序
}
数组索引
1.indexOf()
arr.indexOf(元素1) 表示返回arr中的元素1的索引号
注意:只返回第一个满足条件的
找不到该元素,则返回-1
2.lastIndexO()
注意:相比indexOf 它是从后往前查找,返回元素的索引值其它一致
数组转换为字符串
1.toString
arr.toString()
2.join(分隔符)
arr.join() 用逗号分隔
arr.join('-') 用-分隔
字符串对象
基本包装类型
把简单数据类型包装成复杂数据类型,这样基本数据类型就有了属性和方法
字符串的不可变
字符串赋值,字符串的值是不变的,只是重新开辟了一个新的空间放新的字符串
根据字符返回位置
indexOf('要查找的字符',[起始位置])
lastIndexOf 用法一致
根据位置返回字符
1.charAt(index) 根据位置返回字符
arr.charAt(3) 表示返回arr中索引数为3的元素
2.charCodeAt(index) 返回相应索引号的字符的ASCII值
arr.charCodeAt(0) 表示返回arr中索引数为0的元素的ASCII值
3.arr.[index] H5 新增的
arr.[0] 表示返回arr中索引数为0的元素
字符串操作方法
1.concat('字符串1','字符串2') 连接两个字符串
2.substr('截取的起始位置(索引号)','截取几个字符')
3.replace('被替换的字符','替换为的字符')
注意:只会替换第一个字符
4.split('分隔符') 把字符转换为数组 与join方法类似
简单类型与复杂类型
简单类型,又叫值类型,在存储变量中存储的是值本身
注意:null返回的是一个空对象
复杂类型,又叫引用类型,在存储变量中存储的是其地址
堆和栈
简单类型,直接开辟一个空间,栈里面存放的是值
复杂类型,在栈里面存放地址,用十六进制表示,这个地址指向堆里面的数据
简单类型传参
把变量在栈的空间里的值复制了一份给形参,在方法内部对形参做任何修改,都不会影响到外部变量
复杂类型传参
把变量在栈的空间里保存的地址复制给了形参,形参和实参保存的是同一个地址,所以操作的是同一个对象
Web APIs
APIs
给程序员提供的一种工具,以便能更轻松实现要完成的功能
Web APIs
是浏览器提供的一套操作浏览器功能和页面元素的APIs(BOM和DOM)
DOM
处理可扩展标记语言的接口 改变网页的结构和样式
DOM树
文档 一个页面
元素 页面中所有的标签
节点 页面中所有的内容
注意:DOM把以上内容都看做为对象
获取元素
根据ID获取
getElementById()
document.getElementById(id名)
1.script 写到标签的下面
2.参数id是大小写敏感的字符串
3.返回的是一个元素对象
4.console.dir 打印我们返回的元素对象 更好地查看里面的属性和方法
根据标签名获取
getElementsByTagName()
document.getElementsByTagName('标签名') 获取整个文档中的全部标签元素
1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
2.依次获取每个元素,需要遍历数组
3.如果页面只有一个标签,返回的还是伪数组形式
4.如果页面中没有这个标签,返回的是空的伪数组形式
element.getElementsByTagName('标签名') 指明一个父元素(父元素必须是指定的单个元素),获取父元素中的标签元素
通过HTML5新增方法
1.getElementsByClassName('类名')
2.querySelector('选择器名') 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号
3.querySelectorAll('选择器名') 返回指定选择器的所有元素对象集合
获取body
document.body
获取html
document.documentElement
事件基础
触发响应的机制
事件三要素
点击
事件源
事件被触发的对象
var btn = document.getElementById('btn');
事件类型
如何触发 什么事件
鼠标点击(onclick)
事件处理程序
通过一个函数赋值操作 完成
btn.onclick = function() {
alert('完成');
}
执行事件的步骤
1.获取事件源
2.绑定事件
3.添加事件处理程序
操作元素
改变元素的内容
1.element.innerText = 表示改变element元素中的文字为
不识别html标签 去除空格和换行
2.element.innerHTML = 表示改变element元素中的文字为
识别html标签 保留空格和换行
这两个属性是可以读写的 可以获取元素里面的内容
改变元素的属性
1.获取元素
2.注册事件 处理程序 修改元素属性
元素名.属性名
表单元素的属性操作
1.获取元素
2.注册事件 处理程序
表单里面的文字内容通过value改变
input.value =
如果想要某个表单被禁用 不能再点击
this.disabled = true this是指向事件函数的调用者
改变样式属性
this.style.backgroundColor this.style.width 产生的时候行内样式
隐藏元素 display:none 变量名.style.display = 'none'
显示元素 display:block
获得焦点事件 onfocus 失去焦点事件 onblur
类名样式操作样式属性 (适合于样式较多或者功能复杂的)
element.className
在head标签中创建一个类标签,然后在script标签中,把需要修改的元素类标签修改为新创建的标签
this.className = '新类标签名' 会覆盖之前的class类名
this.className = '原来的类标签名 新类标签名' 保留原先的class类名
排他思想
1.所有元素全部清除样式
2.给当前元素设置样式
3.注意顺序不要颠倒
onmouseover 鼠标经过
onmouseout 鼠标离开
自定义属性值的操作
获取元素的属性值
1.element.属性 获取的是内置属性值
2.element.getAttribute('属性') 可以获取自定义属性值
设置属性值
1.element.属性='值' 内置属性值
2.element.setAttribute('属性','值') 主要针对自定义属性值
移除属性值
类名标签.removeAttribute('属性')
H5自定义属性
规定以data-开头设定自定义属性
获取
-
.getAttribute('data-属性名') 常用 兼容性较好
2. .dataset.属性名 或 .dataset['属性名']
如果自定义属性中有多个-链接的单词,我们获取时采取 驼峰命名法
节点操作
1.父节点 parentNode 得到的是离元素最近的父节点 如果找不到父节点就会返回 null
2.子节点 childNodes 得到的所有子节点 包括元素节点和文本节点
children 获取所有的子元素节点
firstChildren 第一个子节点 不管是文本节点还是元素节点
lastChildren 最后一个
firstElementChild 第一个子元素节点 有兼容性问题
lastElenmentChild 最后一个 有兼容性问题
children[0] 第一个子元素节点
children[children.lenth - 1] 最后一个子元素节点
3.兄弟节点 nextSibling 返回当前元素的下一个兄弟节点,找不到则返回null 所有节点包含元素节点和 文本节点
nextElementSibling 得到下一个兄弟元素节点 有兼容性问题
previousElementSibling 得到上一个 有兼容性问题
创建函数 元素节点 1
创建节点
document.createElement(' ')
添加节点
node.appendChild(child) node 父级 child 子级 后面追加元素
node.insertBefore(child,指定元素) 前面追加元素
删除节点
node.removeChild(child)
例如 删除ul中的第一个li 代码如下
获取ul 删除li ul.removeChild(ul.children[0])
阻止链接跳转(地址不变化) 添加javascript:void(0)或者javascript
复制节点
node.coloneNode()
注意:
1.复制完元素如果想要展示出来,需要添加元素
-
如果括号里是false,即浅拷贝,只克隆节点本身,不克隆里面的子节点
-
如果括号里是true,即深拷贝,会复制节点本身和里面的内容
三种动态创建元素的区别
document.write() 文档流执行完毕 再调用这句话 会导致页面重绘 原先的内容全部不在保留
element.innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
document.createElement() 创建多个元素效率稍微低一点点,但是结构清晰
DOM重点核心
创建
1.document.write
2.innerHTML
3.createElement
增
1.appendChild
2.insertBefore
删
1.removeChild
改
1.修改元素属性:src、href、title
2.修改普通元素内容:innerHTML、innerText
3.修改表单元素:value、type、disabled
4.修改元素样式:style、className
查
1.DOM提供的API方法:getELementByld、getElementsByTagName
2.H5提供的新方法:querySelector、querySelectorAll提倡
3.利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextELementSibling)提倡
属性操作
1.setAttribute:设置dom的属性值
2.getAttribute:得到dom的属性值
3.removeAttribute:移除属性
事件
注册事件
传统注册方式 onclick 注册事件的唯一性 只能执行后面的处理函数
方法监听注册方式 addEventListener() 同一个元素 同一个事件可以注册多个监听器 按注册顺序依次执行
事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])
type 事件类型字符串 click 注意不要带om
listener 事件处理函数 事件发生时 会调用该监听函数
useCapture 可选参数 是一个布尔值 默认是false
删除事件
传统注册方式 eventTarget.onclick = null
方法监听注册方式 ev entTarget.removeEventListener(type,listener[,useCapturel])
DOM事件流
js代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent(ie)只能得到冒泡阶段
捕获阶段 如果addEventListener 第三个参数是ture那么则处于捕获阶段 document-html-body-farher-son
冒泡阶段 如果addEventListenner 第三个参数是false或者省略 那么则处于冒泡阶段 son-father-body-html-document
事件对象
function(event){}
event就是一个事件对象 写到我们侦听函数的小括号里面 当形参来看
事件对象只有有了事件才会存在,它是系统给我们自动创建的 不需要我们传递参数
事件对象 我们事件的一系列相关数据的集合
兼容性问题
常见事件对象的属性和方法
e.target 返回的是触发事件的对象(元素) 区别 this那个元素绑定了这个事件返回那个元素 e.target点击那个元素返回那个元素 有兼容性
e.type 返回的是触发事件的类型(click、mouseover等)
e.preventDefault() 阻止默认行为(事件)有兼容性
return false 阻止默认行为 没有兼容性 return后面的代码不执行 只限于传统的注册方式
阻止冒泡的方法
e.stopPropagation() 兼容性
e.cancelBubble = true
事件委托
原理 不是每个子节点单独设置事件监听器 而是事件监听器设置在其父节点上 然后利用冒泡排序原理影响设置每个子节点
鼠标事件
鼠标右键菜单
contextmenu
鼠标开始选中
selectstart
鼠标移动
mousemove 只要鼠标移动一个像素,都会触发
鼠标事件对象
e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX 返回鼠标相对于文档页面的X坐标 IE9+支持
e.pageY 返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX 返回鼠标相当于电脑屏幕的X坐标
e.screenY 返回鼠标相当于电脑屏幕的Y坐标
键盘事件
onkeyup 某个键盘按键被松开时触发 不区分字母大小写
onkeydown 某个键盘按键被按下时触发 不区分字面大小写
onkeypress 某个键盘按键被按下时触发 但是它不识别功能键 如 ctrl shift 箭头等 区分字母大小写
执行顺序 先执行down 再执行press 再执行up
键盘事件对象
keyCode 返回按下键的ASCII码值
BOM
浏览器对象模型,提供独立于内容而与浏览器窗口进行交互的对象,其核心是window
窗口加载事件
window.onload = function(){}
或者
window.addEventListener('load',function(){}); 必须所有的内容加载完 包括图片啥的加载完才可以执行
或者
document.addEventListener('DOMContentLoaded', function(){}) 文档加载完就可以执行了
调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){})
window.innerWidth 得到当前的屏幕宽度
两种定时器
setTimeout() 定时器
window.srtTimeout(调用函数,[延迟的毫秒数])
延迟时间到了就去调用这个回调函数,只调用一次
1.window在调用的时候可以省略
2.这个调用函数可以直接写函数 还可以写函数名
3.页面中可能有很多的定时器,我们经常给定时器加标识符
停止setTimeout()定时器
window.clearTimeout(timeoutID)
setInterval()定时器
window.setInterval(回调函数,[间隔的毫秒数])
重复调用一个函数,每间隔这个时间,就去调用一次回调函数
1.window在调用的时候可以省略
2.这个调用函数可以直接写函数 还可以写函数名
3.页面中可能有很多的定时器,我们经常给定时器加标识符
停止setInterval()定时器
window.clearInterval(intervalID)
JS执行机制
同步异步
同步任务 同步任务都在主线上执行,形成一个执行栈。
异步任务 JS的异步是通过回调函数实现的
一般而言 异步任务有以下三种类型:
1.普通事件 如click,resize等
2.资源加载 如load,error等
3.定时器 包括setInterval setTimeout等
location对象
location
window对象下的一个属性,主要作用是获取或设置窗体的URL,并且用于解析URL
URL
资源地址,每一个网页有唯一一个URL
格式
ptotocol://host[:port]/path/[?query]#fragment
protocol 通信协议 常用的 http ftp maito等
host 主机(域名)
port 端口号 省略时为默认端口 http的默认端口为80
path 路径 由零或多个'/'符号隔开的字符串 一般用来表示主机上的一个目录或者文件地址
query 参数 以键值对的形式 通过&符号分隔开来
fragment 片段 #后面内容 常见于链接 锚点
属性
location.href 获取或者设置整个URL
locaton.host 返回主机(域名)
location.port 返回端口号 如果未写 返回空字符
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段 #后面内容 常见于链接 锚点
location对象的方法
location.assign() 跟href一样,可以跳转页面(也称为重定向页面)
location.replace() 替换当前·1页面,因为不记录历史,所以不能后退页面
location.reload() 重新加载页面,相当于刷新按钮或者 f5 如果参数为true 强制刷新 ctrl+f5
history对象
back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能 如果参数是1 前进一个页面 如果参数是-1 后退一个页面
Javascript_xue: http://t.csdn.cn/R9s52
CSDN-Ada助手: 恭喜您的文章入围 每天最佳新人「2023-04-25」榜单, 排名「1」, 一定要再接再厉哦, 创作更多高质量博客, 争取拿到更好成绩, 全部的排名请看: https://bbs.csdn.net/topics/614881993 更多创作活动请看: 新人首创任务挑战赛: https://marketing.csdn.net/p/90a06697f3eae83aabea1e150f5be8a5?utm_source=csdn_ai_ada_redpacket 蓝桥杯备赛指南分享: https://activity.csdn.net/creatActivity?id=10317?utm_source=csdn_ai_ada_redpacket 五一福利活动,向辛苦创作的创作者们致敬!: https://activity.csdn.net/creatActivity?id=10383?utm_source=csdn_ai_ada_redpacket 为什么越来越多的企业选择云计算?——分析云计算的优势和未来发展趋势: https://activity.csdn.net/creatActivity?id=10393?utm_source=csdn_ai_ada_redpacket “孔乙己的长衫”:学历究竟成为敲门砖还是枷锁: https://activity.csdn.net/creatActivity?id=10391?utm_source=csdn_ai_ada_redpacket 自动驾驶技术:是行业领先还是依然存在缺陷?: https://activity.csdn.net/creatActivity?id=10389?utm_source=csdn_ai_ada_redpacket 如何写出高质量代码: https://activity.csdn.net/creatActivity?id=10387?utm_source=csdn_ai_ada_redpacket 热门IT技术大赏: https://activity.csdn.net/creatActivity?id=10374?utm_source=csdn_ai_ada_redpacket 你想对大学的自己说些什么: https://activity.csdn.net/creatActivity?id=10346?utm_source=csdn_ai_ada_redpacket AI绘画能取代设计师吗?: https://activity.csdn.net/creatActivity?id=10342?utm_source=csdn_ai_ada_redpacket 热门IT技术大赏: https://activity.csdn.net/creatActivity?id=10384?utm_source=csdn_ai_ada_redpacket 关于程序员那些【越早知道越好的】道理: https://activity.csdn.net/creatActivity?id=10380?utm_source=csdn_ai_ada_redpacket 程序员如何提高代码能力: https://activity.csdn.net/creatActivity?id=10378?utm_source=csdn_ai_ada_redpacket IT行业吃香技能TOP榜探讨: https://activity.csdn.net/creatActivity?id=10375?utm_source=csdn_ai_ada_redpacket 图书活动第四期: https://bbs.csdn.net/topics/614692804?utm_source=csdn_ai_ada_redpacket 「持之以恒」挑战赛-30天技术创作养成记!: https://bbs.csdn.net/topics/614509420?utm_source=1389167755 上传ChatGPT相关资源,瓜分¥5000元奖金池: https://blog.csdn.net/VIP_Assistant/article/details/130196121?utm_source=csdn_ai_ada_redpacket 高效学习方法分享 : https://activity.csdn.net/creatActivity?id=10350?utm_source=csdn_ai_ada_redpacket 有意义的游戏开发经历: https://activity.csdn.net/creatActivity?id=10354?utm_source=csdn_ai_ada_redpacket AI工具究竟是帮手还是对手: https://activity.csdn.net/creatActivity?id=10355?utm_source=csdn_ai_ada_redpacket 谈谈你所了解的AR技术吧!: https://activity.csdn.net/creatActivity?id=10325?utm_source=csdn_ai_ada_redpacket 关于你的第一台电脑: https://activity.csdn.net/creatActivity?id=10323?utm_source=csdn_ai_ada_redpacket 设计更好的信息阅读界面-主题征文: https://bbs.csdn.net/topics/614393882?utm_source=csdn_ai_ada_redpacket CSDN分享博客功能测试征文: https://bbs.csdn.net/topics/614325820?utm_source=csdn_ai_ada_redpacket 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 分享你做过的最满意的项目: https://activity.csdn.net/creatActivity?id=10360?utm_source=csdn_ai_ada_redpacket 考研经验分享: https://activity.csdn.net/creatActivity?id=10356?utm_source=csdn_ai_ada_redpacket
CSDN-Ada助手: 恭喜你这篇博客进入【CSDN每天最佳新人】榜单,全部的排名请看 https://bbs.csdn.net/topics/614881993。
CSDN-Ada助手: 恭喜你这篇博客进入【CSDN每天最佳新人】榜单,全部的排名请看 https://test-cms-ccloud.csdn.net/ccloud/topics/600590450。
CSDN-Ada助手: 恭喜你开始写博客啦!对于web前端的学习,HTML和CSS是必不可少的基础,希望你能够不断精进自己的技能,分享更多优质的内容哦! 推荐【每天值得看】:https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1