(共566篇)
全部分类
js图片加载状态 es5函数继承-构造函数的继承(2) es5函数继承-非构造函数的继承 jsError:UnexpectedtokeniinJSON js经常变脸的this js计算随机字符串 es5构造函数基础 js柯里化编程 js生成36位随机字符串 js跨域ajax请求获取传递的cookie js获取元素相对于屏幕的位置 js格式化获取到的日期对象xxxx-xx-xxxx:xx js函数式编程 js把url上的参数序列化为对象 js实时预览选择的图片文件 js中的深拷贝与浅拷贝 js函数的prototype属性 js获取浏览器滚动条高度scrollTop js类数组转数组 js改变select元素的值 js千分位加逗号的方法 es5函数继承-构造函数的继承(3) js表单提交的那些事儿 jscookie的作用域 js获取元素计算后的样式 js中的innerHTML方法 js获取DOM元素的方法 jsES5与ES6中的for循环 js向textarea输入tab字符 jsdisplay:none的input元素会默认添加到表单中提交吗 js解读-Function.prototype.apply.call() 认识javascript 在页面中插入JS代码 JS语句和代码块 JS的注释 让浏览器显示不同的弹窗 在页面中输出一些信息 浏览器中的开发者工具 JS中的变量 JS中的原始数据类型 JS中的引用数据类型 原始和引用数据类型的区别 JS中的算数运算符 JS中的赋值运算符 JS中的比较运算符 JS中的逻辑运算符 JS中的三元运算符 运算符的优先级 JS中数据类型的转换 JS流程控制语句之if-else 数据类型的隐式转换 JS流程控制语句之switch JS流程控制语句之for循环 在浏览器中调试JS代码 JS流程控制语句之for循环案例 JS流程控制语句之while循环 JS流程控制语句之do-while循环 JS中函数的声明与使用 JS中函数的参数 JS中函数的arguments JS中函数的返回值 JS中的纯函数 JS中的作用域 JS语句的执行顺序 JS语句的执行顺序2 神奇的this 神奇的this(补充) 改变函数的this 构造函数 函数的继承 函数的prototype属性 对象的创建和使用 处理代码错误和Error对象 数组的声明和使用 数组的length属性 新增或删除数组中的元素 合并多个数组内容 for循环遍历数组 map方法遍历数组 forEach方法遍历数组 every和some遍历数组 includes方法查找元素 indexOf和lastIndexOf方法查找元素 find和findIndex方法查找元素 filter方法筛选元素 sort方法对数组排序 reverse方法翻转数组元素顺序 reduce和reduceRight统计元素 slice提取数组元素 数组方法总结 字符串的声明和使用 字符串的长度length 在字符串中提取字符 在字符串中查找字符 转换字符串大小写 去除字符串前后的空格 拼接和分割字符串 替换字符串 Number对象及其运用 Math对象及其运用 Date对象及其运用 全局函数 编码和解码字符串 把字符串转为数字 判断目标是否是数字 正则表达式 任意一个字符的集合 表示数量的符号 元数据符号 正则中的或 表示边界的符号 记住匹配项和非捕获匹配 正向和反向查找 正向肯定和否定查找 贪婪和非贪婪模式 webAPI中的BOM和DOM window对象 打开或关闭新窗口 设置当前窗口的名称 获取当前窗口的打开状态 获取浏览器的位置和尺寸 操作窗口滚动条 设置和取消定时器 navigator对象 location对象 History对象 Document对象 DOM节点 创建修改或删除节点 检查节点 获取元素节点 获取元素节点两种方式的区别 往元素中插入内容 修改元素内容 获取元素节点的尺寸和位置信息 获取或修改元素标签上的属性 获取和修改元素class属性 关于元素标签属性的一些方法 获取元素的CSS样式 设置元素的CSS样式 js操作元素样式实现css过渡的案例 操作class实现css过渡的案例 连续操作元素样式的案例 星星案例 事件 给对象添加监听事件和侦听函数 单个元素添加多个监听事件 单个事件添加多个侦听函数 事件流 设置一次性的侦听函数 案例-插入多个li元素 移除侦听函数 案例-取消侦听函数 案例-改变图片元素路径 案例-切换多张图片显示状态 事件对象 获取触发事件的对象和监听对象 委托事件 判断事件是否会向上冒泡 鼠标进入和离开元素事件 阻止事件向上冒泡 阻止后添加的侦听函数执行 阻止事件的默认行为 案例-图片轮播 案例-图片自动轮播 案例-图片导航 案例-点击导航后取消自动轮播 模拟触发事件 快速模拟触发事件 判断事件是否被人为触发 自定义事件 点击事件的特有属性 元素滚动事件 判断元素的滚动方向 表单提交事件和重置事件 焦点事件 输入框内容改变事件 下拉框选项改变事件 单选框状态改变事件 多选框状态改变事件 表单控件值发生改变事件 判断页面滚动方向 带滚动效果的轮播图 带滚动效果的轮播图2 带滚动效果的轮播图3 判断元素是否在可视区域内 数字递增效果 JS的逻辑运算符&&和||中发生了什么 JS语法整理补充

