五、javascript基础

最新推荐文章于 2023-04-07 13:24:32 发布

叶宁夏昕

最新推荐文章于 2023-04-07 13:24:32 发布

阅读量8.4k

点赞数

文章标签：测试工具 html css

本文链接：https://blog.csdn.net/come_bn/article/details/121567971

版权

一、js基础语法：

在html中写js代码要写在整个html标签后面，用script标签，alert（）；作用是弹出对话框；

代码示例：

<script type="text/javascript">
// alert作用是弹出对话框，所有的js代码也要使用英文状态下的符号，小括号中可以使用英文单引号或双引号来包裹文字
	alert("呵呵，看我弹出来了");
</script>

二、js找元素、标签、标记：

document代表页面文档；getElementById这种写代码的形式叫做驼峰命名法，使用id来获取页面中的元素、标签、标记；

代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
	</body>
</html>
<script type="text/javascript">
// document代表页面文档；getElementById这种写代码的形式叫做驼峰命名法，使用id来获取页面中的元素、标签、标记
	document.getElementById('div1')
</script>

三、js实体化三属性：

用js来设置盒子的宽、高、背景色

代码示例：

<script type="text/javascript">
// 想要设置谁，就必须先找到他，使用英文状态下的.来进行连接，最后的数值和前面的属性使用=连接，=前后使用空格只是为了美观，可有可无
	document.getElementById('div2').style.width='200px';
	document.getElementById('div2').style.height='200px';
	document.getElementById('div2').style.background='red';
</script>

四、js变量简化代码：

用var声明变量；

变量起名字时候注意事项：可以使用中文但是不推荐，也可以使用_和$符号，命名不可以使用数字开头；不允许使用js已经占用了的单词（保留字）；

代码示例：

<script type="text/javascript">
	// document.getElementById('div2').style.width='200px';
	// document.getElementById('div2').style.height='200px';
	// document.getElementById('div2').style.background='red';
// var是声明变量；变量就是给数据请了一个代言人，今后只要出现变量名就代表等号之后的这堆代码
	var dyr = document.getElementById('div2').style;
	// 变量起名字时候注意事项：可以使用中文但是不推荐，也可以使用_和$符号，命名不可以使用数字开头；不允许使用js已经占用了的单词（保留字）；
	dyr.width='200px';
	dyr.height='200px';
	dyr.background='red';
</script>

五、js事件：

事件：在什么情况下做了什么事情
事件三要素：事件源.事件类型=匿名函数里面写的就是要执行的事情

先找到页面中的id元素后习惯性的把它保存在一个变量中方便后续的使用；

