前端【JS】

最新推荐文章于 2024-06-04 17:01:09 发布
最新推荐文章于 2024-06-04 17:01:09 发布
阅读量489 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48336929/article/details/109828350
版权

【JS】

一、JavaScript

JavaScript是web的第三个支柱，除了HTML和CSS之外，它通常用于使web页面具有交互性。要理解JavaScript (JS)，我们需要知道DOM是什么。

**文档对象模型(DOM)**是一种独立于语言的应用程序编程接口，它将HTML文档转换为树结构。每个文档的节点都被组织在树结构中，称为DOM树，其中最顶层的节点称为“文档对象”。

**浏览器对象模型(BOM)**统管浏览器的属性、结构、功能的。

1、概述

**JavaScript：**是客户端脚本语言。 **plug-in：**专家级程序员开发语言。

Java 和 Js 没有关系，区别是：

  1. js客户端脚本，java客户端语言。
  2. js基于对象，java面向对象。
  3. java编译执行，js解释执行。
  4. java强语言，js弱语言。（弱在数据类型）

**Js的构成：**核心、DOM（文档对象模型 document object model）、BOM（浏览器模型 browse object model）。

写法： <script language="script" type="text/javascript"></script>

  1. html网页的body写。
  2. 在head里的script标签写。
  3. 在单独js文件写。连接进入。

注意： 1 、2 都在<script></script> 。3、<script language="script" type="Text/javascript" src="XXX.js"></script>

2、语法

2.1、变量与类型

**js的数据类型：**String、boolean、number、object、null、undefined 、Array。

**数型转化：**String–number–boolean，在js里面 true=1，false=0。

定义变量: var 变量名 = 值，使用 typeof xxx 来判断xxx的类型。new Array 来定义数组，类型可以不一致。而且不会自动转化。

**类型转化方法：**字符转数字–parseInt() & parseFloat（）。

var inp = document.getElementById("input1");
document.write(inp.value);
document.write("<br/>");
var str = "字符<br/>";
var num = "43<br/>";
document.write(str);
document.write(num);
var nums = new Array("字符",123,true);
document.write(typeof nums[0]+"<br/>");
document.write(typeof nums[1]+"<br/>");
document.write(typeof nums[2]+"<br/>");
var str2 = "2.2";
var num2 = 2;
document.write(parseFloat(str2)+num2);
str2 = true;// 不会受之前数值的类型限制
document.write(str2+"<br>");
str2 = "haha123";
document.write(parseFloat(str2)+"<br/>");// NAN Not A Number 类型转化失败时。

2.2、输出内容

  1. alert() 跳出一个信息，会中止程序，一个参数是输出的内容。
  2. confirm() 跳出一个对话框可以选择，是或者否。一个参数选择提示信息，返回一个boolean的值。
  3. prompt() 跳出一个对话框可以录入输入内容，两个参数一个信息提示一个录入内容，返回录入的信息。
  4. document.write() 在页面书写内容 一半写在body的script里.注意往页面书写标签会被解析。

2.3、运算符

算术运算符：+ - * / %
比较运算符：> < >= <= != == === !== == 不转化类型在 js中，true 就是 1。===会类型转化。
赋值运算符：+= -= /= %=
逻辑运算符：&& || ！

2.4、逻辑语法

判断： 三元运算符、if判断、switch判断。

**循环：**while、do…while、for循环、for in循环。

在js语法体系中，任何类型的值都可以作为boolean的值放在流程控制中判断 if 其中为false的内容：0,false,null,undefined,NaN,空字符。

for in 循环 每次从数字里拿出一个索引 for(p in arr) arr[p]。

2.5、类定义

  1. 使用Object来定义一个对象，对象名就是变量名。
  2. 给对象添加属性只需要.+属性名就可以。
  3. 也可以把方法作为一个属性，意思是有一个属性名的方法。
  4. 在方法内可以使用定义的属性，通过this关键字来调用。方法参数不需要指定类型。

JSON定义对象 JSON {键:值,键:值…}

var stu = new Object();
stu.name = "张三";
stu.age = 23;
stu.eat = function(food){
	// 定义方法可以使用自己的属性 用this来使用
	alert(this.age+"岁的"+this.name+"在吃"+food+"....");
};
stu.eat(true);
// 使用JSON格式来定义 键：值
// JSON 定义数组 
var nums = [];
nums.push("hello");// 数组放值。
nums.push(123);
document.write("1:"+nums+"<br/>");
nums.length = 0;// 清空数组
document.write("2:"+nums+"<br/>");
// JSON定义对象 JSON {键:值,键:值....}
var str2 = {
	name:"李四",
	age:44,
	hobby:["动漫","游戏","可乐"],// 数组定义
	eat:function(){// 方法定义
		document.write(this.hobby);
	}
};
str2.eat();
document.write("<hr>");
// 函数的构造运用
function student(sno){
	this.sno = sno;
	this.eat = function(){
		document.write(sno);
	};
	this.play = function(){test();};
};
var s = new student("instance");
s.eat();
s.play();

2.6、函数

