JavaScript

最新推荐文章于 2022-08-21 15:48:01 发布

于爱林

最新推荐文章于 2022-08-21 15:48:01 发布

阅读量52

点赞数

本文链接：https://blog.csdn.net/pifeng8010/article/details/115874394

版权

JavaScript简介

JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

改变 HTML 图像

点亮灯泡实例

<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

JavaScript 函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function：
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
以下是我课后的练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h>你喜欢小猫吗？</h>
		<p id="demo">喵</p>
		<button type="button" onclick="myfunction()">喜欢</button>
		<button type="button" onclick="alert('那你喜欢♥小狗吗')">不太喜欢</button>
		<script>
		function myfunction(){
		
			document.getElementById("demo").innerHTML="养一只猫吧";
			}
			
	</script>
	</body>
</html>

JavaScript HTML DOM

HTML DOM 模型被构造为对象的树：


通过 id 查找 HTML 元素
<p id="intro">我爱你</p>
<p>送你花花</p>
<script>
x=document.getElementById("intro");
document.write("<p>好巧，我也想说 " + x.innerHTML + "</p>");
</script>

浏览器显示如下：

通过类名找到 HTML 元素
<p class="intro">这瓶水给你吧</p>

<script>
x=document.getElementsByClassName("intro");
document.write("我不渴 " + x[0].innerHTML + "</p>");
</script>

改变 HTML 属性

document.getElementById(id).attribute=新属性值

示例：

document.getElementById("image").src="landscape.jpg";

本例改变了元素的 src 属性.

JavaScript HTML DOM 事件

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

于爱林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

JavaScript简介JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。改变 HTML 图像点亮灯泡实例<script>function changeImage(){ element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.gi
复制链接

扫一扫