JS基础 2

导读:本篇文章讲解 JS基础 2,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

1 prototype原型

Object对象中的一个属性,所有对象都可以通过prototype属性扩展功能。

例如:

第一步:创建一个js文件,然后在文件中对Date对象添加一个formatDate方法。

// 给Date对象扩展了一个formatDate方法
Date.prototype.formatDate = function() {
	// this代表该方法的调用者对象
	var year = this.getFullYear();
	var month = this.getMonth() + 1;
	var date = this.getDate();
	var hour = this.getHours();
	var min = this.getMinutes();
	var second = this.getSeconds();
	
	var dateStr = year + "年" + month + "月" + date + "日 " + hour + "时" + min + "分" + second + "秒";
	
	return dateStr;
}

第二步:在html文件中引入js文件。

<script type="text/javascript" src="js/date.js"></script>

第三步:测试。

var dateStr = d.formatDate()
document.write(dateStr);

2 BOM编程

2.1 Window对象

Window对象是一个顶级对象,包含其他BOM对象。它提供了获取其他BOM对象的属性。例如:

window.location:代表地址栏。

window.history:代表前进后退按钮。

window.navigator:代表浏览器。

window.screen:代表当前屏幕。

window.document:代表当前页面。

Window对象也提供一些全局函数:

函数名 作用
alert() 弹出提示框
close() 关闭窗口
open() 打开窗口
confirm() 弹出一个确认框
setInterval() 定时器,指定多少毫秒重复执行某个函数
setTimeout() 定时器,指定多少毫秒后执行某个函数,只执行一次
clearInterval(id) 取消定时器
clearTimeout(id) 取消定时器

(1)open:打开一个窗口。

命令格式:
window.open(url, name, features, replace)

例如:
window.open("http://www.baidu.com", "测试", "width=500,height=300,left=100,top=50,scrollbars=no");

其中,features(特征)包含以下内容:

hannelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0 是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels 窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
location=yes|no|1|0 是否显示地址字段。默认是 yes。
menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。
status=yes|no|1|0 是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。
top=pixels 窗口的 y 坐标。
width=pixels 窗口的文档显示区的宽度。以像素计。

注意:某些特征并不是所有浏览器都支持。比如scrollbars。

(2)confirm:弹出一个确认框。如果点击确认,该方法返回true;如果点击取消,返回false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function delUser() {
				var b = window.confirm("确认要删除吗?");
				if (b) {
					alert("删除用户....");
				}
			}
		</script>
	</head>
	<body>
		<button onclick="delUser()">删除用户</button>
	</body>
</html>

(2)定时器方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/date.js" ></script>
		<script>			
			// 显示系统时间在页面
			function showTime() {
				var d = new Date();
				d = d.formatDate();
				
				// 把时间显示在aa标签。
				document.getElementById("aa").innerHTML = d;
			}
			
			var taskId;
			
			// 启动定时器
			function start() {
				// 每隔1s调用showTime函数一次
				taskId = window.setInterval("showTime()", 1000);
			}
			
			// 关闭定时器
			function stop() {
				window.clearInterval(taskId);
			}
		</script>
	</head>
	<body>		
		<button onclick="start()">启动定时器</button>
		<button onclick="stop()">关闭定时器</button>
		
		<!-- 块标签 
			每一个标签都有id属性,一个html页面id属性不能够重复。
		-->
		<div id="aa"></div>
		
		<script>
			//showTime();
		</script>
	</body>
</html>

2.2 Lacation对象

location代表浏览器的地址栏。

location对象属性:

href:设置或返回地址栏中地址。

location对象的方法:

reload():刷新页面。

2.3 History对象

History代表浏览器的历史。

back():加载浏览器历史的前一个URL;

forward():加载浏览器历史的下一个URL;

go(n):加载浏览器历史的第n个URL;

​ 比如:1代表加载下一个URL;-1代表加载上一个URL。

3 DOM编程

3.1 DOM介绍

DOM(Document Object Model) 文档对象模型。当浏览器解析html页面的时候,html解析器会对页面中每一个元素(标签、属性、文本、注释等)创建一个对象来描述,这些对象称为“DOM对象”。

