JavaScript常见语法--菜鸟教程

文章目录

    • JavaScript 语法
      • <body> 中的 JavaScript
    • JavaScript 输出
      • 使用 window.alert()
      • 操作 HTML 元素
      • 写到 HTML 文档
      • 写到控制台
    • JavaScript 语法
      • JavaScript 字面量
      • JavaScript 变量
      • JavaScript 操作符
      • JavaScript 语句
      • JavaScript 字符集
      • JavaScript判断类型
    • JavaScript数据类型
      • Undefined 和 Null
    • JavaScript 对象
    • JavaScript 作用域
      • JavaScript 全局变量
      • HTML 中的全局变量
    • JavaScript 事件
      • HTML 事件
    • JavaScript 字符串模板
    • JavaScript 声明提升
    • JavaScript 表单
      • JavaScript 表单验证
    • HTML 表单自动验证
    • JavaScript 验证 API
      • 约束验证 DOM 属性
      • Validity 属性
    • JavaScript this 关键字
    • JavaScript JSON
      • JSON 字符串转换为 JavaScript 对象
    • javascript:void(0) 含义
      • href="#"与href="javascript:void(0)"的区别
    • JavaScript 异步编程
      • 异步 AJAX
    • JavaScript Promise
    • JavaScript 函数定义
      • 函数表达式
      • 箭头函数
    • Dom
      • 改变 HTML 样式
      • addEventListener() 方法
      • 创建新的 HTML 元素 (节点) - appendChild()
      • 创建新的 HTML 元素 (节点) - insertBefore()
      • 移除已存在的元素
      • JavaScript HTML DOM 集合(Collection)
    • 浏览器BOM
      • JavaScript Window
      • JavaScript Window Screen
      • JavaScript Window Location
        • **Window Location href**
        • **Window Location assign**
        • **JavaScript Window History**
        • **JavaScript Window Navigator**
        • **JavaScript 计时事件**
        • **JavaScript Cookie**

JavaScript 语法

参考手册

https://www.runoob.com/jsref/jsref-tutorial.html

中的 JavaScript

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

JavaScript 输出

JavaScript 可以通过不同的方式来输出数据：

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

<!-- 弹出提示框 -->
<!DOCTYPE html>
<html><body><h1>我的第一个页面</h1><p>我的第一个段落。</p><script>window.alert(5 + 6);</script></body>
</html>

操作 HTML 元素

<!-- 修改HTML元素 -->
<!DOCTYPE html>
<html><body><h1>我的第一个 Web 页面</h1><p id="demo">我的第一个段落</p><script>document.getElementById("demo").innerHTML = "段落已修改。";</script></body>
</html>

写到 HTML 文档

<!-- 使用js向HTML中添加元素 -->
<!DOCTYPE html>
<html><body><h1>我的第一个 Web 页面</h1><p>我的第一个段落。</p><script>document.write(Date());</script></body>
</html>

使用 document.write() 可以向文档写入内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<!-- 点击button后<p>和<h1>显示的内容都会消失，原因在于是文档加载完成后调用document.write -->
<!DOCTYPE html>
<html><body><h1>我的第一个 Web 页面</h1><p>我的第一个段落。</p><button onclick="myFunction()">点我</button><script>function myFunction() {document.write(Date());}</script></body>
</html>

写到控制台

<!DOCTYPE html>
<html><body><script>a = 5;b = 6;c = a + b;//输出到控制台console.log(c);</script></body>
</html>

JavaScript 语法

JavaScript 字面量

  • 数字（Number）字面量
3.14
1001
123e5
  • 字符串（String）字面量
"John Doe"
'John Doe'
  • 表达式字面量
5 + 6
5 * 10
  • 数组（Array）字面量
[40, 100, 1, 5, 25, 10]
  • 对象（Object）字面量
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
  • 函数（Function）字面量
function myFunction(a, b) { return a * b;}

JavaScript 变量

var x, lengthx = 5
length = 6

JavaScript 操作符

  • 算术运算符
  • 赋值运算符

JavaScript 语句

在 HTML 中，JavaScript 语句用于向浏览器发出命令。
语句是用分号分隔：

x = 5 + 6;
y = x * 10;

JavaScript 字符集

Unicode 字符集

JavaScript判断类型

JavaScript是弱类型编程语言,定义变量都使用 var 定义,与 Java 这种强类型语言有区别.
在定义后可以通过 typeOf() 来获取JavaScript中变量的数据类型.

