JS基础总结

Posted 2020-09-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS基础总结相关的知识，希望对你有一定的参考价值。

javascript早期出现的原因---表单验证

js代表的是行为层，表示的是用户与网页的交互

JavaScript是一种直译式脚本语言

java---是编译式语言

js只能在浏览器执行，每一款浏览器都有自带的js引擎

js的四个核心

ECMAscript---javascript核心代码

dom document object model--文档对象模型

bom browser object model--浏览器对象模型

事件处理模型---点击按钮出现alert---onclick="a";

定义JavaScript的三种方式：

方式一：定义在标签中style--行内样式

<p script type="text/JavaScript" >hello hello kitty</p>

方式二：定义在body里面的script --内联样式

alert("ok")

</script>

方式三：单独建立一个js文件--外部样式

javascript定义的最好方式是在结束body前面一句，因为js是堵塞下载的，可以先加载静态html的在加载动态的。

1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)

2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs)

常用内部类:Data Array Math String

HTML属性，CSS属性

HTML：属性.HTML属性="值"；

CSS：对象.style.CSS属性="值";

class和float

1.class:className

2.float:cssFloat

事件:用户的动作

鼠标事件：

onclick：点击

onmouseover: 鼠标放上

onmouseout:鼠标离开

ondbclick:双击事件

onmousedown:鼠标按下

onmouseup:鼠标抬起

onmousemove鼠标移动

表单事件：

onfocus:获取焦点

onblur:失去焦点

onsubmit:提交事件

onchange:当发生改变的时候

onreset:重置事件

键盘事件:

onkeyup:键盘抬起

onkeydown:键盘按下

onkeypress:键盘按键一次

窗口时间:onload事件

页面加载完成之后立刻执行的事件

两种方式:

1.<script>window.onload=init/*函数名，不能加括号*/;</script>

2.<body onload="init()"></body>

event:保存事件发生时的相关的信息

当事件发生的时候,event

event.clientX:事件发生时的X的坐标

event.clientY:事件发生时的Y的坐标

event.target:事件源

event:必须通过实际参数的形式传递给函数才可以用

修改div中的内容

innerHTML:对象中所有的内容（文本内容和标签内容），一般指的是双标签或者容器标签

innerText:对象中所有的文本内容

document.createElement("标签名");

document.body.appendChild(对象);

removeChild(对象)

document.body是body标签对象

document.documentElement是html标签对象

ECMAscript,BOM,DOM

1.window:对象最高级

2.BOM:浏览器对象: brower object model

3.DOM:文档对象模型:document object model

4.BOM:网页一打开就会存在

5.DOM:去操作的代码

6.document是链接DOM和BOM

document有下级，其他的都没有下级【多窗口】

window.open("链接","name","设置");

1.width:设置窗口宽度

2.height:设置窗口高度

3.left:新窗口到左端距离

4.top:新窗口到顶部的距离

5.srollbars:滚动条【yes,no,1,0】

6.toolbar:工具类【yes,no,0】

7.location:地址栏

window.close: 关闭窗口

window.close()

创建定时器:

一次性计时器:window.setTimeout("函数()"，时间t)

执行:是在时间t之后执行js代码【只会执行一次】

时间:以毫秒为单位

反复性计时器:window.setInterval("函数()"，时间t)

时间:以毫秒为单位

执行:是每过时间t就会执行一次js代码【n次】

清楚定时器:

清除一次性定时器:window.clearTimeout(定时器名)

清除反复性定时器:window.clearInterval(定时器名)

注意:要想清除定时器，必须给定时器名字，匿名定时器无法清除

找对象的方法:

di:document.getElementById("id名");

标签:document.getElementsByTagName("标签名")//获取的是对象的集合(数组)

对象.getElementByTagName(标签名)

name:document.getElementByName("name名");//form集合(数组)

className:document.getElementByClassName("class名");//集合(数组)【firefox】

document.images;//获取img对象(数组)

document.links;//获取链接对象(数组)

document.forms;//获取表单对象(数组)

document.body;//body标签对象

document.documentElement;//HTML对象

event:事件信息对象

this:当前对象

location对象

location.href:返回url信息【可以获取url信息，也可以给其赋值，实现跳转页面】

location.assign():加载新的文档【跳转页面】

location.reload():重新加载当前的文档【刷新页面】

location.replace():用新的文档替代当前的文档【跳转页面】

location.assign和location.replace的区别:

location.assign:会产生历史记录

location.replace:不会产生历史记录

history对象:

history.length:浏览过的url数量

history.back():返回历史记录的前一个页面

history.forward():加载历史记录中的下一个页面

history.go(n):跳转到历史记录中指定的页面，如果是-1实际上就是history.back()的功能

screen对象

screen.height:获取屏幕的高度

screen.width:获取屏幕的宽度

screen.availHeight:获取除去任务栏的高度

screen.availWidth:获取除去任务栏的宽度

navigator对象

navigator.appName:浏览器名

navigator.appCodeName:浏览器代码名

navigator.appVersion:浏览器的版本号和平台信息

navigator.userAgent:浏览器信息

DOM:描述网页各个组成部分的关系

var obj = document.getElementById("id名")

火狐浏览器中空白处也算一个节点

parentNode:父节点

childNodes:子节点

firstChild:第一个子节点

lastChild:最后一个子节点

nextSibling:下一个兄弟节点【注意:必须是同父级关系】

previousSiblind:前一个兄弟节点【注意:必须是同父级关系】

以上是关于JS基础总结的主要内容，如果未能解决你的问题，请参考以下文章