网页知识学习总结3

最新推荐文章于 2024-05-12 18:33:36 发布

奏长歌，踏山河

最新推荐文章于 2024-05-12 18:33:36 发布

阅读量121

点赞数

文章标签：学习 js

本文链接：https://blog.csdn.net/m0_48701672/article/details/126630720

版权

js

1.js 的第一个案例

通过 js 的函数，找到标签元素，然后绑定单击事件

通过 js 的函数，找到标签元素，然后设置标签元素的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="top"
			style="width: 100%; height: 80px; background-color: #f9e3aa; text-align: center; position: relative;"> <a
				href="#"> <img src="../img/80d566c19a589009.jpg.webp" /> </a> <span id="close"
				style="background-color: gray; color: white; display: inline-block; width: 20px; height: 20px; padding: 1px; font-size: 16px; line- height: 20px;text-align: center; position: absolute; top: 10px;">X</span>
		</div>
		<div style="height: 30px; background-color: rgba(100,100,100,0.1);"> </div>
		<script type="text/javascript">
			// javascript 简称js ， <script>标签内部只能写符合js的语法规则的语句。 // 功能：单击id是close的标签，把id是top的标签隐藏了。 // let span ; 定义变量 （let是定义变量的关键字） 
			let span = document.getElementById("close"); // document对象是js的 内置对象。
			//getElementById("close") - 函数,根据id找到元素。
			 let div = document.getElementById("top"); // *** onclick:js中的单击事件, 当元素被单击的时候，则执行单击事件对应的函 数。 
			 span.onclick=function(){ // function:表示函数 
			 div.style.display = "none"; // 修改元素的style属性对应的display 样式。赋值为none. 
			 } 
		</script>
	</body>
</html>

2.js 的三种使用方式

2.1. 事件定义的方式

2.2.js 嵌入到 html 页面，通过 script 标签来使用

2.3. 把 js 相关内容写在单独的 .js 文件中，然后在 html 页面上，通过 script 标签的 src="xx.js" 引入 js 文件，

进行使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js的三种使用方式</title>
	</head>
	<body>
		<!-- 1.事件定义的方式 2.js嵌入到html页面，通过<script>标签来使用 3.把js相关内容写在单独的.js文件中，然后在html页面上，通过<script src="xx.js">引入js文件，进行使用。 -->
		<!-- onclick:是标签事件属性 ,alert('hello!')是js中定义的一个弹出警告框的函数. --> <button onclick="alert('hello!')">你好！</button>
		<button onclick="f1('nice to meet you.')">你好</button> <button id="btn3">按钮3</button> <button
			id="btn4">按钮4</button>
		<script>
			// 自定义函数 // js是弱数据类型语言。 
			function f1(a) {
				alert(a)
			} // -- get Element By Id ,根据id获取元素, id是唯一的,所以找出来的是唯一的符合 要求的一个元素。
			let btn = document.getElementById("btn3");
			btn.onclick = function() {
				alert("say hi");
			}
		</script> <!-- 解释执行的时候： 需要先加载按钮，js文件中才找得到btn4这个按钮。 -->
		<!-- script标签用于引入js文件之后，其内部不能嵌套js代码，否则引入的js文件不能使用。 -->
		<script src="4js使用.js"></script>
	</body>
</html>

3.js知识点

变量的定义

let 变量名；

let 变量名 = 变量值 ;

变量的名字不能使用关键字。

数据类型

string

number

boolean

null

undefined

运算符

算术运算符

关系运算符

逻辑运算符

赋值运算符

数据类型转换

隐式转换

数据类型转换函数

分支语句

if...else

if...

if...else if....

循环语句

for （ let i =0 ; i < n ; i++ ） {}

for 循环同 java 语法规则

获取元素的方式

document.getElementById(id 值 ) ：根据 id 查找元素，结果是一个元素对象

document.getElementsByTagName( 标签名字 ) ：根据标签名查找，结果是一个元素的数组

对象。

document.getElementsByName( 标签的 name 属性 ) ：根据标签的 name 属性的值查找，结

果是一个元素的数组对象。

document.getElementsByClassName( 标签 class 的值 ) ：根据标签的 class 的值查找，结果是

一个元素的数组对象。

修改和获取标签内部的内容：

obj.innerHTML: 可以对文本和标签进行使用

obj.innerText: 只能对文本进行使用

obj.value: 表单元素的 value 值的获取或者设置

修改标签的 style

obj.style.width/height

obj.style.color

.....

奏长歌，踏山河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页知识学习总结3

的函数，找到标签元素，然后设置标签元素的样式。：根据标签名查找，结果是一个元素的数组。的函数，找到标签元素，然后绑定单击事件。查找元素，结果是一个元素对象。变量的名字不能使用关键字。果是一个元素的数组对象。可以对文本和标签进行使用。一个元素的数组对象。...
复制链接

扫一扫