js中如何操作BOM对象?js中操作BOM对象的方法
本篇文章给大家带来的内容是关于js中如何操作BOM对象?js中操作BOM对象的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
三个核心对象:
window:
[window].alert 只存在提示信息 alert(message)
[window].prompt 允许用户手动输入 var obj=prompt(message)
[window].confirm 帮助用户做判断 当用户点击确定的时候 返回true,
点击取消的时候 返回false
open(url) 打开指定的url地址
close() 关闭 当前的标签页
confirm.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>confirm弹层</title> <script> function del(){ var flag = confirm('您确定要删除吗?'); if(flag){ alert("拜拜"); } else{ alert("我们还嫩能够继续。"); } } function toBaidu(){ open('https://www.baidu.com'); } </script></head><body> <!--删除按钮--> <!--<buttun onclick="javascript:confirm('您确定要删除吗?')">删除</buttun>--> <buttun onclick="del()">删除</buttun> <buttun onclick="toBaidu()">百度</buttun> <a href="history.html">去history页面</a> <button onclick="javascript:history.forward()">前进</button> </body> </html>
success.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>欢迎页</title> <script> function closeThis(){ close('./success.html'); } </script></head><body> <img src="./img/gaoyuanyuan.png" /> 欢迎您! <button onclick="closeThis()">关闭</button> </body> </html>
setTimeout(function(){},毫秒) 指定时间延迟操作 只操作一次 var i=setInterval(function(){},毫秒) 指定时间延迟操作 操作多次(每隔一段时间操作一次) clearInterval(i) 清空定时特效 onload 事件:等待页面上的所有元素加载完毕
timing.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>定时函数</title> <script> function print(){ setTimeout( function(){ alert("我叫jhz"); },5000 ); } print(); </script> </head><body> <input name="btn" type="button" value="定时" onclick="print();" /> </body> </html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>定时函数</title> <script> window.onload=function(){ //保证页面上的元素加载完毕后 var btn=document.getElementsByTagName('button'); alert(btn); // 元素中的文本 innerText alert(btn.innerText); } </script> </head><body> <button id="btn">点击获取验证码</button></body></html>
history.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>history对象</title></head><body> <!--<button onclick="javascript:history.forward()">前进</button>--> <button onclick="javascript:history.back()">后退</button> </body> </html>
history:window
history:back() 回退===>go(-1)
forward() 前进 ===> go(1)
go(index) 即可前进 又可后退
注:这里的前进后退与浏览器上的前进后退按钮是一样的效果。
当我们从一个网页*问一个链接后可以后退回网页,然后在网页上可以再次前进到刚才跳转的链接页面。(犹如连续的上一步和下一步似的)
location: window
host:主机地址+端口号 hostname:主机名 port:端口号 protocol:协议 href:发送请求到指定URL reload() 刷新当前页面 replace(url) 替换 以新的页面替换当前页面
location.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>location</title> <script> function toBaidu(){ //get请求 location.href="http://www.baidu.com"; Math Date } </script></head><body> <button onclick="javascript:alert(location.host)">查看主机地址</button> <button onclick="javascript:alert(location.hostname)">查看主机名</button> <button onclick="javascript:alert(location.port)">查看端口</button> <button onclick="javascript:alert(location.protocol)">查看协议</button> <button onclick="javascript:alert(location.href)">查看href</button> <button onclick="toBaidu()">去百度</button> <button onclick="javascript:location.reload()">刷新</button> <!--get请求--> <button onclick="javascript:location.replace('http://www.baidu.com')">replace百度</button></body></html>
—文档对象 XML
document.getXXX()
var obj=document.getElementById(“id属性值”) 根据页面元素的id获取元素对象 返回的是单个节点对象
—————————–返回的都是节点集合————————-
document.getElementsByName(“name属性值”)根据页面元素的name属性获取元素对象
document.getElementsByClassName("class属性值") document.getElementsByTagName("节点名称")
javascript的内置对象的函数
**Math对象:** Math.ceil(number)向上取整 Math.floor(number) 向下取整 Math.round(number)四舍五入 Math.random() 生成0~1的随机数 **Date日期对象:** getDate = function() {}; // 获取当前日期(天) } getDay = function() {}; //一周中的第几天 } getMonth = function() {};// 一年中的第几月 } getFullYear = function() {};// 返回年份 4位数 } getHours = function() {}; //一天的第几个小时 } getMilliseconds = function() {}; //获取毫秒 当前分钟 } getMinutes = function() {};//分钟 当前小时 } getSeconds = function() {}; //秒 当前分钟 } getTime = function() {}; //时间 1970年1月1日 到现在的毫秒数
date.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>date</title> <script> window.onload=function(){ var date = new Date(); alert(date.getDate());//获取当前日期(天) alert(date.getDay());//一周中的第几天 alert(date.getMonth());//一年中的第几月 0-7(cong0开始) alert(date.getFullYear());// 返回年份 4位数 alert(date.getHours());//一天的第几个小时 alert(date.getMilliseconds());//获取毫秒 当前分钟 alert(date.getMinutes ());//分钟 当前小时 alert(date.getSeconds ());//秒 当前分钟 alert(date.getTime());//时间 1970年1月1日 到现在的毫秒数 document.write("结束。"); } </script></head><body></body></html>
相关推荐:
以上就是js中如何操作BOM对象?js中操作BOM对象的方法的详细内容,更多请关注其它相关文章!