BOM浏览器对象模型

BOM(Browser Object Model) 浏览器对象模型 操作浏览器api和接口

1.打开链接

    返回一个窗口对象                                                                                                                              w =  window.open(url,"_blank",'width=300px,height=300px');

    新窗口宽高
    w.resizeTo(400,400);

    新窗口位置
    w.moveTo(100,100);

    关闭窗口
    w.close();

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>打开页面</button><button>关闭窗口</button><script>var btn1 = document.querySelector('button');var btn2 = document.getElementsByTagName('button')[1];btn1.onclick = function(){// 打开一个链接  一个页面w =  window.open('https://baidu.com','_blank','width=600px,height=600px');console.log(w,'窗口对象');// 控制新窗口打开宽高 w.resizeTo(400,400);//  控制窗口打开位置 x y w.moveTo(200,200);}btn2.onclick = function(){// 关闭窗口w.close();}</script>
</body>
</html>

浏览器运行结果如下:

 

2.系统对话框

    alert() 弹框
    confirm() 确认框 
    prompt() 提示输入框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 弹框 alert('我是一个弹框');// 确认框 var res = confirm('您确定吗');//返回值true或者falseconsole.log(res);if(res){console.log('删除成功')}else{console.log('取消删除')}// 提示框var res = prompt('请输入您的姓名');console.log(res);</script>
</body>
</html>

浏览器运行结果如下:

 

3.location对象和history对象

   加载当前文档相关信息 提供导航功能

      window.location document.location  location 单独使用
      host 
      hostname
      port
      protocol 
      pathname
    1.assign() 打开页面 url  新增一条历史记录
    2.replace(url) 替换页面  不会新增历史记录
    3.reload() 刷新页面 true/false

    length 访问过得网址列表数
    forward() 前进一个历史记录
    back()  后退一个历史记录
    go()  前进或者后退 number

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>跳转页面</button><button>替换页面</button><button>刷新页面</button><button>前进下一个历史记录栈页面</button><script>// console.log(location,'加载当前窗口文档相关信息,提供导航功能');// console.log(location === window.location);// console.log(location === document.location);// console.log(window.location === document.location);var btn1 = document.body.children[0];var btn2 = document.body.children[1];var btn3 = document.body.children[2];var btn4 = document.body.children[3];btn1.onclick = function(){// 页面跳转 并且会在浏览器产生一条历史记录location.assign('./4-网易严选滚动.html')}btn2.onclick = function(){// 页面替换 将页面替换为页面 不会在浏览器产生一条历史记录location.replace('./4-网易严选滚动.html')}btn3.onclick = function(){// 刷新页面 true/false true表示请求服务器资源 false请求浏览器缓存location.reload(true);}btn4.onclick = function(){// 前进到下一个历史记录栈// history.forward();// 前进一个下一个历史记录页面history.go(1)}console.log(history.length);</script>
</body>
</html>

浏览器运行结果如下:

 

4.超时调用和间歇调用

    超时调用:超过等待得时间函数执行一次 返回值返回id
    id = setTimeout(function(){

    },wait) 
    clearTimeout(id)
    间歇调用:每隔一段时间函数执行一次 返回值返回id
    id =  setInterval(function(){

    },time)
    clearInterval(id)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div></div><script>/*** 超时调用 * 超过wait时间后执行函数一次  wait单位毫秒 * setTimeout(函数,wait) 定时器* 返回一个定时器id * 取消超时调用 clearTimeout(id)*///  var id = setTimeout(function(){//   console.log('我是超时调用')//  },2000);// //  取消超时调用//  clearTimeout(id);//  console.log(id);/*** 间歇调用 setInterVal * 参数:函数 间隔时间* 每隔间隔时间函数执行一次 返回值是id* 取消间歇调用clearInterval(id)*/// var id = setInterval(function(){//   console.log('我被调用了')// },1000);// // 取消间歇调用// clearInterval(id);// console.log(id);var div = document.querySelector('div');div.innerHTML = new Date().toLocaleString();setInterval(function(){div.innerHTML = new Date().toLocaleString()},1000)</script>
</body>
</html>

浏览器运行结果如下:

 

5.ajax 

     异步JavaScript和XML,结合HTML、XML、CSS和服务器进行通信和数据交互得一种方法
            可以动态更新局部数据不需要刷新页面。需要连接自己的服务器接口

  5.1get有参 无参
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.min.js"></script>
</head>
<body><script>// 1.创建XMLHttpRequest请求实例var xhr = new XMLHttpRequest();var params = {page:1,pageSize:10};// 将js对象转为查询字符串 ?page=1&pageSize=10var parseObj = Qs.stringify(params);// console.log(parseObj);// 2.打开一个连接xhr.open('get','自己的服务器IP地址:端口号/index/article/pageQuery?'+parseObj);// 3.发送请求xhr.send();// 4.监听响应xhr.onreadystatechange = function(){if(xhr.readyState ===4 && xhr.status===200){// console.log(xhr.response);var res = JSON.parse(xhr.response);// console.log(res);res.data.list.forEach(function(item){// item---> {title:"",content:""}var dt = document.createElement('dt');var dd = document.createElement('dd');dt.innerHTML = item.title;dd.innerHTML = item.content;document.body.appendChild(dt);document.body.appendChild(dd);})}}</script>
</body>
</html>

浏览器运行结果如下:


  5.2post 有参 参数格式
        5.2.1 post-json请求
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 1.创建XMLHttpRequest请求实例var xhr = new XMLHttpRequest();var form = {username:'admin2',password:123321}// 2.打开一个连接xhr.open('post','自己的服务器地址');// 设置请求头数据格式为json格式xhr.setRequestHeader('Content-Type','application/json')// 3.发送请求xhr.send(JSON.stringify(form));// 4.监听响应xhr.onreadystatechange = function(){if(xhr.readyState ===4 && xhr.status===200){console.log(JSON.parse(xhr.response))}}</script>
</body>
</html>

控制台运行结果如下:

        5.2.2 post-表单请求
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.min.js"></script>
</head>
<body><script>// 1.创建XMLHttpRequest请求实例var xhr = new XMLHttpRequest();// 2.打开一个连接xhr.open('post','自己的服务器地址');var params = {username:"狗蛋123",password:123321}// 将js对象转为表单格式数据(查询字符串)传给后端 var formObj = Qs.stringify(params);// 设置请求头格式为表单格式 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');// 3.发送请求xhr.send(formObj);// 4.监听响应xhr.onreadystatechange = function(){if(xhr.readyState ===4 && xhr.status===200){console.log(JSON.parse(xhr.response))}}</script>
</body>
</html>

控制台运行结果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/206033.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

原神:夏洛蒂是否值得培养?全队瞬抬治疗量不输五星,但缺点也很明显

作为四星冰系治疗角色&#xff0c;夏洛蒂的实战表现可以说相当让人惊喜。不仅有相当有意思的普攻动作以及技能特效&#xff0c;而且她还有治疗和挂冰等功能性。下面就来详细聊聊夏洛蒂是否值得培养。 【治疗量让人惊喜&#xff0c;但也有缺点】 说实话&#xff0c;在使用夏洛蒂…

陶陶摘苹果、跳跃游戏

1. 陶陶摘苹果 题目描述&#xff1a; 陶陶家的院子里有一棵苹果树&#xff0c;每到秋天树上就会结出 10 个苹果。苹果成熟的时候&#xff0c;陶陶就会跑去摘苹果。陶陶有个 30 厘米高的板凳&#xff0c;当她不能直接用手摘到苹果的时候&#xff0c;就会踩到板凳上再试试。 现在…

Spring第三课,Lombok工具包下载,对应图书管理系统列表和登录界面的后端代码,分层思想

目录 一、Lombok工具包下载 二、前后端互联的图书管理系统 规范 三、分层思想 三层架构&#xff1a; 1.表现层 2.业务逻辑层 3.数据层 一、Lombok工具包下载 这个工具包是为了做什么呢&#xff1f; 他是为了不去反复的设置setting and getting 而去产生的工具包 ⚠️工具…

(5h)Unity3D快速入门之Roll-A-Ball游戏开发

DAY1&#xff1a;Unity3D安装 链接 DAY2&#xff1a;构建场景&#xff0c;编写代码 链接 内容&#xff1a;WASD前后左右移动、摄像机跟随 DAY3&#xff1a;待更新 DAY4&#xff1a;待更新 DAY5&#xff1a;待更新

渗透测试|HW蓝队

记录某个对某个钓鱼事件中获取的钓鱼样本进行分析&#xff0c;以及简单的制作学习 样本行为分析 首先看到是 qq 邮箱发来的某个压缩包大概本身是带密码的&#xff0c;反手就丢到虚拟机先看下大概文件&#xff0c;解压后是这样的一个快捷方式 然后打开属性查看快捷方式&#x…

流程不会搭建?集简云上线AI智能创建流程功能,辅助您更简单地创建自动化流程

用户在使用集简云创建流程时&#xff0c;经常会遇到的两个问题&#xff1a; 1. 不知道要如何选择应用动作&#xff0c;和动作的执行顺序&#xff1b; 2. 应用动作设置中的字段匹配&#xff0c;不知道要如何选择对应的字段&#xff1b; 集简云基于大量历史数据积累与自训练AI模…

【001】sg-exam在线考试项目分析-项目结构技术栈

开源项目地址&#xff1a;https://gitee.com/wells2333/sg-exam 系统中服务器端 采用springboot mysql &#xff0c;oss 存储采用 七牛云 或minio 。项目依赖管理采用 gradle. 服务器端模块 &#xff1a; 项目启动入口在&#xff1a; 后台管理系统H5代码&#xff1a; PC端H…

k8s部署es和skywalking

使用k8s部署es和skywalking skywalking介绍 skywalking架构 整个架构&#xff0c;分成上、下、左、右四部分&#xff1a; 上部分 Agent &#xff1a;负责从应用中&#xff0c;收集链路信息&#xff0c;发送给 SkyWalking OAP 服务器。目前支持 SkyWalking、Zikpin、Jaeger 等…

java后端自学总结

自学总结 MessageSource国际化接口总结 MessageSource国际化接口 今天第一次使用MessageSource接口,比较意外遇到了一些坑 messageSource是spring中的转换消息接口&#xff0c;提供了国际化信息的能力。MessageSource用于解析 消息&#xff0c;并支持消息的参数化和国际化。 S…

Oracle SQL优化

1、书写顺序和执行顺序 在Oracle SQL中&#xff0c;查询的书写顺序和执行顺序是不同的。 1.1SQL书写顺序如下&#xff1a; SELECTFROMWHEREGROUP BYHAVINGORDER BY 1.2 SQL执行顺序 FROM&#xff1a;数据源被确定&#xff0c;表连接操作也在此步骤完成。 WHERE&#xff1a;对…

OpenAI再次与Altman谈判;ChatGPT Voice正式上线

11月22日&#xff0c;金融时报消息&#xff0c;OpenAI迫于超过700名员工联名信的压力&#xff0c;再次启动了与Sam Altman的谈判&#xff0c;希望他回归董事会。 在Sam确定加入微软后&#xff0c;OpenAI超700名员工签署了一封联名信&#xff0c;要求Sam和Greg Brockman&#x…

Web安全漏洞分析-XSS(下)

随着互联网的迅猛发展&#xff0c;Web应用的普及程度也愈发广泛。然而&#xff0c;随之而来的是各种安全威胁的不断涌现&#xff0c;其中最为常见而危险的之一就是跨站脚本攻击&#xff08;Cross-Site Scripting&#xff0c;简称XSS&#xff09;。XSS攻击一直以来都是Web安全领…

Flutter 控件查阅清单

为了方便记录和使用Flutter中的各种控件&#xff0c;特写此博客以记之&#xff0c;好记性不如烂笔头嘛&#xff1a;&#xff09; 通过控件的首字母进行查找&#xff0c;本文会持续更新 控件目录 AAppBar BCContainerColumn &#xff08;列&#xff09; DDivider (分割线) EElev…

汽车智能座舱/智能驾驶SOC -1

看到华为&小康的 AITO问界M6、M7各种广告营销、宣传、测评、好评如潮水般席卷网络各APP平台。翻看了中信和海通对特斯拉M3和比亚迪元的拆解报告&#xff0c;也好奇华为的汽车芯片平台又能做出哪些新花样&#xff0c;下面是Mark开头&#xff0c;也学习下智能座舱和智能驾驶芯…

一个基于.NET Core开源、跨平台的仓储管理系统

前言 今天给大家推荐一个基于.NET Core开源、跨平台的仓储管理系统&#xff0c;数据库支持MSSQL/MySQL&#xff1a;ZEQP.WMS。 仓储管理系统介绍 仓储管理系统&#xff08;Warehouse Management System&#xff0c;WMS&#xff09;是一种用于管理和控制仓库操作的软件系统&…

go学习之文件操作与命令行参数

文章目录 一、文件操作1.基本介绍2.常用文件操作函数和方法3.关于文件操作应用实例4.写文件操作应用实例&#xff08;创建文件并写入文件&#xff09;1&#xff09;基本介绍2&#xff09;基本应用实例-方式一 5.判断文件是否存在6.统计英文、数字、空格和其他字符数量 二、命令…

软件工程(九)

软件过程 定义 是软件生存周期中的一系列相关软件工程活动的集合&#xff0c;活动是任务的集合。 任务是将输入变换为输出的操作。 活动的执行可以是顺序的&#xff0c;重复的&#xff0c;并行的、嵌套的。 每一个软件过程由一组工作任务、项目里程碑、软件工程产品和交付…

leetcode 611. 有效三角形的个数(优质解法)

代码&#xff1a; class Solution {public int triangleNumber(int[] nums) {Arrays.sort(nums);int lengthnums.length;int n0; //三元组的个数//c 代表三角形最长的那条边for (int clength-1;c>2;c--){int left0;int rightc-1;while (left<right){if(nums[left]nums[r…

消息队列进阶-3.消息队列常见问题解决方案

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44…

2、用命令行编译Qt程序生成可执行文件exe

一、创建源文件 1、新建一个文件夹&#xff0c;并创建一个txt文件 2、重命名为main.cpp 3、在main.cpp中添加如下代码 #include <QApplication> #include <QDialog> #include <QLabel> int main(int argc, char *argv[]) { QApplication a(argc, argv); QDi…