函数:使用阶段：

  1. 封装一段可以重复使用的代码

    ​ function abc(a,b,c){} js里的方法必有返回值，通过return来返回的。如果没写那么返回值就是undefined。调用函数的时候可以使用与形参不一致的参数。函数无重载时，后面的声明会覆盖前面的声明。函数的参数全部封装在 arguments 的数组里。

  2. 高级使用

    ​ js中函数也可以作为一个数据类型，声明函数时创造了Function对象,对象名就是函数名，意味着函数可以赋值，也可以作为返回值和参数。

  3. 可以作为构造函数的构造器

    ​ 如果调用时候使用 new 那么该函数就是一个构造函数。

function abc(a,b,c){
	alert(a+b+c);
}
function abc(a,b,c){
	alert(a+b);
}
//abc(1,2,3);
function test(){return 123;}
function test2(num){
	alert(num);
	return test();// 作为返回值。
}
var nums = test2(test());// 作为参数传递。
document.write("<font color=red >"+nums+"</font>");

var person1 = {
	name:"悟空",
	age:23
}
var person2 = {
	name:"八戒",
	age:44,
}
var person = {
	get:function(a,b){
		return this.name+":"+this.age+":"+a+":"+b;
	}
}
var strs = person.get.call(person2,"行","吧");// call方法
strs = person.get.apply(person1,["行","吧"]);// apply方法
document.write("<br/>"+strs+"<br/>")
var name = "东野圭吾";
function show1(){
	var name2 = "山本耀司";
	document.write("<br/>"+name+"<br/>");
	document.write("<br/>"+name2+"<br/>");
}
function show2(){
	document.write("<br/>"+name+"<br/>");
	document.write("<br/> 1"+name+"<br/>");// 因为name2 找不到而报错
}
show1();
show2();
alert("信息提示框");
var flag = confirm("选择对话框");
var string = prompt("信息输入框","默认值1");
document.write("<br/>"+flag+"<br/>");
document.write("<br/>"+string+"<br/>");

3、DOM

HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有对象：
JavaScript 能改变页面中的所有 HTML 元素。
JavaScript 能改变页面中的所有 HTML 属性。
JavaScript 能改变页面中的所有 CSS 样式。
JavaScript 能删除已有的 HTML 元素和属性。
JavaScript 能添加新的 HTML 元素和属性。
JavaScript 能对页面中所有已有的 HTML 事件作出反应。
JavaScript 能在页面中创建新的 HTML 事件。

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
作为对象的 HTML 元素。
所有 HTML 元素的属性。
访问所有 HTML 元素的方法。
所有 HTML 元素的事件。

**换言之：**HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素及其属性的标准。

3.1、获取标签对象

方法描述
document.getElementById(id)通过元素 id 来查找元素
document.getElementsByTagName(name)通过标签名来查找元素
document.getElementsByClassName(name)通过类名来查找元素
document.getElementsByName(name)通过name名来查找元素

id获取的是单个标签对象，而其它都是标签的数组。

3.2、改变 HTML 元素

方法描述
element.innerHTML = new html content改变元素的 inner HTML
element.attribute = new value改变 HTML 元素的属性值
element.setAttribute(attribute, value)改变 HTML 元素的属性值
element.style.property = new style改变 HTML 元素的样式

3.3、添加和删除元素

方法描述
document.createElement(element)创建 HTML 元素
document.removeChild(element)删除 HTML 元素
document.appendChild(element)添加 HTML 元素
document.replaceChild(element)替换 HTML 元素
document.write(text)写入 HTML 输出流

3.4、添加事件处理程序

方法描述
document.getElementById(id).onclick = function(){code}向 onclick 事件添加事件处理程序

3.5、CSS选择器查找HTML元素

使用querySelectorAll()查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素。

<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>querySelectorAll</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>

3.6、通过 HTML 对象选择器查找 HTML 对象

var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

以下是其他HTML获取HTML的对象连接。

function change(){
	var f1 = document.getElementById("input1");
	//f1.color = "blue";
	//f1.setAttribute("size","7");
	//f1.style.font-size = "18px";
	f1.style.color = "blue";
	f1.style.width = "200px";
	f1.type = "hidden";
}

3.7、BOM计时器

**setTimeOut()😗*一次计时器 一个参数：事件本身，返回计时器对象。

**setInterval()😗*每一次计时器 两个参数；A：事件本身 B：间隔时间，返回计时器对象。

**clearTimeOut()😗*清除一次计时器 一个参数：计时器。

**clearInterval()😗*清除所有计时器 一个参数：计时器。

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
    function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
    }
}

3.8、DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应：

​ JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。

为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码：οnclick=JavaScript

事件 = JavaScript
<!--例子-->
<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>

HTML 事件属性

​ 如需向 HTML 元素分配事件，您能够使用事件属性。

<button onclick="displayDate()">试一试</button>

使用 HTML DOM 分配事件

​ HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件。

<script>
	document.getElementById("myBtn").onclick = displayDate;
</script>

3.9、事件监听

addEventListener() 方法： 添加当用户点击按钮时触发的事件监听器。

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

