Js基础知识总结

如何在一个网站或者一个页面,去书写你的js代码:

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

 

获取对象

id:document.getElementById("id 名")

 

事件:用户的动作

鼠标事件:

onclick:点击

onmouseover: 鼠标放上

onmouseout:鼠标离开

ondbclick:双击事件

onmousedown:鼠标按下

onmouseup:鼠标抬起

onmousemove鼠标移动

表单事件:

onfocus:获取焦点

onblur:失去焦点

onsubmit:提交事件

onchange:当发生改变的时候

onreset:重置事件

键盘事件:

onkeyup:键盘抬起

onkeydown:键盘按下

onkeypress:键盘按键一次

窗口时间:onload事件

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

两种方式:

1.<script>window.οnlοad=init/*函数名,不能加括号*/;</script>

2.<body οnlοad="init()"></body>

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

当事件发生的时候,event

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

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

event.target:事件源

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

 

<input type = "button" value = "点击" onclick = "fn(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:前一个兄弟节点【注意:必须是同父级关系】

 

登录验证:

onsubmit:表单提交事件

οnsubmit="return 函数()"

转载于:https://my.oschina.net/u/3820366/blog/1801939

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值