导航、BOM、常用对象、刷新：普通刷新和强制刷新、弹窗、cookie及其案例、本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效

最新推荐文章于 2024-03-27 11:44:51 发布
最新推荐文章于 2024-03-27 11:44:51 发布
阅读量652 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44791674/article/details/108665258
版权
这篇博客主要介绍了JavaScript中的DOM导航、BOM对象如Window和Location、页面刷新和弹窗方法，以及Cookie的使用和在Chrome本地环境下操作Cookie的注意事项。详细解释了如何在JavaScript中创建和读取Cookie，并探讨了Chrome不支持本地操作Cookie的原因。
摘要由CSDN通过智能技术生成

导航

Document是根节点
parentNode:获取父节点
childNodes：获取所有子节点
firstChild：第一个子节点
lastChild：获取最后一个子节点
在这里插入图片描述

BOM

概念browser object model

常用对象

Window：窗口，浏览器的窗口
我们定义的全局变量和全局函数都是window对象的属性和方法
在这里插入图片描述
全局变量是window的属性。
全局函数是window的方法：
Window.innerWidth
Window.innerHeight
常用的方法：
Open：打开一个新的窗口，要传三个参数；第一个为将要打开的窗口路径
第二个：打开的方式 ； 第三个为对于新打开浏览器的描述（宽，高等等）

var myWindow=window.open("https://www.baidu.com/","_blank","width=200,height=300");
//close：关闭一个窗口
myWindow.close();
//moveTo：移动一个窗口，以窗口的左上角为坐标起点
myWindow.moveTo(200,200);
//focus：使窗口获得焦点
myWindow.focus();
//resizeto：改变窗口的大小
myWindow.resizeTo(1000,1500);

