DOM
DOM查找方法
document.getElementById()
返回对拥有指定ID的第一个对象的引用
返回值:DOM对象
document.getElementsByTagName('tag')
返回对所有tag标签引用的集合
返回值:数组
设置元素样式
ele.style.styleName=styleValue
设置ele元素的CSS样式
ele.innerHTML
返回ele元素开始和结束标签之间的HTML
ele.innerHTML="html"
设置ele元素开始和结束标签之间的HTML内容为html
获取属性
ele.getAttribute('attribute')
获取ele元素的attribute属性
获取标签属性语法: DOM对象.属性 如p.id
自定义属性必须通过getAttribute()得到
设置属性
ele.setAttribute('attribute',value)
在ele元素上设置属性
删除属性
ele.removeAttribute('attribute')
HTML事件
关于this的指向
在事件触发的函数中,this是对该DOM对象的引用
DOM0级事件
ele.事件 = 执行脚本
在DOM对象上绑定事件
执行脚本可以是一个匿名函数,也可以是一个函数的调用
鼠标事件
onload 页面加载时触发
window.onload = function(){
//代码
}
onclick 鼠标点击时触发
onmouseover 鼠标滑过时触发
onmouseout 鼠标离开时触发
onfoucs 获得焦点时触发
onblur 失去焦点时触发
onchange 域的内容改变时触发
onsubmit : 表单中的确认按钮被点击时发生
onmousedown : 鼠标按钮在元素上按下时发生
onmousemove : 在鼠标指针移动时发生
onmouseup : 在元素上松开鼠标按钮时触发
onresize : 当调整浏览器窗口的大小时触发
window.onresize = function(){
console.log('我的尺寸被改变了');
}
onscroll : 拖动滚动条滚动时触发
键盘事件
onkeydown : 在用户按下一个键盘按键时发生
onkeypress : 在键盘按键被按下并释放一个键时发生
onkeyup : 在键盘按键被松开时发生
keyCode : 返回onkeypress,onkeydown或onkeyup事件触发的键的值的字符代码,或键的代码
document.onkeydown = function(event){
//event代表事件的状态,如触发event对象的元素,鼠标的位置及状态等
console.log(event.keyCode);
}
<body>
<div>
<p>你还可以输入<span><em id="count">30</em>30</span></p>
<div class="input">
<textarea name="" id="text" cols="70" rows="5"></textarea>
</div>
</div>
<script>
var text = document.getElementById('text');
var total = 30;
var count = document.getElementById('count');
document.onkeyup = function(){
var len = text.value.length;
console.log(len)
var allow = total - len;
count.innerHTML = allow;
}
</script>
</body>
BOM
window
window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.
window.username = 'greentea'; //var username = 'greentea'
window对象的方法
window.alert('content')
显示带有一段消息和一个确认按钮的警告框
window.confirm('message')
显示一个带有指定消息和OK及取消按钮的对话框
返回值:如果用户点击确定,则confirm()返回true,否则返回false
window.prompt('text,defaultText')
参数:
text:要在对话框中显示的纯文本
defaultText:默认的输入文本
返回值:如果用户单击提示框的取消按钮,则返回null,如果单击确定,则返回输入字段当前显示的文本
var message = window.prompt('请输入您的星座',"天蝎座");
window.open(pageURL,name,parameters)
打开一个新的浏览器窗口或查找一个已命名的窗口
参数:
pageURL:子窗口路径
name:子窗口句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
parameters:窗口参数(各参数用逗号分隔)
window.close
定时器
超时调用
setTimeout(code,millisec)
在指定的毫秒数后调用函数或计算表达式
参数:
1.code:要调用的函数或要执行的JavaScript代码串
2.millisec:在执行代码前需等待的毫秒数
说明:
setTimeout()只执行code一次,如果要多次调用,可以让code自身在此调用setTimeout()
清除超时调用
clearTimeout(id)
取消setTimeout()
参数:
id:由setTimeout()返回的ID值,该值标识要取消的延迟执行代码块
//window.setTimeout('alert("hello")',2000);
var timeout1 = setTimeout(function(){
alert('hello');
},2000)
clearTimeout(timeout1);
间歇调用
setInterval(code,millisec)
每隔指定的时间执行一次代码
参数:
1.code:要调用的函数或要执行的JavaScript代码串
2.millisec: 周期性 执行或调用code之间的时间间隔,以毫秒计
清除间歇调用
clearInterval(id)
取消setInterval()
参数:
id:由setInterval()返回的ID值,该值标识要取消的延迟执行代码块
var num = 1,
max = 10,
tiemer = null;
//每隔1秒钟num递增一次,直到num的值等于max清除
//间歇方法实现
timer = setInterval(function(){
console.log(num)
num++;
if (num > max) {
clearInterval(timer);
}
},1000)
//超时方法实现
function inCreamentNum(){
console.log(num);
num++;
if (num<=max) {
setTimeout(inCreamentNum,1000);
}else{
clearTimeout(timer);
}
}
timer = setTimeout(inCreamentNum,1000)
location
location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航的功能,它既是window对象的属性,也是document对象的属性
location对象的属性
location.href
返回当前加载页面的完整URL
location.hash
放回URL中的hash(#号后 跟0或多个字符),如果不包含则返回空字符串
<body>
<div class="box1" id="top"></div>
<div class="box2"></div>
<input type="button" value="back" id="btn">
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
location.hash = "#top";
}
</script>
</body>
location.host
返回服务器名称和端口号(如果有)
location.hostname
返回不带端口号的服务器名称
location.pathname
返回URL中的目录和(或)文件名
location.port
返回URL中指定的端口号,如果没有,返回空字符串
location.protocol
返回页面使用的协议
location.search
返回URL的查询字符串,这个字符串以问号开头
location对象的方法
位置操作
改变浏览器位置的方法: location.href
location对象其他属性也可以改变URL: location.hash location.search
location.replace()
location.replace(url)
重新定向URL
使用location.replace不会在历史记录中生成新记录
setTimeout(function(){
//三种方法皆可
// location.href = 'http://www.baidu.com';
// window.location = 'http://www.baidu.com';
location.replace('http://www.baidu.com');
},2000)
location.reload()
重新加载当前显示的页面
说明:location.reload() 有可能从缓存中加载
location.reload(true) 从服务器重新加载
history
history对象保存了用户在浏览器中访问页面的历史记录
history.back()
回到历史记录的上一步
相当于使用了history.go(-1)
history.forward()
回到历史记录的下一步
相当于使用了history.go(1)
screen
screen对象属性
screen.availWidth
返回可用的屏幕宽度
screen.availHeight
返回可用的屏幕高度
补充
window.innerWidth
window.innerHeight
获取窗口文档显示区的高度和宽度
Navigator
userAgent
用来识别浏览器名称,版本,引擎以及操作系统等信息的内容
var explorer = navigator.userAgent;
console.log(explorer);
//Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
