JavaScript基础篇下

最新推荐文章于 2021-08-25 21:20:15 发布

笑谈风声i

最新推荐文章于 2021-08-25 21:20:15 发布

阅读量240

点赞数

分类专栏：前端学习笔记文章标签： js javascript

本文链接：https://blog.csdn.net/qq_28218493/article/details/103610274

版权

前端学习笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

JavaScript笔记

1.JavaScript表单

1.1 验证输入是否为空：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

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

</body>
</html>

1.2 验证输入是否为指定范围数字：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>JavaScript 验证输入</h1>
<p>请输入 1 到 10 之间的数字：</p>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>

<script>
function myFunction() {
    var x, text;
    x = document.getElementById("numb").value;
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    } else {
        text = "输入正确";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

1.3 表单自动验证：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

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

<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>

</body>
</html>

使用一个required属性可以让浏览器自动识别是否为空，为空则给出提示。
Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。

E-mail 验证：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	 
</body>
</html>

上述限制条件为：
输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号

2.JavaScript使用误区

2.1 比较运算符常见错误

var x = 10;
var y = "10";
if (x == y)

在常规的比较中，数据类型是被忽略的，上述结果返回 true；

var x = 10;
var y = "10";
if (x === y)

在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，
上述结果返回 false；
在switch语句中，case比较时为“===”恒等比较。

2.2 浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定。
所以0.1+0.2≠0.3，经测试，0.3，0.6这些都不完全相等。
0.1+0.2=0.30000000000000004。
为什么？
简而言之：计算机不能精确的表示浮点数。
深层原因：为什么0.1+0.2不等于0.3
解决的办法就是：

var x = 0.1;
var y = 0.2;
var z = (x * 10 + y * 10) / 10;      //结果是0.3

2.3 数组的索引

2.3.1普通数组

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length 返回 3
var y = person[0];             // person[0] 返回 "John"

普通数组直接使用下标访问。

2.3.2关联数组

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length 返回 0
var y = person[0];             // person[0] 返回 undefined

在 JavaScript 中, 对象使用名字作为索引。
如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。
执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误。

3.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;
  }
};

上述代码中，person是一个有属性和方法的对象，对象中的属性若需要使用方法体外的方法需要借助this。

4.void关键字

Javascript中的void表示不返回任何值，但是会执行括号里的代码。

 <a href="javascript:void(0)">单此处什么也不会发生</a>
 //一个空连接

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

包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。

<a href="javascript:void(alert('Warning!!!'))">点我!</a>
//点击后会弹窗

4.JavaScript DOM

DOM（Document Object Model）：文档对象模型。
通过DOM，Javascript可以操作HTML的任何元素。

4.1 获取HTML元素

4.1.1 通过id名

var x = document.getElementById("intro");

4.1.2 通过类名

var x = document.getElementsByClassName("intro");

4.1.3 通过标签名

var x = document.getElementsByTagName("p");
//按顺序获取到html中所有的p标签元素

4.1.4 通过标签名获取指定的元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
//获取id为main的元素里所有的p标签元素

4.2 更改HTML元素内容

4.2.1 更改元素的文字内容

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>

4.2.2 更改元素的属性

<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";		//更改image的属性值
</script>
</body>
</html>

4.2.3 更改元素的样式

<!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>

5. DOM事件

5.1对事件作出反应

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

 <!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

直接操作或者使用函数：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

5.2 onload事件

在页面加载完成时，自动触发onload事件。
与onload事件对应的是一个onunload事件，在关闭页面时触发，但是实测效果并不好。
（直接关闭浏览器页面窗口，页面没有任何提示。）

<body onload="checkCookies()">
//表示在页面加载完成时检查浏览器的cookies是否可用

5.3 onchange事件

onchange事件能检测元素的值是否已经改变，通常和input输入框结合使用。

5.4 鼠标事件

onmouseover：鼠标移动到元素上时触发
onmouseout：鼠标没有在元素上时触发（默认触发）
onmousedown：鼠标长按点击时触发
onmouseup：鼠标松开时触发（默认触发）
onclick：单次点击触发

6.addEventListener() 方法

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

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素。默认值，值为false。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件。值为true。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);    //添加事件句柄
function displayDate() {													//js代码块
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

7.DOM元素（节点）

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<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>

</body>
</html>

添加一个新的节点元素需要五步：
1.

var para = document.createElement("p");
为 <p> 元素创建一个新的文本节点：

var node = document.createTextNode("这是一个新的段落。");
将文本节点添加到 <p> 元素中：

para.appendChild(node);
最后，在一个已存在的元素中添加 p 元素。

var element = document.getElementById("div1");
查找已存在的元素：

element.appendChild(para);
添加到已存在的元素中:

注：默认是添加后元素的最后位置，若要添加到指定位置的前面。需要在第二步多建一个变量child获取到待添加指定位置的元素名，然后在第五步把appendChild(para)换成inserBefore(para,child)

若要移除一个元素：

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

若要替换一个元素：

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);

8.DOM集合（Collection）

getElementsByTagName() 方法返回 HTMLCollection 对象。
因为getElementsByTagName() 方法返回的跟标签名一样的所有标签。
Collection不是一个数组，但是可以像数组一样通过下标访问，且有length属性。
但是不能使用数组的方法如： valueOf(), pop(), push(), 或 join() 。

var x = document.getElementsByTagName("p");			//集合中的元素可以通过索引(以 0 为起始位置)来访问。
y = x[1];											//访问第二个 <p> 元素可以是以下代码:

Collection有length属性，可以访问到Collection集合的长度。

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

注：JS中还有一个节点列表NodeList，与集合Collection类似，有length和可以通过下标访问，不能使用数组的特有方法。
一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。
在这里插入图片描述

笑谈风声i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript基础篇下

JavaScript笔记1.JavaScript表单1.1 验证输入是否为空：<!DOCTYPE html><html><head><meta charset="utf-8"><script>function validateForm() { var x = document.forms["myForm"]["f...
复制链接

扫一扫