您能够向一个元素添加多个事件处理程序。

您能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。

您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。

通过使用 removeEventListener() 方法轻松地删除事件监听器。

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

**注意：**请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

向元素添加事件处理程序

​ 当用户点击某个元素时提示 “Hello World!”：

element.addEventListener("click", function(){ alert("Hello World!"); });

​ 也可以引用外部“命名”函数：当用户点击某个元素时提示 “Hello World!”：

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

向相同元素添加多个事件处理程序

​ addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

向 Window 对象添加事件处理程序

​ addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。

【实例】添加当用户调整窗口大小时触发的事件监听器：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

传递参数

​ 当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”：

element.addEventListener("click", function(){ myFunction(p1, p2); });

3.10、DOM 导航

根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：

  • 整个文档是文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 所有注释是注释节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8j6LTzJe-1605796409071)(E:\讲师工作\二阶段\课程笔记\第一部分\ct_htmltree.gif)]

有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。

能够创建新节点，还可以修改和删除所有节点。

节点关系

节点树中的节点彼此之间有一定的等级关系。

  • 术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。
  • 在节点树中，顶端节点被称为根（根节点）。
  • 每个节点都有父节点，除了根（根节点没有父节点）。
  • 节点能够拥有一定数量的子
  • 同胞（兄弟或姐妹）指的是拥有相同父的节点。
<html>
   <head>
       <title>DOM 教程</title>
   </head>
  <body>
       <h1>DOM 第一课</h1>
       <p>Hello world!</p>
   </body>
</html>

从以上的 HTML 中您能读到以下信息：

  • <html> 是根节点
  • <html> 没有父
  • <html> 是 <head> 和 <body> 的父
  • <head> 是 <html> 的第一个子
  • <body> 是 <html> 的最后一个子

同时：

  • <head> 有一个子：<title>
  • <title> 有一个子（文本节点）：“DOM 教程”
  • <body> 有两个子：<h1> 和 <p>
  • <h1> 有一个子：“DOM 第一课”
  • <p> 有一个子：“Hello world!”
  • <h1> 和 <p> 是同胞

在节点之间导航

通过 JavaScript，您可以使用以下节点属性在节点之间导航：

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

子节点和节点值

DOM 处理中的一种常见错误是认为元素节点中包含文本。

<title id="demo">DOM 教程</title>

（上面例子中的）元素节点 <title> 不包含文本。

它包含了值为 “DOM 教程” 的文本节点。

文本节点的值能够通过节点的 innerHTML 属性进行访问：

var myTitle = document.getElementById("demo").innerHTML;

访问 innerHTML 属性等同于访问首个子节点的 nodeValue：

var myTitle = document.getElementById("demo").firstChild.nodeValue;

也可以这样访问第一个子节点：

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

以下三个例子取回 <h1> 元素的文本并复制到 <p> 元素中：

<html>
    <body>
        <h1 id="id01">我的第一张页面</h1>
        <p id="id02">Hello!</p>
        <script>
             document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
        </script>
    </body>
</html>

DOM 根节点

有两个特殊属性允许访问完整文档：

  • document.body - 文档的 body
  • document.documentElement - 完整文档
<html>
    <body>
        <p>Hello World!</p>
        <div>
        	<p>DOM 很有用！</p>
        	<p>本例演示 <b>document.documentElement</b> 属性。</p>
        </div>
        <script>
            //alert(document.body.innerHTML);
        	alert(document.documentElement.innerHTML);
        </script>
    </body>
</html>

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 等同于标签名
  • 属性节点的 nodeName 是属性名称
  • 文本节点的 nodeName 总是 #text
  • 文档节点的 nodeName 总是 #document
<h1 id="id01">我的第一张网页</h1>
<p id="id02">Hello!</p>
<script>
	document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeName;
</script>

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

<h1 id="id01">我的第一张网页</h1>
<p id="id02">Hello!</p>
<script>
	document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeType;
</script>

最重要的 nodeType 属性是：

节点类型例子
ELEMENT_NODE1<h1 class=“heading”>W3School</h1>
ATTRIBUTE_NODE2class = “heading” （弃用）
TEXT_NODE3W3School
COMMENT_NODE8
DOCUMENT_NODE9HTML 文档本身（<html> 的父）
DOCUMENT_TYPE_NODE10<!Doctype html>

3.11、DOM 集合

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象是类数组的 HTML 元素列表（集合）。

下面的代码选取文档中的所有 <p> 元素：

var x = document.getElementsByTagName("p");
// 该集合中的元素可通过索引号进行访问。
// 如需访问第二个 <p> 元素，您可以这样写：
y = x[1];

HTML HTMLCollection 长度

length 属性定义了 HTMLCollection 中元素的数量：

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

实例解释：

  • 创建所有 <p> 元素的集合
  • 显示集合的长度

length 属性在您需要遍历集合中元素时是有用的：

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

3.12、DOM 节点列表

NodeList 对象是从文档中提取的节点列表（集合）。

NodeList 对象与 HTMLCollection 对象几乎相同。

如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。