jscookie的作用域
[ JS基础 ] 

cookie是保存在浏览器端的一小段数据，会在浏览器下一次向服务器发送请求的时候携带到服务器上，主要用以以下三个方面

一个常规的 cookie 有以下属性

属性 作用
path 定义可以访问到 cookie 的页面路径
doman 定义可以访问到 cookie 的页面域名
expires 定义 cookie 的过期时间，如果没有设置，会在会话被关闭后清理掉
secure 定义 cookie 只允许通过 https 方式传输
HttpOnly 定义了 cookie 只能发送给服务端，而不能被 document.cookie 方法访问到

path 属性

path 属性定义了可以访问 cookie 的页面 url 路径，没有指定的时候，默认是页面所属域名的根路径/，可访问状态如下所示

cookie 路径 访问 url 可访问状态
/ /index.html 可以访问
/ /app/index.html 可以访问
/ /mobile/index.html 可以访问
/app /index.html 不可以访问
/app /app/index.html 可以访问
/app /mobile/index.html 不可以访问
/mobile /index.html 不可以访问
/mobile /app/index.html 不可以访问
/mobile /mobile/index.html 可以访问

也就是说，当 path 定义为/的时候，该域名下任何路径的页面都可以访问到 cookie，如果设置了路径，则只有路径下的页面才可以访问

doman 属性

doman 属性定义了可以访问到 cookie 的域名，在没有指定 doman 属性的时候，设置的 cookie 默认是当前页面的域名，比如在http://test.com/index.html中写入的 cookie，它的默认 doman 是test.com,能且只能被http://test.com/下的页面访问到。

cookie 的 doman 属性 访问 url 可访问状态
test.com test.com/index.html 可以访问
test.com a.test.com/index.html 不可访问
test.com b.test.com/index.html 不可访问
a.test.com test.com/index.html 不可访问
a.test.com a.test.com/index.html 可以访问
a.test.com b.test.com/index.html 不可访问

expires 属性

expires 属性定义了 cookie 的过期时间，如果没有指定这个属性值，默认属于会话 cookie，会在会话结束后被浏览器销毁，这里在 windows 和 mac 下有所不同，windows 下浏览器点击关闭按钮后，会话 cookie 就会被销毁。而 mac 下的浏览器关闭按钮，点击之后只是关闭了当前软件窗口，并没有退出软件，所以要用command+Q的方式，完全退出浏览器，会话 cookie 才会被销毁。

secure 属性

安全的 cookie 应该是通过 https 协议传输给服务器，如果你的 cookie 设置了该属性，该 cookie 就只能通过 https 协议的方式传给服务端

httpOnly 属性

浏览器保存的 cookie，访问页面的时候会根据 cookie 设置的 path 以及 doman 属性，使用document.cookie方法访问到，如果 cookie 在设置的时候，添加了 httpOnly 属性，该 cookie 就不能通过document.cookie方法获取到，只能用于传输给服务端

cookie 可以通过服务器设置，也可以在浏览器中通过脚本设置

php 的设置 cookie 的方法是 setCookie(name,value,expire,path,doman,secure,httpOnly)

1

setCookie('name', 'zhangsan', time()+3600, '/', 'test.com', true, true)