代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{width: 100px; height: 100px; background: #FFC0CB;}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<input type="button" value="变宽" id="btn_w">
		<input type="button" value="变高" id="btn_h">
		<input type="button" value="变色" id="btn_c">
	</body>
</html>
<script type="text/javascript">
	// 事件：在什么情况下做了什么事情
	// 事件三要素：事件源.事件类型=匿名函数里面写的就是要执行的事情
	// 先找到页面中的id元素后习惯性的把它保存在一个变量中方便后续的使用；
	var box = document.getElementById('box');
	var btn_w = document.getElementById('btn_w');
	var btn_h = document.getElementById('btn_h');
	var btn_c = document.getElementById('btn_c');
	// 以下是变宽代码
	btn_w.onclick = function(){
		// 这里写点击后要执行哪些命令 
		box.style.width = "200px";
	}
	// 以下是变高代码
	btn_h.onclick = function(){
		box.style.height = "200px";
	}
	// 以下是变色代码
	btn_c.onclick = function(){
		box.style.background = "red";
	}
</script>

六、找页面标签的其他方法：
可以用类名，标签名和name属性来获取元素；其中 getElementsByClassName是找页面中class的方法，必须在后面添加[数字],数字从0开始计数； getElementsByTagName是用标签名获取元素，也要加[数字]；getElementsByName是用name属性的值来找元素，也需要加[数字]，name的值可以重复出现。

代码示例：

	<body>
		<div class="div1">有类名</div>
		<div class="div1" name="hz">有类名</div>
		<div>什么都没有</div>
		<div name="hz">有name</div>
	</body>
</html>
<script type="text/javascript">
	// getElementsByClassName是找页面中class的方法，必须在后面添加[数字],数字从0开始计数
	document.getElementsByClassName('div1')[0].onclick = function(){
		alert();
	} 
	// getElementsByTagName是用标签名获取元素，也要加[数字]
	document.getElementsByTagName('div')[2].onclick = function(){
		alert();
	}
	// getElementsByName是用name属性的值来找元素，也需要加[数字]，name的值可以重复出现；
	document.getElementsByName('hz')[1].onclick = function(){
		alert();
	}
</script>

七、js其他事件：

当点击div执行弹出对话框操作时：onclick代表单击事件；ondblclick代表双击事件； onmouseover代表鼠标移入事件；onmouseout 代表鼠标移出事件。

代码示例：

	<body>
		<div id="div1">单击</div>
		<div id="div2">双击</div>
		<div id="div3">鼠标移入</div>
		<div id="div4">双击移出</div>
		<!-- 需要js控制的时候再添加class或者id来找到此元素即可 -->
		<div id="div5">我没效果</div>
	</body>
</html>
<script type="text/javascript">
	//点击div执行弹出对话框操作；
	var div1 = document.getElementById('div1');
	div1.onclick = function(){
		alert('单击事件被捕获');
	}
	var div2 = document.getElementById('div2');
	// ondblclick代表双击事件
	div2.ondblclick = function(){
		alert('双击事件被捕获');
	}
	var div3 = document.getElementById('div3');
	// onmouseover代表鼠标移入事件；
	div3.onmouseover = function(){
		alert('鼠标移入事件被捕获');
	}
	var div4 = document.getElementById('div4');
	// onmouseout 代表鼠标移出事件
	div4.onmouseout = function(){
		alert('鼠标移出事件被捕获');
	}
</script>

八、js书写位置：

js书写位置有三种：外链、行内、内嵌；

html中写js代码是行内js，html的标签属性值要使用双引号，里面的js代码要使用单引号；行内js强烈不推荐使用，因为没有实现代码的分离效果，语法修改不方便；

强烈推荐使用外链js，因为实现了代码的分离，修改会很方便；
外链js和内嵌js，先写的就先执行，后写的后执行；
代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- html中写js代码是行内js，html的标签属性值要使用双引号，里面的js代码要使用单引号 ；行内js强烈不推荐使用，因为没有实现代码的分离效果，语法修改不方便 -->
		<div onclick="alert('点我弹出，我是行内js')">点我呀</div>
	</body>
</html>
<!--  强烈推荐使用外链js，因为实现了代码的分离，修改会很方便-->
<!-- 外链js和内嵌js，先写的就先执行，后写的后执行  -->
<script type="text/javascript">
	// 内嵌js
	alert("我是内嵌js");
</script>
<!-- 外链js -->
<script type="text/javascript" src="js.js"> 
	// 一旦有src属性引入别的js文件了，这里的代码都会失效；
	alert("我还弹出吗～no");
</script>

九、js代码搬家：

将js代码写在head中，用window.onload；

window.onload 代表所有窗口全部执行完毕；当页面的所有html内容都加载完毕后才执行此处的代码；

代码示例：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{width: 100px; height: 100px; background: red;}
		</style>
		<script type="text/javascript">
		// window.onload 代表所有窗口全部执行完毕；当页面的所有html内容都加载完毕后才执行此处的代码；
		window.onload = function(){
			var box = document.getElementById('box');
			box.onclick = function(){
				alert('点击成功');
			}
		}
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>

十、动态添加、删除

innerHTML作用是设置标签的中间内容；

代码示例：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{width: 200px; height: 200px; background: #FFC0CB;}
		</style>
		<script type="text/javascript">
			window.onclick = function(){
				var box = document.getElementById('box');
				var btn_add = document.getElementById('btn_add');
				var btn_del = document.getElementById('btn_del');
				btn_add.onclick = function(){
					// 点击后设置div中的html显示文字
					box.innerHTML = '点击后此处文字才会被innerHTML设置成功';
				}
				// 点击删除按钮实现让文字清空效果
				btn_del.onclick = function(){
					box.innerHTML = '';
				}
				// innerHTML作用是设置标签的中间内容
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
		<input type="button" value="添加" id="btn_add"/>
		<input type="button" value="删除" id="btn_del"/>
	</body>

十一、自定义函数语法：

函数、方法的定义：function 名字(){自己的js程序}; 如果想要执行这个函数中的js代码程序，必须要写函数名()才能执行函数中的命令；

代码示例：

	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				hi();
				hi();
				// 自定义函数的作用就是简化代码，实现重复性代码的简单调用
				// 函数、方法的定义：function 名字(){自己的js程序}
				// 如果想要执行这个函数中的js代码程序，必须要写函数名()才能执行函数中的命令；
				// 函数（方法）的定义，js程序会优先执行；函数必须调用才可以执行其中的js代码：名字()；
				function hi(){
					alert('弹出');
				}
				// hi();
				// hi();
			}
		</script>
	</head>

十二、xml基础知识：

xml文件代表传输数据

新建一个xml文件，里面的标签全部是双标签，有大小写区分；

代码示例：

<!-- xml文件代表传输数据 -->
<ren>
	<shengao>180</shengao>
	<nianling>18</nianling>
	<tizhong>
		120
		<pang>一般</pang>
	</tizhong>
</ren>

叶宁夏昕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五、javascript基础

一、js基础语法：在html中写js代码要写在整个html标签后面，用script标签，alert（）；作用是弹出对话框；代码示例：<script type="text/javascript">// alert作用是弹出对话框，所有的js代码也要使用英文状态下的符号，小括号中可以使用英文单引号或双引号来包裹文字 alert("呵呵，看我弹出来了");</script>二、js找元素、标签、标记：document代表页面文档；getElementById这种
复制链接

扫一扫