JS自学day2

最新推荐文章于 2024-04-27 06:12:53 发布

恋风（微信）

最新推荐文章于 2024-04-27 06:12:53 发布

阅读量182

点赞数 1

分类专栏： JS学习笔记 JS学习笔记文章标签： JS学习

本文链接：https://blog.csdn.net/weixin_44791254/article/details/88673407

版权

JS学习笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

JS学习笔记

22 篇文章 0 订阅

订阅专栏

1.正则表达式

RegExp对象用于规定在文本中检索的内容。

定义RegExp
通过new关键字来定义RegExp对象。

var part1=new RegExp("e");

定义了名为part1的RegExp对象，其模式是"e"。
当使用该RegExp对象在一个字符串中检索时，寻找的是字符"e"。

RegExp对象的方法
test（）方法检索字符串中的指定值，返回值是true或者false。
exec（）方法检索字符串中的指定值，返回被找到的值，没有找到返回null。
如果要找到字符串中的某个值的所有存在，可使用 exec（）方法的"g"参数。
compile（）方法用于改变RegExp，既可以改变检索模式，也可以添加或删除参数。

2.文档对象模型

当页面被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过文档对象模型，可以访问文档中的所有元素。
通过对象模型JS可以：

改变页面中的html元素
改变页面中的html属性
改变页面中的所有css样式
对页面所有事件做出反应
查找html元素 有三种方法：
通过id名找到html元素

var x=document.getElementById("id名");

通过标签名找到html元素

var x=document.getElementById("标签名");

通过类名找打html元素

var x=document.getElementById("类名");

通过类名查找html元素在IE5、6、7、8中无效。

3.改变html输出流

在JavaScript中，通过document.write() 可以直接向html输出流中写入内容。
绝对不要在文档加载之后使用document.write()，这样会覆盖该文档。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>旧的段落内容！</p>
		<script type="text/javascript">
			function myFunction(){
				document.write("新的段落内容！")
			}			
		</script>
		<button "myFunction()">覆盖页面内容</button>
	</body>
</html>

就像上面代码中，html文档加载完成后，再通过button点击调用document.write（）写入的内容就回复该文档。

4.改变html内容

改变html内容的最简单方法是使用innerHTML属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="demo">旧的段落内容！</p>
		<script type="text/javascript">
			function myFunction(){
				document.getElementById("demo").innerHTML="新的段落内容";
			}			
		</script>
		<button "myFunction()">改变页面内容</button>
	</body>
</html>

如需改变html元素内容，一般使用这个语法：

document.getElementById("id").innerHTML="new html";

5.改变html属性

如需改变html元素的属性，一般使用这个语法：

document.getElementById("id").属性名="新的属性值";

可以通过下面的语句来改变html文档中的图片路径：

dovumentgetElementById("id").src="new url";

要改变html元素样式，一般通过下面语句实现：

documentgetElementById("id").style.样式名="新的样式";

通过JS改变p标签中字体颜色：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				color:red;
			}
		</style>
	</head>
	<body>
		<p id="demo">旧的段落内容！</p>
		<script type="text/javascript">
			function myFunction(){
				document.getElementById("demo").style.color="blue";
			}			
		</script>
		<button "myFunction()">改变页面样式</button>
	</body>
</html>

6.元素显示或消失

通过visibility属性让html元素显示或消失。常用语句如下：

documentgetElementById("id").style.visibility="hidden/visible";

实例练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="demo">旧的段落内容！</p>
		<script type="text/javascript">
			function myFunction1(){
				document.getElementById("demo").style.visibility="hidden";
			}
			function myFunction2(){
				document.getElementById("demo").style.visibility="visible";
			}
		</script>
		<button "myFunction1()">隐藏</button>
		<button "myFunction2()">显示</button>
	</body>
</html>

7.html事件属性

如需向html元素分配事件，可以使用事件属性。
比如向button元素分配onclick事件：

<button "myFunction()">点击这里</button>

当用户点击按钮式，myFunction()就会被调用并执行。

