JavaScript的学习

最新推荐文章于 2025-01-13 13:51:59 发布

小码@

最新推荐文章于 2025-01-13 13:51:59 发布

阅读量218

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/qq_42898038/article/details/122424358

版权

本文介绍了JavaScript的基本概念，包括DOM（文档对象模型）的操作方法，如通过ID、名称、类名及标签名获取对象；同时讲解了不同类型的事件及其绑定方式，并简要提到了BOM（浏览器对象模型）的基本应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS的学习

Dom概述

Document Object Model 文档对象模型，指的是多个文档对象
1.document文档对象表示整个html标签
2.element标签对象表示网页的标签
3.test 文本对象
4.Attribute属性对象

一、DomApi

获取标签的对象

1.通过id来获取标签对象
2.通过name名称来获取标签对象
3.通过class名称来获取标签对象
4.通过标签名称来获取标签对象

密码：<input type="password" name="psw" /><br />
		用户名：<input type="text" name="username" id="uname" class="s" /><br />
		性别：<input type="radio" name="sex" class="s" value="man" />男
		<input type="radio" name="sex" class="s" value="woman" />女<br />
		<script type="text/javascript">
			//1.根据id获取标签对象，获取1个标签对象
			var username_obj = document.getElementById("uname");
			document.write(username_obj.id);
			console.log("username的输入框：" + username_obj.id);
			document.write("<hr>");
			//2.根据name的属性值获取标签对象，获取多个标签对象
			var sex_objs = document.getElementsByName("sex");
			console.log("sex属性的标签个数：" + sex_objs.length)
			//3.根据class的属性值获取标签对象，获取多个标签对象
			var class_objs = document.getElementsByClassName("s");
			console.log("class属性的标签个数：" + class_objs.length)
			//4.根据标签名称获取标签对象，获取多个标签对象
			var tag_objs = document.getElementsByTagName("input");
			console.log("input标签名称的标签个数：" + tag_objs.length)
		</script>

代码效果：
在这里插入图片描述

操作标签对象

二、事件

1.事件概述

事件：操作网页时，触发的动作，比如：鼠标单击，鼠标双击

事件源：指的是网页的元素，比如说：标签，文本

事件源和事件绑定：通过触发网页的事件，调用js代码。

实际场景：报警器，脚踹电动车，触发报警器。

事件：

单击事件：onclick

双击事件：ondbclick

2.在html网页绑定事件的两种方式

方式一：直接绑定

 <input type="button" value="直接绑定,点击我,好吗,亲!!!" onclick="fu1()" />
    function fu1() {
    		alert("爱你呦，亲，谢谢回顾")
    	}

方式二：间接绑定

<input type="button" value="间接绑定,哈哈哈" id="tt2" /> 
    	<a href="#" id="a">百度</a>
    	<button>点我，亲</button>
    		<script>
			// <!--
			// 间接绑定:
			// 	根据标签名称获取标签对象
			// 根据标签名称, 获取的是数组,
			// //var tags = [button]
			// -->
			// 第一种
			var tags = document.getElementsByTagName("button");
			// 2.
			var a = tags[0];
			a.onclick = function() {
				console.log(222222);
			}
			// 第二种
			var input2 = document.getElementById("tt2");
			input2.onclick = function() {
				alert("小猪");
			}
			// // 第三种
			var tt = document.getElementById("a");
			tt.onclick = function() {
				tt.setAttribute("href", "https://www.baidu.com/");
			}
		</script>

3.内容改变事件

<body>
		<select onchange="changeContext()">
			<option>--please choose</option>
			<option>河南省</option>
			<option>河北省</option>
		</select>
		<script>
			// 1.直接绑定：定义函数
			// 2.定义变量
			var num=1;
			function changeContext(){
				console.log(num);
				num++;
			}
		</script>
	</body>

4.onload加载事件

<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/**
			 * οnlοad="t2()"
			 * 作用：当html网页全部加载完毕后，才会执行t2函数
			 * 特点：onload事件会自动执行。
			 */
			function t2(){
				// 0.需求：获取标签体内容
				// 1.根据id 获取标签对象
				var divTag=document.getElementById("d1");
				// 2.根据标签对象的innerhtml
				var div_text=divTag.innerHTML;
				// 3.打印
				console.log(div_text);
			}
		</script>
	</head>
	<body onload="t2()">
		<div id="1">
			我们互相提高，互相进步
		</div>
	</body>

页面显示图片

在这里插入图片描述
第一类：绝对路径
第二类：相对路径
同一级目录：

<img src="a.gif" width="100px" height="100px">

下一级目录：

<img src="img/a.gif" width="100px" height="100px" />

上一级目录：

<img src="../img/12.png" width="100px" height="100px" />

三、Bom

Bom概述

1.Browser Object Model 浏览器对象模型，包含多个bom对象
作用：操作浏览器
2.Bom常见对象

window 窗口
navigator 浏览器对象
history 访问历史记录对象
screen 屏幕
location 地址栏

3.常用api
window对象
location对象