Node节点:

​ 标签节点:Element

​ 属性节点:Attribute

​ 文本节点:Text

​ 注释节点:Comment

​ 文档树:Document

文档树:浏览器在解析html的时候,html解析器会按照元素的顺序在内存中生成一颗文档树对象。我们在浏览器上看到的内容,实际上是文档树对象中元素的属性。所以,如果要访问html页面内容,可以通过元素对象的属性进行访问。所谓dom编程,就是通过文档树中元素对象的属性操作页面的内容。

3.2 节点的访问

document.getElementById():通过元素节点的id属性查询元素节点,该方法返回一个Element对象。

document.getElementsByTagName():通过元素名查询元素节点,该方法返回包含指定元素的数组。

document.getElementsByName():通过元素的name属性查找节点,该方法返回包含指定元素的数组。

document.getElementsByClassName():通过元素的class属性查找节点,该方法返回包含指定元素的数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="userName" value="jacky"/><br/>
		<input type="password" id="userPass" value=""/><br/>
		<input type="checkbox" name="hobby"/><input type="checkbox" name="hobby"/><input type="checkbox" name="hobby"/><br/>
		
		<script>
			/*// 注意:获取元素对象之前必须要保证该元素标签被加载完。
			var userNameNode = document.getElementById("userName");
			//alert(userNameNode);
			document.write(userNameNode.nodeName + "<br/>");
			document.write(userNameNode.nodeValue + "<br/>");
			document.write(userNameNode.nodeType + "<br/>");
			
			// 根据标签名获取元素
			var inputNodes = document.getElementsByTagName("input");
			for (var i = 0; i < inputNodes.length; i++) {
				var inputNode = inputNodes[i];
				document.write(inputNode.nodeName + "<br/>");
			}*/
			
			var hobbyNodes = document.getElementsByName("hobby");
			for (var i = 0; i < hobbyNodes.length; i++) {
				var inputNode = hobbyNodes[i];
				document.write(inputNode.nodeName + "<br/>");
			}
		</script>
	</body>
</html>

通过关系查找节点:

父子关系:

parentNode:获取当前节点父节点;

firstChild:获取当前节点的第一个子节点;

lastChild:获取当前节点的最后一个子节点;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body><form>
			<input id="userName"/>
			<input type="submit"/>
		</form>
		<script>
			var userNameNode = document.getElementById("userName");
			// 获取父节点
			var formNode = userNameNode.parentNode;
			//document.write(formNode.nodeName + "<br/>");
			
			var bodyNode = document.getElementsByTagName("body")[0];
			// 获取第一个子节点
			var formNode = bodyNode.firstChild;
			document.write(formNode.nodeName + "<br/>");
			// 获取最后一个子节点
			var scriptNode = bodyNode.lastChild;
			document.write(scriptNode.nodeName + "<br/>");
		</script></body>
</html>

兄弟关系:

nextSibling:获取下一个兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本等等);

previousSibling:获取上一个兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本等等);

nextElementSibling:获取下一个兄弟节点;

previousElementSibling:获取上一个兄弟节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h3>用户注册</h3>
		<form>
			<input id="userName"/>
			<input type="submit"/>
		</form>
		<script>
			// ------------- 兄弟关系查找节点 ---------------
			var formNode = document.getElementsByTagName("form")[0];
			// 获取上一级的兄弟节点
			var h3Node = formNode.previousSibling.previousSibling;
			document.write(h3Node.nodeName + "<br/>");
			
			var scriptNode = formNode.nextSibling.nextSibling;
			document.write(scriptNode.nodeName + "<br/>");
		</script></body>
</html>

document也提供获取一些对象的属性:

body:获取body对象;

forms:获取页面中所有的form元素,返回一个数组;

3.3 节点操作

# 创建元素节点,该方法返回一个Element对象
document.createElement("标签名")

# 追加节点
Element对象.appendChild(newElement)

# 在Element元素中,往childElement前面插入newElement
Element对象.insertBefore(newElement, childElement)

