1.3 Javascript
简介：
Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。
特点：
交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等）
安全性（不可以直接访问本地硬盘）
跨平台性（由浏览器解析执行，和平台无关）
1.3.1 javascript和java
JavaScript只需浏览器解析就可以执行，而java需要先编译成字节码文件，然后通过JVM来执行。
JavaScript 是一种弱类型语言，java是强类型语言。
一个完整 JavaScript实现由以下三个部分组成：
1.核心：ECMAscript
2.文档对象模型：DOM
3.浏览器对象模型：BOM
1.3.2 javascript基础
1.3.2.1 HelloWord
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
alert("HelloWorld...1");//弹框
console.log("HelloWorld...1");//在控制台中打印数据
</script>
</head>
<body>
<script type="text/javascript">
alert("HelloWorld...2");//弹框
console.log("HelloWorld...2");//在控制台中打印数据
</script>
</body>
</html>
注：javascript作为标签出现在HTML中未要求一定要写在中
1.3.2.2 变量的定义
在javascript中，定义变量可以统一使用var。
<script type="text/javascript">
/**
* var - 变量
*/
var v = 123;
console.log(v);
v = true;
console.log(v);
v = "abc";
console.log(v);
</script>
注：javascript为弱类型语言，在定义变量上可以自动转换。
1.3.2.3 基本数据类型
number（数值型）string（字符串型）boolean（布尔类型）undefined（未定义类型）、null（空）
JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
实例
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
JavaScript 字符串
字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
实例
var carname=“Bill Gates”;
var carname=‘Bill Gates’;
单引号和双引号支持互相包含
JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
var x=true
var y=false
undefined
访问一个不存在的变量或使用已声明但未赋值的变量，都会得到一个值undefined，undefined类型的值只有一个undefined
Null
被赋予null值的变量通常认为已经定义了，只是不代表任何东西。
Javascript的数据类型主要分为
基本数据类型
非基本数据类型（对象）
<script type="text/javascript">
/**
* JS的基本数据类型：number、string、boolean、undefined(未定义类型)、null
*/
//number
var v1 = 123;
console.log(v1) //123
v1 = 123.123;
console.log(v1); //123.123
//string
var v2 = 'abc';
console.log(v2); //abc
v2 = "abc";
console.log(v2); //abc
//boolean
var v3 = true;
console.log(v3); //true
v3 = false;
console.log(v3); //false
//undefined
var v4;
console.log(v4); //undefined
v4 = undefined;
console.log(v4); //undefined
var v5 = null;
console.log(v5); //null
</script>
1.3.2.4 基本数据类型的特殊点
<script type="text/javascript">
//JS的基本数据类型：number、string、boolean、undefined(未定义类型)、null
//number的特殊点：(Infinity 表示无穷大)
console.log(Infinity + (-Infinity));//NaN:Not a Number
//string的特殊点：
var v1 = "12";
var v2 = "3";
console.log(v1 + v2);//做拼接
console.log(parseInt(v1) + parseInt(v2));//先转化成整数再相加
//算数运算
console.log(v1 - v2);//9
console.log(v1 * v2);//36
console.log(v1 / v2);//4
console.log(v1 % v2);//0
//boolean的特殊点：0、""、undefined、null、NaN都表示false
if(null){
console.log("true");
}else{
console.log("false");
}
//undefined vs null
var v1;
console.log(typeof v1);//undefined
var v2 = null;
console.log(typeof v2);//object(空对象)
//== vs ===
var v1 = 123;
var v2 = "123";
console.log(v1 == v2);//true：只判断值
console.log(v1 === v2);//false：既判断值，也判断类型
</script>
1.3.2.5 流程控制语句
循环语句：for 、for-in 、while
分支：switch
for-in的 使用注意：
<script type="text/javascript">
var nums = [1,2,3,4,5,6]
for(var index in nums){
alert(nums[index]);
}
</script>
1.3.2.6 数组
<script type="text/javascript">
/**
* 数组
*/
//数组的声明及初始化
var arr = ["aa","bb","cc"];
//设置数据
arr[2] = "ss";
//添加数据
arr[3] = "dd";
arr[10] = "xx";
//删除数据
delete arr[3];
//遍历 - for循环
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);
}
//依次遍历中间会出现7个undefined
//遍历 - for_in(遍历有效下标)
for(var index in arr){
console.log(arr[index]);
}
//不会遍历出undefined
</script>
1.3.2.7 函数
<script type="text/javascript">
/*
* 函数：特定功能的代码块
*/
//无返回值无参数的方法
function fun01(){
alert("aaa");
}
fun01();
//有参数的方法（参数不用写var）
function fun02(a,b){
alert(a+b);
}
fun02("10","20");
//有返回值的方法
function fun03(a,b){
return a+b;
}
var v = fun03("10","20");
alert(v);
</script>
1.3.2.8 预定义函数
常见的预定义函数：parseInt();、parseFloat();将字符转化为int和float。
isNaN()、isFinite()判断是不是一个数字。
eval()把该字符串认定为一个js代码执行。
1.3.3 DOM
文档对象模型（Document Object Model）
核心：使用DOM的方式来操作网页的元素
注：通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM 模型被构造为对象的树——HTML DOM 树
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9esp5jUp-1630893168041)(D:\培训\学习资料\重要图\HTML_DOM树.jpg)]
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
1.3.3.1 查找元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
-
通过 id 找到 HTML 元素
-
通过标签名找到 HTML 元素
-
通过类名找到 HTML
<body>
<p id="p_id1" class="p_class">段落1</p>
<p id="p_id2" class="p_class">段落2</p>
<p id="p_id3" class="p_class">段落3</p>
<input type="text" name="text"/>
<br />
<input type="text" name="text"/>
<script type="text/javascript">
document.getElementById("p_id1").onclick=function (){
this.innerText="段落1ddd"
}
document.getElementsByClassName("p_class")[1].onclick =function(){
this.innerText="段落2ddd"
}
document.getElementsByTagName("p")[2].onclick =function(){
this.innerText="段落3ddd"
}
document.getElementsByName("text")[0].onclick =function(){
this.value="滴滴滴"
this.style.color ="red"
}
</script>
</body>
1.3.3.2 操作内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML
<body>
<p>标签</p>
<script type="text/javascript">
var p1 =document.getElementsByTagName("p")[0];
p1.onclick = function(){
//获取内容
alert(this.innerText)//标签
alert(this.innerHTML)//<p>标签</p>
//this.innerText = "<h1>标题</h1>";
this.innerHTML = "<h1>标题</h1>";
}
</script>
</body>
1.3.3.3 操作属性
获取属性：
1.元素对象.属性（this.属性）
2.getAttribute(“属性名”)
修改属性：
1.使用元素对象（或者this）直接 .属性=“修改的值”
2.使用方法setAttribute(“操作的属性”,“对应修改的值”)
<body>
<img src="../img/2.png" width="20%" height="20%" >
<script type="text/javascript">
var img =document.getElementsByTagName("img")[0];
img.onclick = function(){
//获取属性
console.log(this.width)
console.log(this.getAttribute("height"))
//设置属性1
this.watch="400";
this.height="400";
//设置属性2
this.setAttribute("width","50%");
this.setAttribute("height","50%");
}
</script>
</body>
1.3.3.4 操作样式
获取样式：元素对象.style.样式名
操作样式：元素对象.style.样式名=“修改后的样式”
<body>
<img src="../img/2.png" onclick="fun01(this)">
<script type="text/javascript">
var img = document.getElementsByTagName("img")[0]
var bool =true;
function fun01(obj){
//获取样式
//console.log(img.style.backgroundColor)
img.style.visibility="hidden";
//obj.style.visibility="visible";
}
</script>
</body>
1.3.4 DOM事件
1.3.4.1 点击事件 onclick
<body>
<!-- 不分离 -->
<h1 onclick="this.innerText='你好!'">Hello</h1>
<!-- 分离 -->
<h1 onclick="fun01(this)">Hello</h1>
<script type="text/javascript">
function fun01(obj){
obj.innerText="你好！";
}
</script>
<!-- 使用按钮1 -->
<input type="button" value="单击改变标题1" onclick="fun02()"/>
<h1>标题</h1>
<script type="text/javascript">
function fun02(){
var h1=document.getElementsByTagName("h1")[2];
h1.innerText="你好！";
}
</script>
<!-- 使用按钮2 -->
<input type="button" value="单击改变标题2"/>
<h1>标题</h1>
<script type="text/javascript">
document.getElementsByTagName("input")[1].onclick=function(){
var h1=document.getElementsByTagName("h1")[3];
h1.innerText="你好！";
};
</script>
</body>
1.3.4.2 页面加载事件window.onload
等页面的所有资源加载完成再触发的事件
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/**
* onload事件：页面加载事件，等页面的所有资源加载完成再触发的事件
*/
window.onload =function(){
document.getElementsByTagName("input")[0].onclick=function(){
var h1 = document.getElementsByTagName("h1")[0];
h1.innerText="你好！";
}
}
</script>
</head>
<body>
<input type="button" value="改变标签" />
<h1>标签</h1>
</body>
1.3.4.3 键盘事件
onkeydown：键盘按下事件
onkeypress：键盘持续事件
onkeyup：键盘松开事件
应用示例：
<body>
<input type="text"
onkeydown="fun01()"
onkeypress="fun02()"
onkeyup="fun03()"
/>
<script type="text/javascript">
function fun01(){
console.log("键盘按下事件");
}
function fun02(){
console.log("键盘持续事件");
}
function fun03(){
console.log("键盘松开事件");
}
</script>
</body>
案例：实现文本框中输入英文字母内容，自动把内容转成大写字母
键盘松开事件
<body>
<!-- 需求：实现文本框中输入英文字母内容，自动把内容转成大写字母 -->
<input type="text"
onkeyup="fun03(this)"
/>
<script type="text/javascript">
function fun03(obj){
var v = obj.value;
v = v.toUpperCase();
obj.value=v;
}
</script>
</body>
1.3.4.4 鼠标事件
onmousedown：鼠标按下事件
onmouseup：鼠标松开事件
onmousemove：鼠标移动事件
onmouseover：鼠标移进事件
onmouseout：鼠标移出事件
应用示例：
<body>
<input type="image" src="../img/2.png"
onmousedown="down01()"
onmouseup="up01()"
onmousemove="move01()"
onmouseover="over01()"
onmouseout="out01()"
/>
<script type="text/javascript">
function down01(){
console.log("鼠标按下事件");
}
function up01(){
console.log("鼠标松开事件");
}
function move01(){
console.log("鼠标移动事件");
}
function over01(){
console.log("鼠标移进事件");
}
function out01(){
console.log("鼠标移出事件");
}
</script>
</body>
案例：鼠标放在图片上图片消失
鼠标移进移出事件
<body>
<!-- 需求：捉迷藏，鼠标放在图片上图片消失 -->
<img src="../img/2.png" onmouseover="over01(this)" onmouseout="out01(this)"/>
<img src="../img/2.png" onmouseover="over01(this)" onmouseout="out01(this)"/>
<img src="../img/2.png" onmouseover="over01(this)" onmouseout="out01(this)"/>
<script type="text/javascript">
function over01(obj){
obj.style.opacity=0; //透明度0~1
}
function out01(obj){
obj.style.opacity=1;
}
</script>
</body>
1.3.4.5 焦点事件
onfocus：获取焦点
onblur：失去焦点
案例：文本框提示和检测。
<body>
<input type="text" value="请输入账号" onfocus="focus01(this)" onblur="blur01(this)"/>
<script type="text/javascript">
function focus01(obj){
if(obj.value=="请输入账号"){
obj.value="";
}
}
function blur01(obj){
if(obj.value.trim()==""){
obj.value="请输入账号"
}
}
</script>
</body>
1.3.4.6 变化事件 onchange
标签生改变时引发的操作事件，常常用来关联联动事件，如选择省市。
<body>
<select id="province">
<option value="sc">四川</option>
<option value="jx">江西</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
</select>省
<select id="city">
<option>成都</option>
<option>自贡</option>
<option>雅安</option>
<option>乐山</option>
<option>眉山</option>
<option>绵阳</option>
</select>市
<script type="text/javascript">
var city = document.getElementById("city");
//onchange - 改变事件
document.getElementById("province").onchange = function(){
if(this.value == "sc"){
addCity(["成都","自贡","雅安","乐山","眉山","绵阳"]);
}else if(this.value == "jx"){
addCity(["南昌","赣州","新余","婺源","上饶","景德镇"]);
}else if(this.value == "hn"){
addCity(["长沙","湘潭","娄底","永州","张家界"]);
}else if(this.value == "hb"){
addCity(["武汉","咸宁","仙桃","黄冈"]);
}
}
function addCity(arr){
//清空city中的数据
city.length = 0;
for(var i = 0;i<arr.length;i++){
var cityName = arr[i];
var option = document.createElement("option");
option.innerText = cityName;
city.appendChild(option);
}
}
</script>
</body>
1.3.4.6 表单验证事件 onsubmit
此事件需要验证返回值，当点击submit按钮提交from表单时，会触发该事件，当事件的内容满足，自定义返回一个true，则提交生效，如果返回值为false，则不提交。
常用作前端验证：
<form id="modifyPassword" action="#" method="post">
账号：<input id="username" type="text" placeholder="请输入账号" /><span></span><br />
密码：<input id="password" type="password" placeholder="请输入密码" /><span></span><br />
确认密码：<input id="repassword" type="password" placeholder="请输入确认密码" /><span></span><br />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
var username = document.getElementById("username");
var password = document.getElementById("password");
var repassword = document.getElementById("repassword");
var span1 = document.getElementsByTagName("span")[0];
var span2 = document.getElementsByTagName("span")[1];
var span3 = document.getElementsByTagName("span")[2];
//提交事件 - onsubmit
document.getElementById("modifyPassword").onsubmit = function(){
span1.innerText = "";
span2.innerText = "";
span3.innerText = "";
var bool = true;
if(username.value.trim() == ""){
bool = false;
span1.innerText = "账号不能为空";
}
if(password.value.trim() == ""){
bool = false;
span2.innerText = "密码不能为空";
}
if(repassword.value.trim() == ""){
bool = false;
span3.innerText = "确认密码不能为空";
}else if(password.value.trim() != repassword.value.trim()){
bool = false;
span3.innerText = "确认密码与密码不一致";
}
return bool;
}
</script>
1.3.5 DOM操作节点
1.3.5.1 创建节点
document.createElement(“标签名”)：创建对应标签
1.3.5.2 添加节点
属性元素.appendChild(属性元素)：在对应属性下添加新的属性
1.3.5.3 操作节点案例
<body>
<input type="button" value="新增段落标签" onclick="addP()"/>
<input type="button" value="新增图片标签" onclick="addImg()"/>
<input type="button" value="克隆图片标签" onclick="cloneImg()"/>
<input type="button" value="删除图片标签" onclick="deleteImg()"/>
<div id="manager">
<p>段落标签</p>
</div>
<script type="text/javascript">
var manager =document.getElementById("manager");
function addP(){
var p = document.createElement("p")
p.innerText="新增段落标签"
manager.appendChild(p)
}
function addImg(){
var img = document.createElement("img");
// img.setAttribute("src","../img/2.png");
img.src="../img/2.png";
img.setAttribute("width","100px");
img.setAttribute("height","100px");
manager.appendChild(img)
//创建节点
var br = document.createElement("br");
//将br标签添加到div标签中
manager.appendChild(br);
}
function cloneImg(){
var img = document.getElementsByTagName("img")[0]
var newImg = img.cloneNode(true)
manager.appendChild(newImg)
//创建节点
var br = document.createElement("br");
//将br标签添加到div标签中
manager.appendChild(br);
}
function deleteImg(){
var img = document.getElementsByTagName("img")[0];
var br = document.getElementsByTagName("br")[0];
manager.removeChild(img);
manager.removeChild(br);
}
</script>
</body>
1.3.6 BOM
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
Browser Object Model
1.3.6.1 window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM document window
1.3.6.1.1 window.location
Location属性是一个用于存储当前载入页面URL信息的对象。
常常用作页面跳转和页面刷新：
<body>
<input type="button" value="跳转到百度" onclick="fun01()"/>
<input type="button" value="刷新页面" onclick="fun02()"/>
<script type="text/javascript">
function fun01(){
//三种方式都可
// window.location.href = "http://www.baidu.com";
// window.location = "http://www.baidu.com";
location = "http://www.baidu.com";
}
function fun02(){
location.reload();
}
</script>
</body>
1.3.6.1.2 window.history
操作同一个浏览器会话中的已访问页面
常用方法：
back() 跳转到上一页
forward() 跳转到下一页
go(n) 跳转到上n页
go(-n) 跳转到下n页
注意：n为0时，go(0)效果和location.reload()相同为：刷新页面
<body>
<input type="button" value="上两页" onclick="fun01()"/>
<input type="button" value="上一页" onclick="fun02()"/>
<input type="button" value="刷新" onclick="fun03()"/>
<input type="button" value="下一页" onclick="fun04()"/>
<input type="button" value="下两页" onclick="fun05()"/>
<script type="text/javascript">
function fun01(){
window.history.go(-2);
}
function fun02(){
//window.history.go(-1);
history.back();
}
function fun03(){
window.history.go(0);
}
function fun04(){
//window.history.go(1);
history.forward();
}
function fun05(){
window.history.go(2);
}
</script>
</body>
1.3.6.1.3 window.open()
弹开一个新的页面（流氓广告）
<script type="text/javascript">
window.open("http://www.baidu.com")
</script>
1.3.6.2 弹出框
1.3.6.2.1 警告框alert()
无返回值，界面直接弹出消息。
1.3.6.2.2 确认框confirm()
有返回值，会根据用户点击的按钮（确认or取消）返回一个Boolean值（true or false）
1.3.6.2.3 提示框prompt()
有返回值，提示框中用户能够填写信息，并返回。（如果点击取消，会返回一个null）
<body>
<input type="button" value="警告窗" onclick="fun01()"/>
<input type="button" value="确认窗" onclick="fun02()"/>
<input type="button" value="提示窗" onclick="fun03()"/>
<script type="text/javascript">
function fun01(){
alert("警告框");
}
function fun02(){
console.log(confirm("确认框"))
}
function fun03(){
console.log(prompt("提示框","默认值"))
}
</script>
</body>
1.3.6.3 定时器
延时定时器
过多少毫秒就执行次函数(只执行一次)
setTimeout 语法：var t=setTimeout(“javascript语句”,毫秒)
clearTimeout 清除定时器：clearTimeout(t)
示例：隔三秒，图片自动切换一次
<body>
<input type="button" value="取消定时" onclick="fun01()"/>
<br />
<img src="../img/1.jpg" >
<script type="text/javascript">
var img = document.getElementsByTagName("img")[0];
//定时器:过多少毫秒就执行次函数(只执行一次)
var time = setTimeout(function(){
img.src ="../img/2.png";
},3000);
function fun01(){
clearTimeout(time)
}
</script>
</body>
循环定时器
每过多少毫秒就执行该函数(不限一次)
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：var time = setInterval(“javascript语句”,毫秒)
clearInterval() ：清除定时器： clearInterval(time)
示例：循环切换图片
<body>
<img src="../img/3.jpg" width="20%">
<input type="button" value="取消切换" onclick="fun01()"/>
<script type="text/javascript">
var time01;
window.onload = function(){
var img = document.getElementsByTagName("img")[0];
var imgSrcs=["../img/1.jpg","../img/2.png","../img/3.jpg"];
var index = 0;
time01 = window.setInterval(function(){
img.src = imgSrcs[index];
index++;
if(index==imgSrcs.length){
index=0;
}
},1000)
}
function fun01(){
clearInterval(time01);
}
</script>
</body>
示例：时钟
<body>
<h1></h1>
<script type="text/javascript">
var h = document.getElementsByTagName("h1")[0];
function setTime(){
//创建日期对象
var date = new Date();
//获取日期信息
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var time = hour + ":" + minute + ":" +second;
h.innerText = time;
}
setTime();
setInterval(function(){
setTime();
},1000)
</script>
</body>
1.3.6.4 Cookie
cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。
cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个可用。因此，可以跨越一个域名下的多个网页，但不能跨越多个域名使用。
1.3.6.4.1 Cookie可以做什么？
1，保存用户的登录状态
2，定制页面，如换肤，选择所在地区等等
3，购物车的实现
4，记录用户的浏览历史记录
1.3.6.4.2 Cookie的缺点
1，cookie可能被禁用
2，cookie是与游览器相关的，即使访问同一个页面，不同的浏览器保存的cookie也是不能互相访问的
3，cookie可能被删除，因为cookie实际就是硬盘上的一个文件
4，的安全性不够高，所有的都是以纯文本的形式记录于文件中。
1.3.6.4.3 设置Cookie
设置Cookie内容
每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie
document.cookie=“userId=888”;
如果要一次存储多个名/值对，可以使用逗号加空格（; ）隔开，例如：
document.cookie=“userId=888; userName=1601”;
注意：以下写法是保存了两个cookie信息，而不是覆盖（key相同时覆盖）
document.cookie=“userId=888”;
document.cookie=“userName=1601”;
如果要改变一个cookie的值，只需重新赋值，例如：
document.cookie=“userId=999”;
这样就将名为userId的cookie值设置为了999。
设置Cookie过期时间
到现在为止，所有的cookie都是内存会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。
在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：document.cookie=“userId=828; expires=GMT_String”;
注：其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。
<script type="text/javascript">
function updateCookie(key,value,time){
var date = new Date();
date.setTime(date.getTime()+time)
document.cookie = key + "=" + value + "; expires=" +date.toGMTString();
}
</script>
1.3.6.4.4 获取Cookie
var strCookie=document.cookie;
这将获得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。 （想要获取特定的值还需要进一步处理）
<script type="text/javascript">
function queryCookie(key){
var cs = document.cookie.split(";");
for(var index in cs){
var k=cs[index].trim().split("=")[0];
var v=cs[index].trim().split("=")[1];
if(k==key){
return v;
}
}
}
</script>
1.3.6.4.5 删除Cookie
为了删除一个cookie，可以将其过期时间设定为一个过去的时间（(new Date()).getTime()-1或者直接是-1等等）
操作示例：
<body>
<input type="button" value="添加Cookie" onclick="fun01()"/>
<input type="button" value="删除Cookie" onclick="fun02()"/>
<input type="button" value="修改Cookie" onclick="fun03()"/>
<input type="button" value="查询Cookie" onclick="fun04()"/>
<script type="text/javascript">
function fun01(){
updateCookie("username","dengshuo",1000*60*60*60*24*10);
updateCookie("password","1234",1000*60*60*60*24*10);
}
function fun02(){
updateCookie("username","",-1);
updateCookie("password","",-1);
}
function fun03(){
updateCookie("username","dengshuo_ddd",1000*60*60*60*24*10);
updateCookie("password","123456",1000*60*60*60*24*10);
}
function fun04(){
var username = queryCookie("username");
var password = queryCookie("password");
alert(username+"--"+password)
}
function updateCookie(key,value,time){
var date = new Date();
date.setTime(date.getTime()+time)
document.cookie = key + "=" + value + "; expires=" +date.toGMTString();
}
function queryCookie(key){
var cs = document.cookie.split(";");
for(var index in cs){
var k=cs[index].trim().split("=")[0];
var v=cs[index].trim().split("=")[1];
if(k==key){
return v;
}
}
}
</script>
</body>
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