所有浏览器都会为 childNodes 属性返回 NodeList 对象。

大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。

下面的代码选取文档中的所有 <p> 节点：

var myNodeList = document.querySelectorAll("p");
  • 创建所有

    元素的列表

  • 显示该列表的长度

length 属性在您希望遍历节点列表中的节点时很有用：

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

HTMLCollection 与 NodeList 的区别

HTMLCollection（前一章）是 HTML 元素的集合。

NodeList 是文档节点的集合。

NodeList 和 HTML 集合几乎完全相同。

HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。

它们都有定义列表（集合）中项目数的 length 属性。

它们都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。

访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。

访问 NodeList 项目，只能通过它们的索引号。

只有 NodeList 对象能包含属性节点和文本节点。

节点列表不是数组！

节点数组看起来像数组，但并不是。

您能够遍历节点列表并像数组那样引用其节点。

不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。

4、BOM

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

浏览器对象模型（Browser Object Model (BOM)）

不存在浏览器对象模型（BOM）的官方标准。

现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。

4.1、Window - 浏览器窗口

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("header");// js可以省略

窗口尺寸

两个属性可用用于确定浏览器窗口的尺寸。

这两个属性都以像素返回尺寸：

  • window.innerHeight - 浏览器窗口的内高度（以像素计）
  • window.innerWidth - 浏览器窗口的内宽度（以像素计）

浏览器窗口（浏览器视口）不包括工具栏和滚动条。

对于 Internet Explorer 8, 7, 6, 5：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或

  • document.body.clientHeight
  • document.body.clientWidth

一个实用的 JavaScript 解决方案（包括所有浏览器）：

实例

// 该例显示浏览器窗口的高度和宽度：（不包括工具栏和滚动条）
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

其他窗口方法

一些其他方法：

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

4.2、Screen 对象包含用户屏幕的信息

Window Screen

window.screen 对象不带 window 前缀也可以写：

属性：

  • screen.width
  • screen.height
  • screen.availWidth
  • screen.availHeight
  • screen.colorDepth 色深
  • screen.pixelDepth

Window Screen 宽度

screen.width 属性返回以像素计的访问者屏幕宽度。

Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。

实例

显示以像素计的屏幕可用宽度：

document.getElementById("demo").innerHTML = "Available Screen Width: " + screen.availWidth;

Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。

实例

显示以像素计的屏幕可用高度：

document.getElementById("demo").innerHTML="Available Screen Height: " + screen.availHeight;

Window Screen 色深

screen.colorDepth 属性返回用于显示一种颜色的比特数。

所有现代计算机都使用 24 位或 32 位硬件的色彩分辨率：

  • 24 bits =16,777,216 种不同的 “True Colors”
  • 32 bits = 4,294,967,296 中不同的 “Deep Colors”

更老的计算机使用 14 位：65,536 种不同的 “High Colors” 分辨率。

异常古老的计算机，以及老式的手机使用 8 位：256 中不同的 “VGA colors”。

实例

显示以位计的屏幕色彩深度：

document.getElementById("demo").innerHTML = "Screen Color Depth: " + screen.colorDepth;

HTML 中使用的 #rrggbb (rgb) 值代表 “True Colors” （16,777,216 中不同的颜色）。

Window Screen 像素深度

screen.pixelDepth 属性返回屏幕的像素深度。

实例

显示以位计的屏幕像素深度：

document.getElementById("demo").innerHTML = "Screen Pixel Depth: " + screen.pixelDepth;

4.3、Location 地址

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

Window Location

*window.location* 对象可不带 window 前缀书写。

一些例子：

  • window.location.href 返回当前页面的 href (URL)
  • window.location.hostname 返回 web 主机的域名
  • window.location.pathname 返回当前页面的路径或文件名
  • window.location.protocol 返回使用的 web 协议（http: 或 https:）
  • window.location.assign 加载新文档。

Window Location Href

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

实例

显示当前页面的 href (URL)：

document.getElementById("demo").innerHTML = "页面位置是 " + window.location.href;

Window Location 主机名

window.location.hostname 属性返回（当前页面的）因特网主机的名称。

实例

显示主机的名称：

document.getElementById("demo").innerHTML = "页面主机名是 " + window.location.hostname;

Window Location 路径名

window.location.pathname 属性返回当前页面的路径名。

实例

显示当前 URL 的路径名：

document.getElementById("demo").innerHTML = "页面路径是 " + window.location.pathname;

Window Location 协议

window.location.protocol 属性返回页面的 web 协议。

实例

显示 web 协议：

document.getElementById("demo").innerHTML = "页面协议是 " + window.location.protocol;

Window Location 端口

window.location.port 属性返回（当前页面的）互联网主机端口的编号。

实例

显示主机的端口号：

document.getElementById("demo").innerHTML = "端口号是： " + window.location.port;

Window Location Assign

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

实例

加载新文档：

<html>
<head>
<script>
function newDoc() {
    window.location.assign("https://www.w3school.com.cn")
 }
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>

4.4、History 浏览历史

window.history 对象包含浏览器历史。

Window History

window.history 对象可不带 window 书写。