当然你可以使用其他方式来判断：

  1. 使用 isArray 方法
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 判断是否支持该方法
if (Array.isArray) {if(Array.isArray(cars)) {document.write("该对象是一个数组。") ;}
}
  1. 使用 instanceof 操作符
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";if (cars instanceof Array) {document.write("该对象是一个数组。") ;
}

JavaScript数据类型

Undefined 和 Null

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

JavaScript 对象

对象定义

var car = {name:"Fiat", model:500, color:"white"};

访问对象属性

person.lastName;
//或者
person["lastName"];

JavaScript 作用域

JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";// 此处可调用 carName 变量
function myFunction() {// 函数内可调用 carName 变量
}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
以下实例中 carName 在函数内，但是为全局变量。

// 此处可调用 carName 变量function myFunction() {carName = "Volvo";// 此处可调用 carName 变量
}

HTML 中的全局变量

//此处可使用 window.carNamefunction myFunction() {carName = "Volvo";
}

JavaScript 事件

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
单引号:

<some-HTML-element some-event='JavaScript 代码'>

双引号:

<some-HTML-element some-event="JavaScript 代码">

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

以上实例中，JavaScript 代码将修改 id=“demo” 元素的内容。
在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

常见的HTML事件
下面是一些常见的HTML事件的列表:

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover鼠标指针移动到指定的元素上时发生
onmouseout用户从一个 HTML 元素上移开鼠标时发生
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载

JavaScript 字符串模板

若要转义模板字面量中的反引号（`），需在反引号之前加一个反斜杠（\）。

`\`` === "`"; // true

