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对象的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

本文系列在2017年中期进行了最新信息和新示例。 在此JSON示例中,我们将研究如何使用JSON格式将简单值存储在文件中。 使用键值对符号,我们可以存储任何类型的

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

增强您的代码演示:开发人员的10个语法荧光笔 在您的网站或博客上共享代码片段是开发人员的常见实践。 选择合适的语法荧光笔可以显着提高可读性和视觉吸引力。 t

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

本文介绍了关于JavaScript和JQuery模型视图控制器(MVC)框架的10多个教程的精选选择,非常适合在新的一年中提高您的网络开发技能。 这些教程涵盖了来自Foundatio的一系列主题

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象,但具体取决于函数的调用方式。 没有当前对象时,this 指代全局对象。在 Web 浏览器中,它由 window 表示。 调用函数时,this 保持全局对象;但调用对象构造函数或其任何方法时,this 指代对象的实例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前,这句话可