为了保护用户的隐私，JavaScript 访问此对象存在限制。

一些方法：

  • history.back() - 等同于在浏览器点击后退按钮
  • history.forward() - 等同于在浏览器中点击前进按钮

Window History Back

history.back() 方法加载历史列表中前一个 URL。

这等同于在浏览器中点击后退按钮。

实例

在页面中创建后退按钮：

<html>
<head>
<script>
function goBack() {
    window.history.back()
 }
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>

Window History Forward

history forward() 方法加载历史列表中下一个 URL。

这等同于在浏览器中点击前进按钮。

实例

在页面中创建前进按钮：

<html>
<head>
<script>
function goForward() {
    window.history.forward()
 }
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()">
</body>
</html>

4.5、Navigator 访问者的信息

window.navigator 对象包含有关访问者的信息。

Window Navigator

window.navigator对象可以不带 window 前缀来写。

一些例子：

  • navigator.appName
  • navigator.appCodeName
  • navigator.platform

浏览器 Cookie

cookieEnabled 属性返回 true，如果 cookie 已启用，否则返回 false：

实例

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "cookiesEnabled is " + navigator.cookieEnabled;
</script>

浏览器应用程序名称

appName 属性返回浏览器的应用程序名称：

实例

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.appName is " + navigator.appName;
</script>

很陌生吧，“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。

浏览器应用程序代码名称

appCodeName 属性返回浏览器的应用程序代码名称：

实例

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.appCodeName is " + navigator.appCodeName;
</script>

“Mozilla” 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。

浏览器引擎

product 属性返回浏览器引擎的产品名称：

实例

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.product is " + navigator.product;
</script>

浏览器版本

appVersion 属性返回有关浏览器的版本信息：

实例

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.appVersion;
</script>

浏览器代理

userAgent 属性返回由浏览器发送到服务器的用户代理报头（user-agent header）：

实例

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.userAgent;
</script>

警告！！！

来自 navigator 对象的信息通常是误导性的，不应该用于检测浏览器版本，因为：

  • 不同浏览器能够使用相同名称
  • 导航数据可被浏览器拥有者更改
  • 某些浏览器会错误标识自身以绕过站点测试
  • 浏览器无法报告发布晚于浏览器的新操作系统

浏览器平台

platform 属性返回浏览器平台（操作系统）：

实例

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.platform;
</script>

浏览器语言

language 属性返回浏览器语言：

实例

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.language;
</script>

浏览器是否在线？

onLine 属性返回 true，假如浏览器在线：

实例

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.onLine;
</script>

Java 是否启用？

javaEnabled() 方法返回 true，如果 Java 已启用：

实例

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.javaEnabled();
</script>

4.6、弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。

警告框

如果要确保信息传递给用户，通常会使用警告框。

当警告框弹出时，用户将需要单击“确定”来继续。

语法

window.alert("sometext");

window.alert() 方法可以不带 window 前缀来写。

实例

alert("我是一个警告框！");

确认框

如果您希望用户验证或接受某个东西，则通常使用“确认”框。

当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。

如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。

语法

window.confirm("sometext");

window.confirm() 方法可以不带 window 前缀来编写。

实例

var r = confirm("请按按钮");
if (r == true) {
    x = "您按了确认！";
} else {
    x = "您按了取消！";
}

提示框

如果您希望用户在进入页面前输入值，通常会使用提示框。

当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

语法

window.prompt("sometext","defaultText");

window.prompt() 方法可以不带 window 前缀来编写。

实例

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}

折行

如需在弹出框中显示折行，请在反斜杠后面加一个字符 n。

实例

alert("Hello\nHow are you?");

4.7、Timing 计数器

JavaScript 可以在时间间隔内执行。

这就是所谓的定时事件（ Timing Events）。

Timing 事件

window 对象允许以指定的时间间隔执行代码。

这些时间间隔称为定时事件。

通过 JavaScript 使用的有两个关键的方法：

  • setTimeout(function, milliseconds)

    在等待指定的毫秒数后执行函数。

  • setInterval(function, milliseconds)

    等同于 setTimeout()，但持续重复执行该函数。

setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

setTimeout() 方法

window.setTimeout(function, milliseconds);

window.setTimeout() 方法可以不带 window 前缀来编写。

第一个参数是要执行的函数。

第二个参数指示执行之前的毫秒数。

实例

单击按钮。等待 3 秒，然后页面会提示 “Hello”：

<button onclick="setTimeout(myFunction, 3000)">试一试</button>

<script>
function myFunction() {
    alert('Hello');
 }
</script>

如何停止执行？

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不带 window 前缀来写。

clearTimeout() 使用从 setTimeout() 返回的变量：

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

实例

类似上例，但是添加了“停止”按钮：

<button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button>
<button onclick="clearTimeout(myVar)">停止执行</button>

setInterval() 方法

setInterval() 方法在每个给定的时间间隔重复给定的函数。

window.setInterval(function, milliseconds);

window.setInterval() 方法可以不带 window 前缀来写。

第一个参数是要执行的函数。