8.使用HTML DOM来分配事件

HTML允许用户通过JavaScript来向HTML元素分配事件。
比如向button元素分配onclick事件：

<script type="text/javascript">
	document.getElementById("myButton").function(){myFunction()};
</script>

实例练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="demo1">测试段落内容！</p>
		<button id="demo2">隐藏</button>
		<button id="demo3">显示</button>
		<script type="text/javascript">
			document.getElementById("demo2").function(){myFunction1()};
			document.getElementById("demo3").function(){myFunction2()}
			function myFunction1(){
				document.getElementById("demo1").style.visibility="hidden";
			}
			function myFunction2(){
				document.getElementById("demo1").style.visibility="visible";
			}
		</script>
	</body>
</html>

特别注意：使用script给html中元素分配事件时，元素必须写在script语句前面，否则会报错。

9.onload和onunload事件

onload和onunload事件会在用户进入或离开页面时被触发。
onload事件可用于检测访问者的浏览器类型和浏览器版本，从而基于这些信息来加载网页的正确版本。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body "myFunction()">
		<script type="text/javascript">
			function myFunction(){
				if(navigator.cookieEnabled==true){
					alert("已启用cookie");
				}
			}else{
				alert("未启用cookie");
			}
		</script>
		<p>提示框会告诉你，浏览器是否已启用cookie。</p>
	</body>
</html>

onload和onunload一般直接写在body标签中。

10.onchange事件

onchange事件常结合输入字段验证来使用。
下面是如何使用onchange的例子，当用户鼠标离开输入字段时，会调用upperCase（）函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function myFunction(){
				var x=document.getElementById("fname");
				x.value=x.value.toUpperCase();
			}
		</script>
	</head>
	<body>
		请输入英文字符：
		<input type="text" id="fname" "myFunction()" />
		<p>当您离开输入字段时，输入文本将会变成大写。</p>
	</body>
</html>

11.onmouseover和onmouseout事件

onmouseover和onmouseout事件可用于在用户鼠标移动至html元素上方或者移出元素时触发函数。
实例练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:200px;
				height:200px;
				background-color:yellow;
			}
		</style>
		<script type="text/javascript">
			function mover(){
				document.getElementById("demo").style.backgroundColor="red";
			}
			function mout(){
				document.getElementById("demo").style.backgroundColor="blue";
			}
		</script>
	</head>
	<body>
		<div id="demo" "mover()" "mout()">
			鼠标放在这里，变红色，离开变蓝色。
		</div>
	</body>
</html>

注意：script中背景颜色这样写backgroundColor。

12.onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup以及onclick构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown事件，当释放鼠标按钮时，会触发onmouseup事件，最后，当完成鼠标点击时，会触发 onclick 事件。
实例练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:200px;
				height:200px;
				background-color:yellow;
			}
		</style>
		<script type="text/javascript">
			function mdown(Object){
				Object.style.backgroundColor="red";
			}
			function mup(Object){
				Object.style.backgroundColor="blue";
			}
		</script>
	</head>
	<body>
		<div "mdown(this)" "mup(this)">
			鼠标点下时，变红色，离开变蓝色。</div>
	</body>
</html>

通过this和Object结合使用，可以简化定位html元素的语句。

13.onfocus事件

当输入字段获得焦点时，改变其背景色。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function myFunction(Object){
				Object.style.backgroundColor="yellow";
			}			
		</script>
	</head>
	<body>
		请输入用户名：<input type="text"  "myFunction(this)"/>
	</body>
</html>

恋风（微信）

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS自学day2

1.正则表达式RegExp对象用于规定在文本中检索的内容。定义RegExp通过new关键字来定义RegExp对象。var part1=new RegExp("e");定义了名为part1的RegExp对象，其模式是"e"。当使用该RegExp对象在一个字符串中检索时，寻找的是字符"e"。RegExp对象的方法test（）方法检索字符串中的指定值，返回值是true或者fals...
复制链接

扫一扫