# 删除Element元素下的child元素
Element对象.removeChild(child)

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul><li>宫保鸡丁</li>
			<li>海南鸡</li>
			<li>东波肉</li></ul>
		<script>
			// 获取ul节点
			var ulNode = document.getElementsByTagName("ul")[0];
			// 获取最后一个li节点
			var lastLiNode = ulNode.lastChild;
			// 构建新的li
			var newLiNode = document.createElement("li");
			newLiNode.textContent = "口水鸡";
			// 在最后li节点前插入新节点
			ulNode.insertAfter(newLiNode, lastLiNode);
		</script>
	</body>
</html>

3.4 设置或获取元素节点的内容

Element对象提供一些属性:

innerHTML : 设置或获取元素节点的文本;例如:

textContext :设置或获取元素节点的文本;

value:设置或获取元素的value属性值;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>hello</p>	
			<input type="text" id="userName" />
		</div>
		<script>
			
			var divNode = document.getElementsByTagName("div")[0];
			//alert(divNode.innerHTML);
			//alert(divNode.textContent);
			//divNode.innerHTML = "<h1>world</h1>";
			
			document.getElementById("userName").value = "jacky";
		</script>
	</body>
</html>

4 事件

所有html元素都可以绑定事件。事件以on开头。例如:onclick、onload、onSubmit等等。

事件的三要素:

  • 事件源:事件发生的地方。
  • 事件监听器:监听事件的发生。例如:onclick、onkeydown、onload等等。
  • 处理函数:响应事件的函数。

一个html元素可以绑定多个事件监听器。

4.1 事件类型

鼠标事件:

事件名 说明
onclick 鼠标单击
ondbclick 鼠标双击
onmousedown 鼠标按下事件
onmouseup 鼠标松开事件
onmousemove 鼠标划过事件
onmouseout 鼠标移出事件

焦点事件:

事件名 说明
onfocus 元素获得焦点后触发
onblur 元素失去焦点后触发
onchange 元素内容发生变化时候触发

其他事件:

事件名 说明
onload 页面加载完成后触发
onsubmit 提交表单前触发,例如:客户验证

onload事件一般绑定在body标签中。

onsubmit事件一般绑定在form标签中。

5 正则表达式

5.1 创建正则表达式

方式一:/正则表达式/模式

方式二:new RegExp(“正则表达式”, “模式”)

i模式:如果指定了i模式,那么就忽略大小写。

g模式:如果指定了g模式,如果使用正则表达式查找字符串的内容,它会进行全文查找。

5.2 正则表达式的应用场景

5.2.1 客户端验证

test(): 匹配指定内容是否符合正则表达式。如果匹配就返回true,否则返回false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function checkUserName() {
				// 获取用户输入
				var userName = document.getElementById("userName").value;
				// 验证用户输入(非空、长度不能小于5位、必须是英文或数字组成)
				var regex = /[a-z0-9]{5,}/i;
				// 匹配
				var isValid = regex.test(userName);
				if (!isValid) {
					document.getElementById("userNameMsg").textContent = "X 用户名格式不正确";
				} else {
					document.getElementById("userNameMsg").textContent = "√";
				}
			}
			
			
			checkUserName();
		</script>
	</head>
	<body>
		<input type="text" id="userName" onblur="checkUserName()"/>
		<span id="userNameMsg"></span>
	</body>
</html>


5.2.2 查找字符串内容

exec:查找字符串符合正则表达式的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var data = "请联系我13232345232请联系我13232345243请联系我132323245232请联系我13232341232请联系我12323234523请联系我15932345232";
			// 定义规则
			var regex = /1\d{10}/g;
			// 根据正则表达式查找指定字符串的内容
			var phone = regex.exec(data)
			while (phone != null) {
				alert(phone);
				phone = regex.exec(data)
			}
		</script>
	</body>
</html>

5.2.3 替换字符串内容

字符串replace方法。

replace(regexp,new):把符合正则表达式的内容全部替换成new的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var blog = "请联系我13232345232请联系我13232345243请联系我132323245232请联系我13232341232请联系我12323234523请联系我15932345232";
			// 定义规则
			var regexp = /1\d{10}/g;
			// 替换
			blog = blog.replace(regexp, "##########");
			alert(blog);
		</script>
	</head>
	<body>
	</body>
</html>


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/81674.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!