第二个参数每个执行之间的时间间隔的长度。

本例每秒执行一次函数 “myTimer”（就像数字手表）。

实例

显示当前时间：

var myVar = setInterval(myTimer, 1000);
 
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

如何停止执行？

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

window.clearInterval(timerVariable)

window.clearInterval() 方法可以不带 window 前缀来写。

clearInterval() 方法使用从 setInterval() 返回的变量：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

实例

类似上例，但是我们添加了一个“停止时间”按钮：

<p id="demo"></p>

<button onclick="clearInterval(myVar)">停止时间</button>

<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

4.8、Cookies

Cookie 让您在网页中存储用户信息。

什么是 cookie？

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切（session会话）。

Cookie 是为了解决“如何记住用户信息”而发明的：

  • 当用户访问网页时，他的名字可以存储在 cookie 中。
  • 下次用户访问该页面时，cookie 会“记住”他的名字。

Cookie 保存在名称值对中，如：

username = Bill Gates

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。

通过 JavaScript 创建 cookie

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

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username = Bill Gates";

您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username = Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/e:cookie.txt";

通过 JavaScript 读取 cookie

通过 JavaScript，可以这样读取 cookie：

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

通过 JavaScript 改变 cookie

通过使用 JavaScript，你可以像你创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

旧 cookie 被覆盖。

通过 JavaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您应该定义 cookie 路径以确保删除正确的 cookie。

如果你不指定路径，一些浏览器不会让你删除 cookie。

Cookie 字符串

document.cookie 属性看起来像一个正常的文本字符串。但它不是。

即使你向 document.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 来存储访问者的名称。

访客第一次到达网页时，会要求他填写姓名。然后将该名称存储在 cookie 中。

下次访客到达同一页时，他将收到一条欢迎消息。

例如，我们将创建 3 个JavaScript函数：

  1. 设置 cookie 值的函数
  2. 获取 cookie 值的函数
  3. 检查 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.toUTCString();// 设置过期时间
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

例子解释：

上面这个函数的的参数是：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）。

通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。

获取 cookie 的函数

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

实例

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

函数解释：

把 cookie 作为参数（cname）。

创建变量（name）与要搜索的文本（CNAME”=”）。

解码 cookie 字符串，处理带有特殊字符的 cookie，例如 “$”。

用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(’;’)）的数组中。

遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。

如果找到 cookie（c.indexOf(name) == 0），则返回该 cookie 的值（c.substring(name.length, c.length）。

如果未找到 cookie，则返回 “”。

检测 cookie 的函数

最后，我们创建检查 cookie 是否设置的函数。

如果已设置 cookie，将显示一个问候。

如果未设置 cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie 函数：

实例

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);
        }
    }
}

现在组合起来

实例

// 设置cookie方法
function setCookie(cname, cvalue, exdays) {
    var d = new Date();// 获取时间
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));// exdays 设置过期时间
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

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

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

二、JavaScript 面向对象

和Java一样，js也是有自己的面向对象封装思想。如何去定义类。

老方法：使用声明方式定义，使用new关键字创建。

<script>
   // 使用函数式声明定义类
	function Person(name,age){
		this.name = name;
		this.age = age;
		this.show = function(){
			console.log(name+":"+age);
		};
	}
	var p1 = new Person("张三",22);
	p1.show();
</script>

新方法：定义类，使用new创建对象。

<script>
	class Person2{
		// 构造方法
		constructor(name,age){
			this.name = name;
			this.age = age;
		}
		// getName
		getName(){
			console.log("getName方法");
			return this.name;
		}
		showName(){
			console.log(this.getName());// 调用带有返回值的内部方法
		}
		show(){
			console.log(this.name+":"+this.age);
		}
		// 静态方法
		static show2(){
			console.log("静态方法");
		}
	}
	var p2 = new Person2("李白",44);
	p2.getName();
	p2.show();
	Person2.show2();// 静态方法直接使用类名。
	p2.showName();
</script>

封装：也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。

继承：通过继承创建的新类称为“子类”或“派生类”。继承的过程，就是从一般到特殊的过程。

多态：对象的多功能，多方法，一个方法多种表现形式。

Javascript是一种基于对象（object-based）的语言。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）—–es6以前是这样的。所以es5只有使用函数模拟的面向对象。

1、对象实例化

原始模式：这样的写法有两个缺点，一是如果多生成几个（100个！）实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出没有什么联系。

var Car = {
    color: 'red',//车的颜色
    wheel: 4,//车轮数量
}
var Car2 = {
    color: 'blue',
    wheel: 4,
}
alert(Car.color);//red

原始模式的改进：通过写一个函数，解决代码重复的问题。

function createCar(color,wheel) {
    return {
        color:color,
        wheel:wheel
    }
}
//然后生成实例对象，就等于是在调用函数：
var cat1 = createCar("红色","4");
var cat2 = createCar("蓝色","4");
alert(cat1.color);//红色

工厂模式