下面是一个通过 js 设置 cookie 的案例

1

document.cookie = "name=zhangsan;path=/;doman='test.com';expires=Wed, 21 Oct 2020 07:28:00 GMT;httpOnly;secure";

通过document.cookie可以获取到当前页面所属域下，所有 cookie 的 name 和 value 信息，如果想查看 cookie 的其他属性，需要在开发者工具中查看

假设我们有两个项目，A 页面：a.test.com/index.html和 B 页面b.test.com/index.html,如果我想在 A 页面中设置一个能够让 A 页面和 B 页面同时访问到的 cookie，应该怎么做呢？很简单，在定义 cookie 的时候，我们把 cookie 的 doman 属性改成这两个页面的超级域即可

1

document.cookie = 'name=zhangsan;doman=.test.com';

test.com/index.html

1
2

// 假设本页面已有cookie: name=zhangsan
console.log(document.cookie);

a.test.com/index.html

1
2

// 假设本页面已有cookie: name=zhangsan
console.log(document.cookie);
两个页面的输出如下页面 cookie
test.com name=zhangsan
a.test.com age=12

我们知道在页面中可以通过document.doman重新定义页面的域，在上面两个页面的输出 cookie 方法前，各自加上代码document.doman='*.test.com'，我们再来看一下页面的输出内容：

假设我们有以下两个页面

test.com/index.html

1
2

<!-- 假设本页面已有cookie: name=zhangsan -->
<img src="http://a.test.com/logo.png" />

a.test.com/index.html

1
2

<!-- 假设本页面已有cookie: age=12 -->
<img src="http://test.com/logo.png" />

在没有插入图片标签的时候，两个页面在开发者工具中显示的 cookie 信息如下

页面 cookie path
test.com name=zhangsan test.com
a.test.com age=12 a.test.com

在 test.com 中插入引用了 a.test.com 服务器中的图片后，开发者工具中显示的 cookie 信息如下：

页面 cookie path
test.com name=zhangsan test.com
test.com age =12 a.test.com
a.test.com age=12 a.test.com

相对应的，在 a.test.com 中插入引用了 test.com 服务器中的图片后，开发者工具中显示的 cookie 信息如下：

页面 cookie path
a.test.com name=zhangsan test.com
a.test.com age =12 a.test.com
test.com name=zhangsan test.com

在 test.com/index.html 页面中获取一下 document.cookie，信息如下

1

name=zhangsan

所以:

在页面中请求资源的时候，如果资源所属域**下有 cookie，这些 cookie 也会在当前页面的开发者工具中显示出来，但**不可以被 document.cookie 获取到

浏览器也可以在请求中把 cookie 传递给服务端，但是这两种传递都和页面所属的域有关，这里就从一些案例中发现 cookie 与域的关系

首先，我在服务端的访问日志中添加了“把 COOKIE 写入日志”的选项(具体怎么添加可以查看 Apache 或者 nginx 官方文档)，我这里以 apache 为例，先在test.com/index.html中添加一段代码，如下：

1
2
3

<!-- 假设本页面已有cookie: name=zhangsan -->
<img src="/logo.png" />
<img src="http://a.test.com/logo.png" />

访问一下test.com/index.html页面，服务端的日志信息如下所示

访问地址 服务器处理时间 访问文件路径 cookie 信息 访问域名
127.0.0.1 [29/Mar/2018:16:52:49 +0800] “GET /index.html HTTP/1.1” name=zhangsan test.com
127.0.0.1 [29/Mar/2018:16:52:49 +0800] “GET /logo.png HTTP/1.1” name=zhangsan test.com
127.0.0.1 [29/Mar/2018:16:52:49 +0800] “GET /logo.png HTTP/1.1” age=12 a.test.com

通过日志可以发现，

不管是引用相同域的图片还是不同域的图片，浏览器都把资源所属域下的 cookie 信息同步传递给了服务端，往往服务器在返回这些资源的时候，是不需要对 cookie 进行验证处理的，也就是说在请求中传递了大量的无用信息，这就造成了极大的性能浪费。在开发过程中，我们经常会采用域名分发的方式来避免这个问题