js基础知识点总结
Posted xuhanghang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.onload=init/*函数名,不能加括号*/;</script> 2.<body onload="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:表单提交事件 onsubmit="return 函数()"
以上是关于js基础知识点总结的主要内容,如果未能解决你的问题,请参考以下文章