function createCar(color,wheel){//createCar工厂
    var obj = new Object;//或obj = {} 原材料阶段
    obj.color = color;//加工
    obj.wheel = wheel;//加工
    return obj;//输出产品
}
//实例化
var cat1 = createCar("红色","4");
var cat2 = createCar("蓝色","4");
alert(cat1.color);//红色

构造函数模式：为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。 所谓”构造函数”，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。加new执行的函数构造内部变化：自动生成一个对象，this指向这个新创建的对象，函数自动返回这个新创建的对象

class类定义

class Person2{
	// 构造方法
	constructor(name,age){
		this.name = name;
		this.age = age;
	}
	// getName
	getName(){
		console.log("getName方法");
		return this.name;
	}
	showName(){
		console.log(this.getName());// 调用带有返回值的内部方法
	}
	show(){
		console.log(this.name+":"+this.age);
	}
	// 静态方法
	static show2(){
		console.log("静态方法");
	}
}
var p2 = new Person2("李白",44);
p2.getName();
p2.show();
Person2.show2();// 静态方法直接使用类名。
p2.showName();

2、Prototype 原型

function CreateCar(color,wheel){
    //属性写构造函数里面
    this.color = color;
    this.wheel = wheel;
}
//方法写原型里面
CreateCar.prototype.showWheel = function(){
    alert(this.wheel);
}
CreateCar.prototype.showName = function(){
    alert('车');
}
//生成实例。
var cat1 = new CreateCar("红色","4");
var cat2 = new CreateCar("蓝色","4");
cat1.showName();//'车'
//这时所有实例的showWheel属性和showName方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。
alert(cat1.showWheel == cat2.showWheel );//true
alert(cat1.showName == cat2.showName );//true
console.log(cat1.__proto__ === CreateCar.prototype); //true

3、对象和函数的关系

对象是由函数构造出来的。

Object是Function 的一个实例。

Object.constructor  == Function  //true

函数是Function 的实例，但不是Object 的实例。

function fn(){}
fn.constructor  == Function  //true
fn.constructor  == Object    //false

{} 与 Object 的关系。

var obj = {};
obj.constructor  === Object   //true 创建了一个JSON对象

4、对象继承

继承在我们的项目开发中主要使用为子类继承父类，下面是es6继承的书写方法。

class Father {　　　
    constructor(name) {
         this._name = name;
     }　　　
    //实例方法，通过实例对象调用
     getName() {
         console.log(this._name);
     }　　　
    // 静态方法不会被继承,并且是通过类名去调用的　　　
    static hitXiaoMing() {         
        console.log("打小明")
     } 
}
class Son extends Father {
     constructor(name, age) {
         //实例化子类的时候把子类的数据传给父类（这里的super必须有，super里的参数是所继承的父类实例化所需要的数据）
         super(name);
         this._age = age;
     } 
}
var DaMing = new Father('大明'); 
Father.hitXiaoMing(); //打小明 
DaMing.getName(); //大明  
var XiaoMing = new Son('小明'，15); 
XiaoMing.getName(); //小明

继承会继承父类的实例属性和实例方法，并不会继承静态属性和静态方法，并且静态方法只能通过类名去调用。

5、多态

多态的具体表现为方法重载和方法重写：

方法重载：重载是指不同的函数使用相同的函数名，但是函数的参数个数或类型不同。调用的时候根据函数的参数来区别不同的函数

方法重写：重写（也叫覆盖）是指在派生类中重新对基类中的虚函数（注意是虚函数）重新实现。即函数名和参数都一样，只是函数的实现体不一样

下面我们根据上面的例子在添加一个work的方法说明一下方法重写：

class Father {
　　　constructor(name) {
         this._name = name;
     }
　　　//实例方法，通过实例对象调用
     getName() {
         console.log(this._name);
     }     
    work() {     　　
        console.log('我的工作是累死累活，赚钱养家');    
    }
　　　// 静态方法不会被继承,并且是通过类名去调用的
　　　static hitXiaoMing() {
         console.log("打小明");
     }
 }
class Son extends Father {
     constructor(name, age) {
         //实例化子类的时候把子类的数据传给父类（这里的super必须有，super里的参数是所继承的父类实例化所需要的数据）
         super(name);
         this._age = age;
     } 
     work() {     　　
         console.log('我的工作是好好学习，天天向上。');     
     }
}
var DaMing = new Father('大明');
DaMing.work() // 我的工作是累死累活，赚钱养家。
var XiaoMing = new Son('小明'，15);  
XiaoMing.work(); // 我的工作是好好学习，天天向上。

以上我们重写了父类的work（）方法。

三大特征的优点：

封装：封装的优势在于定义只可以在类内部进行对属性的操作，外部无法对这些属性指手画脚，要想修改，也只能通过你定义的封装方法；

继承：继承减少了代码的冗余，省略了很多重复代码，开发者可以从父类底层定义所有子类必须有的属性和方法，以达到耦合的目的；

多态：多态实现了方法的个性化，不同的子类根据具体状况可以实现不同的方法，光有父类定义的方法不够灵活，遇见特殊状况就捉襟见肘了。

