第12章 JavaScript进阶

不睡觉的程序猿

已于 2024-03-26 09:21:16 修改

阅读量830

点赞数 27

分类专栏： HTML 文章标签： javascript html css

于 2024-03-26 08:30:03 首次发布

本文链接：https://blog.csdn.net/richieandndsc/article/details/137032413

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

我们上一个章节提到JavaScript可以修改HTML 标签内容或属性值，甚至是标签样式。接下来，我们来使用js来操作网页标签的内容，我们新创建一个“12_js.html”文件，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>

<div id="box1"></div>
<script>
document.getElementById("box1").innerHTML = "hello,js!";
</script>

</body>
</html>

当我们使用浏览器打开的时候后，就可以看到<div>中放入了 “hello,js!” 文本内容，如下：

上述代码中document就是我们的网页内容，getElementById就是通过id来搜索标签。我们之前讲过，id是唯一性的，因此通过getElementById可以找到唯一的一个标签，然后设置它的内容。除了id搜索之外，还有如下方法：

document.getElementsByClassName();		// 根据标签class选择器
document.getElementsByName();			// 根据标签name属性
document.getElementsByTagName();		// 根据标签名称

但是，请大家注意的是，上述三个方法获取到的标签可能是多个哦，也就是一个数组。那么，我们就需要按照数组元素的方式才能获取到具体的标签对象。例如：

<p>111</p>
<p>222</p>
<p>333</p>
<script>
var arr = document.getElementsByTagName("p");
console.log(arr[1].innerHTML); // 输出 222
</script>

我们通过标签来获取对象的话，显然得到的就是一个数组，里面包含了三个<p>标签对象。当我们访问下标为1的数组元素的时候，实际得到的是第二个<p>标签中的内容，也就是“222”的内容。由此可见，Js的数组的下标也是从零开始的。

接下来，我们还可以获取到的标签对象设置样式，如下代码：

<div id="box2"></div>
<script>
document.getElementById("box2").innerHTML = "hello,css!";
document.getElementById("box2").style.color = "red";	
</script>

上述代码就是给我们的标签文本内容设置为红色，效果如下图所示。

接下来，我们来使用JS对表单数据进行校验。其实就是获取input的值，然后做简单判断。

<form id="form" action="#" method="post">
    <input id="tel" type="text" value=""  />
    <input type="button" value="提交" onclick="check()"  />
</form>

<script>
function check(){
	
	var tel = document.getElementById("tel").value;
	if(tel === null || tel == undefined || tel == ""){
		alert("输入不能为空");
	}else{
		document.getElementById("form").submit();
	}
}
</script>

在上述代码中，我们简单定义了一个表单，里面只有一个输入框和普通按钮，当我们点击按钮的时候，就会执行check方法，在该方法中，我们获取了输入框的内容，然后做了一个空的判断，如果有数据的话，才能向服务器提交表单。

如果我们在输入框中填写信息，然后点击“提交”按钮。页面只会刷新一下，原因是我们的form标签中的action属性值是“#”，代表就是本页面（我们暂时不涉及服务器后端内容）。在我们日常的网页编程中，我们也经常使用这种方式进行用户录入数据验证，除了空判断之前，我们还会进行一些更复杂的数据判断，比如邮箱格式验证，手机号验证等等，这些都需要借助字符串或正则表达式来实现哦。具体如何实现，大家可以自行搜索一下，很多很多。

接下来，我们介绍如何使用js进行页面跳转，也就是向服务器发起URL请求。我们之前讲过，使用<a>来进行页面跳转，其实js中也有方法可以进行跳转。如下所示：

<a href="javascript:void(0)" onclick="goto()">跳转</a>

<script>
function goto(){
	window.location.href = "http://www.baidu.com/";	
}
</script>

在上述代码中，我们有两点说明，第一，我们使用“javascript:void(0)”屏蔽了<a>的跳转属性，改用点击事件处理。在goto方法中，我们使用js进行页面的跳转。当然，这里不会局限于超链接<a>，我们可以给任何标签添加点击事件，并在该事件中跳转浏览器当前地址。大家可以自行试一试。如果想要打开新的页面显示百度的话，可以使用如下代码实现.

window.open("https://www.baidu.com", "_blank");

接下来，我们再介绍两个特殊的方法：setTimeout()和setInterval()方法。前者是延迟指定时间后去执行一次代码逻辑，后者是每隔指定的时间就执行一次代码逻辑。我们演示代码如下：

<div id="num"></div>

<script>

var n = 1;

function setnum(){
	
	document.getElementById("num").innerHTML = n++;
}

setTimeout("setnum()", 1000);
//setInterval("setnum()", 1000);

在上述代码中，我们将变量+1后放置到<div>中，setTimeout方法在1秒后执行，且只执行一次，效果就是<div>变成1后就固定不变了。

而使用setInterval方法的话，就会按照1秒的时间间隔，不断的累加<div>里面的数字。

这就是两者的区别。使用这两种方法，我们可以制作延迟执行的效果，以及倒计时的效果。

接下来，我们来介绍“异步刷新”，也就是大家常说的Ajax。我们每次点击一个网址链接的时候，都会请求服务器，然后服务器会返回网页内容。也就是说，网页的内容都是由服务器返回的，并且是一次性返回整个网页的所有内容。当我们想要做一些简单的服务器交互，只是修改当前页面中的一小部分内容时候，我们仍然不得不刷新整个页面的全部内容。显然这是不太合理的。举个例子，我们正在阅读一篇不错的文章，我们想要点赞这篇文章。但是点赞的功能需要当前读者登录该网站才能进行，可想而知，这个过程没有那么简单实现。因此我们就可以使用Ajax技术，异步登录后再点赞，这样不会重新刷新当前页面，节省很多的网络传输流量，也能提升用户体验。具体的实现方式就是，当用户点赞的时候，弹框让用户输入账户和密码，然后登录成功后，弹框消失，此时在网页的某些部位就会显示用户的身份（昵称等等），这就表示用户登录成功，然后就可以点赞了。点赞的过程同样使用Ajax来完成，点赞的请求到服务器后，服务器记录这个数据，然后页面直接显示点赞后的效果即可。整个过程的通信是在浏览器后台进程完成的，并不会刷新当前网页。要想使用异步请求Ajax，需要借助 XMLHttpRequest 对象来完成，我们新建“12_ajax.html”文档，代码如下：

<div id="demo"></div>

<script>

// 构建异步请求对象
var xhr = new XMLHttpRequest();

// 请求成功回调方法
xhr.onload = function () {
    document.getElementById("demo").innerHTML = xhr.responseText;
}

// 请求失败回掉方法
xhr.onerror = function () {
    document.getElementById("demo").innerHTML = "请求出错";
}

// 发送异步 GET 请求
xhr.open("GET", "http://localhost:8080/test.jsp", true);
xhr.send();

</script>

上述代码是使用Ajax向服务器请求 "http://localhost:8080/test.jsp"，服务器端代码我们暂时不过多讲解，如下所示的“test.jsp”文件的内容。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% 
	// 允许跨域的主机地址
	response.setHeader("Access-Control-Allow-Origin", "*");
	
	// 向客户端返回 Hello World
	out.println("Hello World");
%>

如何执行服务端“test.jsp”文件请查看后面的章节（第15章 Tomcat安装）。最简单的方式就是安装Tomcat这个WebServer软件，然后将“test.jsp”文件放置到Tomcat安装根目录下的“\webapps\ROOT”目录下即可。最后启动Tomcat就可以了。上述代码的大概意思就是向浏览器返回“Hello World”字符串文本。然后将返回的内容“Hello World”写入到id=demo的<div>标签中。