JS Browser BOM

最新推荐文章于 2022-05-20 18:33:54 发布

向上取整

最新推荐文章于 2022-05-20 18:33:54 发布

阅读量195

点赞数

分类专栏： web开发文章标签： web javascript

本文链接：https://blog.csdn.net/qq_42782782/article/details/103286795

版权

web开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS Browser BOM

浏览器对象
window窗口对象
location地址栏对象
history历史记录对象
screen显示器对象
DOM对象

1.window 对象

1-1方法：

1-1.1与弹出有关：

方法名	效果
alert()	弹出文本内容
confirm()	弹出内容有按钮，有返回值，确定返回值为true
prompt()	弹出内容有输入框，有返回值，返回内容为输入框的

1-1.2与打开关闭有关：

open(); 打开浏览器窗口

newWindow = open("https://www.w3school.com.cn/jsref)

close();关闭浏览器窗口，谁用谁关

newWindow.close();

1-1.3与定时器有关

setTimeout(); 指定毫秒结束后调用函数
参数
1.funcation
2.time
返回值：唯一标识，用于取消定时器
clearTimeout();
setInterval();按照指定周期的来调用函数
clearInterval();取消调用

//定义调用方法
function fun4() {
                alert('boom~~~');
            }
//每一秒中调用一次该方法            
var id = setInterval("fun4();",1000);
//取消调用
clearInterval(id);

1-2特点

1.不需要创建直接使用，window.funcation();
2.window引用可以省略，funcation();

1-3属性

1.获取其他BOM对象

history
location
navigatior
screen

2.获取DOM对象
document

2.Location对象

创建
1. window.location
2. location
方法
reload(),重新加载当前文档，刷新
属性
href 设置返回完整的URL

//跳转页面
location.href = "https://www.w3school.com.cn/jsref/dom_obj_window.asp";

3.DOM

核心DOM - 针对任何结构化文档的标准模型

Document:文档对象
ELement：元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象，其他五个对象的父对象

在这里插入图片描述

删除表格例子

<body>
//初始化一个表格
<table>
        <caption>学生信息表</caption>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>岳不群</td>
            <td>？</td>
            <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
        </tr>
    </table>
</body>
	<script>
	//删除一行表格
	function delTr(obj) {
			//获取table对象
           var par = obj.parentNode.parentNode.parentNode;
           //table对象移除自己的子对象tr
           par.removeChild(obj.parentNode.parentNode);
        }
	</script>

内容修改

<div id="div1">
        div
    </div>
    <script>
        var div = document.getElementById("div1");
        div.innerHTML += "<input type='text'>";
        </script>

样式控制

<div id="div4">
        你好
    </div>

    <script>
        var div = document.getElementById("div4");
        div.onclick = function () {
            div.style.color = "#F51547";
        }
    </script>

事件

点击事件

onclick 点击事件
ondblclick 双击事件

焦点事件

onblur 失去焦点，用于表单检验
onfocus 获得焦点

鼠标事件

onmousedown 鼠标按钮被按下
onmouseup 鼠标按键被松开
onmousemove 鼠标被移动
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开

键盘事件：

onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。

选择和改变

onchange 域的内容被改变。
onselect 文本被选中。

表单事件：

onsubmit 确认按钮被点击。
onreset 重置按钮被点击。

向上取整

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS Browser BOM

JS Browser BOM浏览器对象window窗口对象location地址栏对象history历史记录对象screen显示器对象DOM对象1.window 对象1-1方法：1-1.1与弹出有关：方法名效果alert()弹出文本内容confirm()弹出内容有按钮，有返回值，确定返回值为trueprompt()弹出内容有输入框，有返回...
复制链接

扫一扫