首领ろ荆棘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
window 对象
m0_73671382的博客
09-26 165
window 对象的属性。按钮对象的常用属性和事件。文本框对象的常用属性，方法和事件。post的数据不会在URL中显示，而get则会显示；所以建议使用post，安全！History对象：有关客户访问过的URL的信息。Location对象：有关当前URL的信息。提交表单时触发，返回false时取消提交。文本框内容改变且失去焦点时触发。窗口的滚动条被拖动是时触发。将事件绑定到元素属性。将事件绑定到对象属性。窗口的大小改变时触发。
JS中BOM编程：window对象的history对象的go和back方法
m0_53881899的博客
09-01 498
JS中BOM编程：window对象的history对象的go和back方法
前端基础JS篇
最新发布
weixin_61808639的博客
06-04 1101
HTML 事件可以是浏览器行为，也可以是用户行为。当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生.JS的事件驱动指的就是行为触发代码运行的这种特点。
Android WebView 回退到原生goback(） 遭遇重定向
Alangao的博客
11-09 4249
1.项目遇到调用H5的时候，永远返回不到原生的界面的尴尬。遇到的坑，来分享给大家。 导致这个问题的是由于前端页面的加载了很多的链接的时候，从一个url到另一个url，最后返回的时候永远的回到是到首页，也是由于首页的链接给的是.cn后缀而不是.html后缀。此时无法改变前端的问题，只有在我们移动端去监听webview的webViewClient里面的方法，来监听开始进来的地址。 2.具体的
前端——JS
m0_68519425的博客
05-12 1056
（1）一个事件可以同时绑定多个JS函数（2）一个页面元素可以同时绑定多个事件。
JavaScript基础（.....持续待更）
ahct58280的博客
04-23 466
javascript热身 一、你知道，为什么JavaScript非常值得我们学习吗？ 1. 所有主流浏览器都支持JavaScript。 2. 目前，全世界大部分网页都使用JavaScript。 3. 它可以让网页呈现各种动态效果。 4. 做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。 二、易学性 1.学习环...
前端之JavaScript
qq_774952435的博客
05-08 3487
JS基本用法
Vue.js前端 JavaScript 框架
03-15
Vue.js 是一款流行的前端 JavaScript 框架，它是一款轻量级、高性能的框架，用于构建交互式的用户界面和单页应用程序。Vue.js 的特点包括： 响应式数据绑定：Vue.js 实现了数据的双向绑定，当数据发生变化时，视图...
前端JS
02-13
**前端JS** 前端JavaScript是构建现代网页和应用程序的关键技术之一，它允许动态交互和丰富的用户体验。JavaScript Vanilla，React和Vue都是JavaScript的框架或库，它们各自提供了不同的工具和方法来优化开发过程。...
sokect通信前端js
02-21
sokect通信前端js
前端 javaScript es5学习
12-25
前端 javaScript es5学习
网易前端JS框架
04-04
在标签“前端js”中，我们了解到该框架是基于JavaScript语言的，JavaScript是Web开发的标准语言，用于处理客户端逻辑。通过使用JavaScript框架，开发者可以更好地组织代码，处理事件，创建动态和交互性的用户体验。 ...
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
热门推荐
等风来
08-31 2万+
正式开始学习前 确保你已学过前端三件套 HTML CSS JavaScriptVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应用程序开发中。前端框架那么多，为什么Vue.js非学不可？Vue.js的简洁语法和易用性使得它成为构建现代Web应用程序的优秀选择，无论是小型项目还是大型复杂的应用都能发挥出色的效果。Vue.js使用双向绑定的数据模型，将数据和视图进行关联。
window.history.go()和history.back()以及location.reload()的用法以及不同
hiro_1015的博客
07-20 1万+
window.history.go(-1);   返回上一页, 原页面表单中的内容会丢失; window.history.back(-1);  返回上一页, 原页面表单中的内容会保留. 以下为举例： &lt;input type="button" value="刷新" onclick="window.location.reload()"&gt; &lt;input type="butto...
vue返回上一页go()和back()
华章酱的博客
01-07 3690
history.back(-1):直接返回当前页的上一页，数据全部消息，是个新页面 history.go(-1):也是返回当前页的上一页，不过表单里的数据全部还在 history.back(0) 刷新 history.back(1) 前进 history.back(-1) 后退 不知道为何，封装成h5+App的时候，安卓端用go不返回，用back却返回 ...
web前端-JS入门
yong_19930826的博客
05-12 1111
web前端-JS入门1.初识JavaScript 1.初识JavaScript
前端javascript
07-28
回答: 前端JavaScript是指在网页前端使用的JavaScript代码。JavaScript是一种直译式脚本语言，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。它是一种动态类型、弱类型、基于原型的语言，内置支持类型。前端JavaScript通常是通过嵌入在HTML中的<script>标签中编写的，可以为网页添加各种动态功能，提供更流畅美观的浏览效果。因此，前端JavaScript是一种用于网页前端开发的脚本语言。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [前端技术_JavaScript（第一章）](https://blog.csdn.net/huyiju/article/details/84544315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [前端之JavaScript](https://blog.csdn.net/qq_58266033/article/details/124643513)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值