模板字面量用反引号（`）括起来，而不是双引号（"）或单引号（'）。
除了普通字符串外，模板字面量还可以包含占位符——一种由美元符号和大括号分隔的嵌入式表达式：${expression}。
字符串和占位符被传递给一个函数（要么是默认函数，要么是自定义函数）。默认函数（当未提供自定义函数时）只执行字符串插值来替换占位符，然后将这些部分拼接到一个字符串中。
模板字符串中允许我们使用变量：

const name = 'Runoob';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;

JavaScript 声明提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

x = 5; // 变量 x 设置为 5elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     
// 在元素中显示 xvar x; // 声明 x

var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x;                     
// 在元素中显示 x

JavaScript 表单

JavaScript 表单验证

function validateForm() {var x = document.forms["myForm"]["fname"].value;if (x == null || x == "") {alert("需要输入名字。");return false;}
}

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

<form action="demo_form.php" method="post"><input type="text" name="fname" required="required"><input type="submit" value="提交">
</form>

JavaScript 验证 API

checkValidity()如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。

使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成 true，checkValidity 总是会返回 false。如果要重新判断需要取消自定义提示，方式如下：

setCustomValidity(‘’)
setCustomValidity(null)
setCustomValidity(undefined)|

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button><p id="demo"></p><script>function myFunction() {var inpObj = document.getElementById("id1");if (inpObj.checkValidity() == false) {document.getElementById("demo").innerHTML = inpObj.validationMessage;}
}</script>

约束验证 DOM 属性

属性描述
validity布尔属性值，返回 input 输入值是否合法
validationMessage浏览器错误提示信息
willValidate指定 input 是否需要验证

Validity 属性

属性描述
customError设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow设置为 true, 如果元素的值小于它的最小值。
stepMismatch设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing设置为 true，如果元素 (required 属性) 没有值。
valid设置为 true，如果元素的值是合法的。

实例

<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>
<p id="demo"></p>
<script>function myFunction() {var txt = "";if (document.getElementById("id1").validity.rangeOverflow) {txt = "输入的值太大了";}document.getElementById("demo").innerHTML = txt;
}</script>

<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">OK</button><p id="demo"></p><script>function myFunction() {var txt = "";var inpObj = document.getElementById("id1");if(!isNumeric(inpObj.value)) {txt = "你输入的不是数字";} else if (inpObj.validity.rangeUnderflow) {txt = "输入的值太小了";} else {txt = "输入正确";}document.getElementById("demo").innerHTML = txt;
}
// 判断输入是否为数字
function isNumeric(n) {return !isNaN(parseFloat(n)) && isFinite(n);
}</script>

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

  • 在方法中，this 表示该方法所属的对象。
  • 如果单独使用，this 表示全局对象。
  • 在函数中，this 表示全局对象。
  • 在函数中，在严格模式下，this 是未定义的(undefined)。
  • 在事件中，this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
var person = {firstName: "John",lastName : "Doe",id       : 5566,fullName : function() {return this.firstName + " " + this.lastName;}
};

完整示例

JavaScript JSON

{"sites":[{"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"},{"name":"Taobao", "url":"www.taobao.com"}
]}

JSON 字符串转换为 JavaScript 对象

var text = '{ "sites" : [' +'{ "name":"Runoob" , "url":"www.runoob.com" },' +'{ "name":"Google" , "url":"www.google.com" },' +'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
函数描述
JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。

javascript:void(0) 含义

我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？
javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

<p>点击以下链接查看结果：</p>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>

href="#"与href="javascript:void(0)"的区别

包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

JavaScript 异步编程

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

function print() {document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);

这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 “print”，在命令行输出 “RUNOOB!”。

当然，JavaScript 语法十分友好，我们不必单独定义一个函数 print ，我们常常将上面的程序写成：

setTimeout(function () {document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);

注意：既然 setTimeout 会在子线程中等待 3 秒，在 setTimeout 函数执行之后主线程并没有停止，所以：

setTimeout(function () {document.getElementById("demo1").innerHTML="RUNOOB-1!";  // 三秒后子线程执行
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";      // 主线程先执行

异步 AJAX

$.get("https://www.runoob.com/try/ajax/demo_test.php",function(data,status){alert("数据: " + data + "\n状态: " + status);
});

JavaScript Promise

new Promise(function (resolve, reject) {// 要做的事情...
});

Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：

then：用于处理 Promise 成功状态的回调函数。
catch：用于处理 Promise 失败状态的回调函数。
finally：无论 Promise 是成功还是失败，都会执行的回调函数。
下面是一个使用 Promise 构造函数创建 Promise 对象的例子：
当 Promise 被构造时，起始函数会被同步执行：

const promise = new Promise((resolve, reject) => {// 异步操作setTimeout(() => {if (Math.random() < 0.5) {resolve('success');} else {reject('error');}}, 1000);
});
promise.then(result => {console.log(result);
}).catch(error => {console.log(error);
});

JavaScript 函数定义

函数表达式

var x = function (a, b) {return a * b};

var x = function (a, b) {return a * b};
var z = x(4, 3);

箭头函数

ES6 新增了箭头函数。箭头函数表达式的语法比普通函数表达式更简洁。(参数1, 参数2, …, 参数N) => { 函数声明 }(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
当只有一个参数时，圆括号是可选的：(单一参数) => {函数声明}
单一参数 => {函数声明}
没有参数的函数应该写成一对圆括号:() => {函数声明}

// ES5
var x = function(x, y) {return x * y;
}
// ES6
const x = (x, y) => x * y;

const x = (x, y) => { return x * y };

Dom

改变 HTML 样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>
</html>

addEventListener() 方法

document.getElementById("myBtn").addEventListener("click", displayDate);
  • addEventListener() 方法用于向指定元素添加事件句柄。
  • addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
  • 你可以向一个元素添加多个事件句柄。
  • 你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
  • 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
  • addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
  • 当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
  • 你可以使用 removeEventListener() 方法来移除事件的监听。
element.addEventListener("click", function(){ alert("Hello World!"); });

创建新的 HTML 元素 (节点) - appendChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div><script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);var element = document.getElementById("div1");
element.appendChild(para);
</script>

创建新的 HTML 元素 (节点) - insertBefore()

以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。
如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div><script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

移除已存在的元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div><script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

JavaScript HTML DOM 集合(Collection)

  • HTMLCollection 对象 length 属性
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

浏览器BOM

JavaScript Window

Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5：document.documentElement.clientHeight
document.documentElement.clientWidth
或者document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器，包含 IE8 及以下版本的浏览器）：

其他 Window 方法
一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

JavaScript Window Screen

Window Screen
window.screen对象在编写时可以不使用 window 这个前缀。一些属性：screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Window Screen 可用高度

<script>
document.write("可用高度: " + screen.availHeight);
</script>

JavaScript Window Location

Window Location
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：一些实例:location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

Window Location href

location.href 属性返回当前页面的 URL。

<script>
document.write(location.href);
</script>

Window Location pathname
location.pathname 属性返回 URL 的路径名。

<script>
document.write(location.pathname);
</script>

Window Location assign

location.assign() 方法加载新的文档。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function newDoc(){window.location.assign("https://www.runoob.com")
}
</script>
</head>
<body>
<input type="button" value="加载新文档" onclick="newDoc()">
</body>
</html>

JavaScript Window History

Window History
window.history对象在编写时可不使用 window 这个前缀。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。一些方法：history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同

JavaScript Window Navigator

<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

JavaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScript 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

JavaScript Cookie

使用 JavaScript 创建Cookie
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie
在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;Note	document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;使用 JavaScript 修改 Cookie
在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
旧的 cookie 将被覆盖。使用 JavaScript 删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
注意，当您删除时不必指定 cookie 的值。Cookie 字符串
document.cookie 属性看起来像一个普通的文本字符串，其实它不是。即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：cookie1=value; cookie2=value;

显示所有 Cookie 创建 Cookie 1 创建 Cookie 2 删除 Cookie 1 删除 Cookie 2

如果您需要查找一个指定 cookie 值，您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。

JavaScript Cookie 实例
在以下实例中，我们将创建 cookie 来存储访问者名称。

首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

访问者下一次访问页面时，他会看到一个欢迎的消息。

在这个实例中我们会创建 3 个 JavaScript 函数:

设置 cookie 值的函数
获取 cookie 值的函数
检测 cookie 值的函数
设置 cookie 值的函数
首先，我们创建一个函数用于存储访问者的名字：

function setCookie(cname,cvalue,exdays)
{var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000));var expires = "expires="+d.toGMTString();document.cookie = cname + "=" + cvalue + "; " + expires;
}

函数解析：

以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。

该函数设置了 cookie 名、cookie 值、cookie过期时间。

获取 cookie 值的函数
然后，我们创建一个函数用于返回指定 cookie 的值：

function getCookie(cname)
{var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++) {var c = ca[i].trim();if (c.indexOf(name)==0) return c.substring(name.length,c.length);}return "";
}

函数解析：

cookie 名的参数为 cname。

创建一个文本变量用于检索指定 cookie :cname + “=”。

使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。

如果没有找到 cookie, 返回 “”。

检测 cookie 值的函数
最后，我们可以创建一个检测 cookie 是否创建的函数。

如果设置了 cookie，将显示一个问候信息。

如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：

function checkCookie()
{var username=getCookie("username");if (username!=""){alert("Welcome again " + username);}else {username = prompt("Please enter your name:","");if (username!="" && username!=null){setCookie("username",username,365);}}
}

完整实例
实例

function setCookie(cname,cvalue,exdays){var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000));var expires = "expires="+d.toGMTString();document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++) {var c = ca[i].trim();if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }}return "";
}
function checkCookie(){var user=getCookie("username");if (user!=""){alert("欢迎 " + user + " 再次访问");}else {user = prompt("请输入你的名字:","");if (user!="" && user!=null){setCookie("username",user,30);}}
}

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

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

相关文章

【TypeScript】进阶之路语法细节，类型和函数

【TypeScript】进阶之路语法细节，类型和函数

进阶之路 类型别名(type)的使用接口(interface)的声明的使用二者区别&#xff1a; 联合类型和交叉类型联合类型交叉类型 类型断言获取DOM元素 非空类型断言字面量类型的使用类型缩小&#xff08;类型收窄&#xff09;TypeScript 函数类型函数类型表达式内部规则检测函数的调用签…
阅读更多...
spring框架之AOP模块，附带通知类型-----详细介绍

spring框架之AOP模块，附带通知类型-----详细介绍

一&#xff0c;AOP简介 是Spring框架中的一个重要模块&#xff0c;它提供了一种通过面向切面编程的方式来实现横切关注点的模块化的方法。AOP可以将应用程序的核心业务逻辑与横切关注点&#xff08;如日志记录、事务管理、安全性等&#xff09;分离开来&#xff0c;从而提高代码…
阅读更多...
android Ndk Jni动态注册方式以及静态注册

android Ndk Jni动态注册方式以及静态注册

目录 一.静态注册方式 二.动态注册方式 三.源代码 一.静态注册方式 1.项目名\app\src\main下新建一个jni目录 2.在jni目录下，再新建一个Android.mk文件 写入以下配置 LOCAL_PATH := $(call my-dir)//获取当前Android.mk所在目录 inclu
阅读更多...
pytest运行时参数说明，pytest详解，pytest.ini详解

pytest运行时参数说明，pytest详解，pytest.ini详解

一、Pytest简介 1.pytest是一个非常成熟的全功能的Python测试框架&#xff0c;主要有一下几个特点&#xff1a; 简单灵活&#xff0c;容易上手&#xff0c;支持参数化 2.能够支持简单的单元测试和复杂的功能测试&#xff0c;还可以用来做selenium、appium等自动化测试&#xf…
阅读更多...
CentOS系统环境搭建（五）——Centos7安装maven

CentOS系统环境搭建（五）——Centos7安装maven

centos系统环境搭建专栏&#x1f517;点击跳转 Centos7安装maven 下载压缩包 maven下载官网 解压 压缩包放置到/usr/local tar -xvf apache-maven-3.9.2-bin.tar.gz配置环境变量 vim /etc/profile在最下面追加 MAVEN_HOME/usr/local/apache-maven-3.9.2 export PATH${MAV…
阅读更多...
Linux系统之wget命令的基本使用

Linux系统之wget命令的基本使用

Linux系统之wget命令的基本使用 一、wget命令介绍二、本次实践环境三、wget命令的使用帮助3.1 wget命令的基本语法3.2 wget选项解释 四、安装wget工具4.1 检查yum仓库状态4.2 安装wget工具 五、wget命令的基本使用5.1 直接下载文件5.2 下载时指定文件名5.3 后台下载文件5.4 限速…
阅读更多...
Oracle外部表ORACLE_LOADER方式加载数据

Oracle外部表ORACLE_LOADER方式加载数据

当数据源为文本或其它csv文件时&#xff0c;oracle可通过使用外部表加载数据方式&#xff0c;不需要导入可直接查询文件内的数据。 1、如下有一个文件名为&#xff1a;test1.txt 的数据文件。数据文件内容为&#xff1a; 2、使用sys授权hr用户可读写 DATA_PUMP_DIR 目录权限&a…
阅读更多...
修改文件内容

修改文件内容

修改文件内容 按照下方所述&#xff0c;创建一个名为 /home/curtis/ansible/issue.yml 的 playbook &#xff1a; 该 playbook 将在所有清单主机上运行 该 playbook 会将 /etc/issue 的内容替换为下方所示的一行文本&#xff1a; 在 dev 主机组中的主机上&#xff0c;这行文本…
阅读更多...
PG常用SQL

PG常用SQL

数据库 创建数据库 PostgreSQL 创建数据库可以用以下三种方式&#xff1a; 1、使用 CREATE DATABASE SQL 语句来创建。2、使用 createdb 命令来创建。3、使用 pgAdmin 工具。 CREATE DATABASE 创建数据库 CREATE DATABASE 命令需要在 PostgreSQL 命令窗口来执行&#xff0…
阅读更多...
【校招VIP】前端vue考点之生命周期和双向绑定

【校招VIP】前端vue考点之生命周期和双向绑定

考点介绍&#xff1a; VUE是前端校招面试的重点&#xff0c;而生命周期和双向绑定又是基础考点之一&#xff0c;尤其在一二线公司&#xff0c;要求知道双向绑定的原理&#xff0c;以及相关代码实现。 『前端vue考点之生命周期和双向绑定』相关题目及解析内容可点击文章末尾链接…
阅读更多...
【C#】条码管理操作手册

【C#】条码管理操作手册

前言&#xff1a;本文档为条码管理系统操作指南&#xff0c;介绍功能使用、参数配置、资源链接&#xff0c;以及异常的解决等。思维导图如下&#xff1a; 一、思维导图 二、功能操作–条码打印&#xff08;客户端&#xff09; 2.1 参数设置 功能介绍&#xff1a;二维码图片样…
阅读更多...
【AI大模型】训练Al大模型 （上篇）

【AI大模型】训练Al大模型 （上篇）

大模型超越AI 前言 洁洁的个人主页 我就问你有没有发挥&#xff01; 知行合一&#xff0c;志存高远。 目前所指的大模型&#xff0c;是“大规模深度学习模型”的简称&#xff0c;指具有大量参数和复杂结构的机器学习模型&#xff0c;可以处理大规模的数据和复杂的问题&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023