screen:屏幕 也是window下面的一个对象，在使用的时候可以用window.screen
也可以省略window
屏幕的常用属性：宽，高；可用宽与可用高（可用高不包括任务栏）
在这里插入图片描述
**Location：**地址
**常用属性：**href完整路径 port端口号 pathname路径名
Protocol：协议
常用方法
打开一个新的路径（）窗口
LOCATION.ASSIGN(“HTTP://WWW.BAIDU.COM/”);

刷新：普通刷新和强制刷新

在这里插入图片描述
如果传值为TRUE，那么就是强制刷新
History：历史记录
记录当前窗口的历史，可以进行页面的转换
方法：back—回到上一页
Forward—进入下一页
Go—进入确定的那一页（-1回到上一页）
History.back()
History.forward()
History.go(-1)

弹窗

Alert（）：警告提示框，也是window下的方法(window.alert())，window可以省略不写
在这里插入图片描述
Prompt（“请输入内容”，“默认值”）信息提示输入框，也是window下的方法，window也可以省略不写，当我们点击确定时，才会把值返回，否则为空
在这里插入图片描述
在这里插入图片描述
Confirm（“提示的信息”）确认框，也是window下的方法，window也可以省略不写
当点击确定的时候，返回true，如果点取消，返回false
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

cookie

Cookie的作用：在本地浏览器储存数据，经常用于记住账号等等
**Cookie组成：**键值对的形式
Username=asdasd pwd=123456 phone=13512633908
有效期：expires=今天以后的时间
存储cookie
按照cookie的形式写好一个字符串，然后把它赋值给document.cookie，浏览器就会缓存这个cookie，可以存储多个键值对，但是键的名字不能重复

导航

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<<
最低0.47元/天 解锁文章
坚持曾今曾坚持的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
获取cookie强制刷新页面的js方法
qq5833547的博客
12-27 2794
var pageFresh = getCookie("pagefresh"); if (pageFresh != "ok") { document.cookie = 'pagefresh=ok'; location.reload(true); // 强制获取cookie从服务器取数据 } //方法刷新 function getCookie(name) { var ar
jsBOM的刷新页面window.location.reload()
m0_72739132的博客
05-19 325
【代码】jsBOM的刷新页面window.location.reload()
jquery删除cookie的办法
生而为人我很抱歉
10-14 1606
这样也删不掉只会将cookie设置为字符串’null’注意清理时也需要加path参数，不然删不掉。
BOM对象的学习笔记
m0_53695581的博客
09-09 98
BOM对象可以表示浏览器的一个实例，我们可以通过BOM对象来对浏览器进行一些操作。 Windows对象方法 系统对话框 alert( )方法，可以弹出一个提示框 prompt( )方法，弹出一个输入框。参数（可选）a.要在对话框中显示的文本。b.输入框中默认的文本。 confirm( )方法，弹出一个带有指定消息和取消按钮的对话框。 窗口操作 windows.open( )方法，可以打开一个新窗口，如果要在当前窗口打开，可以加上”_self“参数 windows...
chrome浏览器(高版本、低版本) cookie无法设置/刷新无法保存/爆红问题
xueqinglalala的博客
02-28 6194
一、新版chrome浏览器解决方案： 如果你的谷歌浏览器版本较新 在谷歌浏览器中搜索chrome://flags/ 搜索Partitioned cookies ，改为Enabled 重启浏览器后生效（如果重启浏览器不生效，建议重启电脑再试试） 二、旧版chrome浏览器解决方案： 在浏览器地址栏里输入：chrome://flags/ 搜索same-site 如图所示 将前两项 禁用 即可 设置后重启浏览器（如果重启浏览器不生效，建议重启电脑再试试） ...
Javascript BOM学习小结(六)
11-23
JavaScript BOM（浏览器对象模型）是JavaScript与浏览器交互的核心机制，允许开发者操作浏览器窗口、导航、弹出对话框等。由于BOM并没有统一的标准，不同的浏览器对它的实现可能存在差异，因此在编写涉及BOM的代码时...
Javascript实现购物车功能的详细代码
12-09
在本示例当中，用到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知识点，同时，采用三层架构方式对购物车进行设计，对javascript的综合应用较强，对javascript初学者进阶有一定的益处。 请看主页...
php手册大全，jquery手册，js手册，smarty，手册
08-21
3. BOM（浏览器对象模型）：处理浏览器窗口、导航、历史记录和定时器等。 4. JavaScript高级特性：闭包、模块化（如AMD、CMD、ES6模块）、异步编程（Promise、async/await）。 5. ES6及后续版本新特性：let和const、...
Note-Frontend:前端知识案例汇总--实践很重要!!!
05-15
扩展库1.jquery2.W3C1.HTMLcanvastable2.CSS3.JS Web API1.DOM 操作2.BOM 操作3.事件绑定4.ajax5.扩展库4.HTTP5.存储1.cookie2.session3.token4.localstorage5.sessionStorage6.indexDB6.websocket三.开发环境1.git2...
jQuery获取cookie值及删除cookie用法实例
11-23
本文实例讲述了jQuery获取cookie值及删除cookie用法。分享给大家供大家参考，具体如下： cookie在jquery中有指定的cookie操作类，这里先来介绍在使用cookie操作类时的一些问题，然后介绍正确的使用方法。 使用JQuery操作cookie时 发生取的值不正确的问题： 结果发现cookie有四个不同的属性: 名称，内容，域，路径 $.cookie('the_cookie'); // 读取 cookie $.cookie('the_cookie', 'the_value'); // 存储 cookie $.cookie('the_cookie', 'the_value
php-1:php-js-html-css
05-30
2. JavaScript：这是一种轻量级的解释型编程语言，主要用于浏览器端，实现客户端的动态效果和交互。JavaScript与PHP不同，它运行在用户端，可以改变HTML和CSS。核心知识点包括： - 基本语法：变量、数据类型、操作...
Bom的琐碎知识点（window.open，定时器，计时器，弹窗，页面跳转，页面刷新，history历史对象）
最新发布
zss_base的博客
03-27 258
prompt :弹出一个输入文本框弹窗，接受的 text 参数为显示在弹窗上的提示信息，defaultText 参数为显示在文本框内的默认信息，当点击确定时返回文本框内容，如果文本框内容为空则返回空字符串；history对象： 保存着浏览器的历史对象，载指定位置的页面，
jquery删除cookie
chshxing2011的博客
06-29 1737
最近在公司项目要求从Android转到了JavaWeb，有点无奈。在做登录，和退出登录时，不可避免的会用到Cookie和删除cookie。 cookie在服务上创建，保存在客户端。前端删除cookie的使用场景，取消记住密码与自动登录 删除方法： 1，导入两个jquer 插件 <script src="../js/jquery-3.2.1.min.js"></s...
js-控制页面强制刷新（localStorage或者cookie方式）
water880521的博客
09-05 3273
//处理返回投票首页不刷新页面 voteIndex.js var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle") if(strStoreDate == 2){ //首次进入 strStoreDate==null 页面返回strSt
基础的BoM的基本操作
码小目的进化路程
03-31 251
就是一整套操作 浏览器 相关内容的属性和方法(浏览器对象操作模型) 基本操作注意包括: 浏览器的滚动条 / 浏览器的弹出层 /浏览器的地址栏 /浏览器的标签页 /浏览器历史记录...等等. BOM 最大的特点 在各个浏览器的表现形式不一样 / 都是 window.xxx 在书写的时候, 可以省略 window. 不写 ( ) 标准语法:window.alert('码小目') 省略写法: alert('码小目') 浏览器的弹出层 1. 提示框 ...
jq 获取cookie 以及强制刷新后退
07-19 216
1：jq本身没有获取cookie的函数，js看起来比较复杂，用起来，感觉有些鸡肋，什么作用域，什么过期时间，看起来一团糟。 最近弄了个项目，找一找，原来用jquery.cookie.js很爽直接 $.cookie('mycity',city, {path : '/',expires:1})...
在JavaScript中更新Cookie
cumao2792的博客
09-13 1571
Actually updating a cookie is slightly different from just replacing a cookie in that the new value we want to place in the cookie is dependent in some way on whether the cookie already exists and if...
JS中cookie的设置，读取，删除，更新覆盖等
热门推荐
学如逆水行舟
09-12 1万+
假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需要使用JS来引用temp的变量值，对于JS中的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会重新载入，即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值，那么如何来设置和读取cookie呢？
JavaScript浏览器对象编程：DOM与BOM操作
在JavaScript中，浏览器对象编程（Browser Object Model，简称BOM）允许我们与浏览器环境进行交互，包括与窗口、历史、位置和文档对象进行操作。本课程由刘素芳主讲，主要涵盖了以下几个核心知识点： 1. DOM模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值