简单的javascript学习02

最新推荐文章于 2025-09-12 16:56:45 发布
最新推荐文章于 2025-09-12 16:56:45 发布
阅读量559 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Vincent_yuan1991/article/details/52175744
本文回顾了HTML、CSS和JavaScript的基础知识，包括HTML的各种标签、CSS的样式控制与布局、JavaScript的基本语法与常见对象操作等，适合前端初学者巩固基础知识。 
-----------------------------------------------------------------------------------------------------------------------------------------------
													第三天
-----------------------------------------------------------------------------------------------------------
<html>
	<head>
		<title>简单复习</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
			<h3>HTML</h3>
		<ol>
			<li>html的概念</li>
			<li>三大基石</li>
			<li>html的标准文档</li>
			<li>html的head 标签</li>
			<li>13个常用的文本标签</li>
			<li>图片标签和表格标签</li>
			<li>超链接和iframe</li>
			<li>frameset</li>
			<li>form标签</li>
			<li>form登陆注册页面</li>
		</ol>
		<h3>CSS</h3>
		<ol>
			<li>css的介绍：层叠样式表</li>
			<li>css的声明：3种----就近原则</li>
			<li>css的选择器------3种</li>
			<li>CSS的定位和盒子模型</li>
		</ol>
		<h3>js</h3>
		<ol>
			<li>js的历史与发展</li>
			<li>js的引入</li>
			<li>js的变量与声明</li>
			<li>js的运算符</li>
			<li>js的逻辑结构</li>
			<li>js的数组</li>
			<li>js的函数</li>
			<li>常用的对象和方法</li>
			<li>事件机制</li>
			<li>event对象</li>
		</ol>
		
		
	</body>
</html>
----------------------------------------------------------------------------------------------
<html>
	<head>
		<title>BOM对象学习</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
		/*
		 	window对象讲解
		 		1、常用方法讲解
		 			window.alert()--------警告框方法，没有返回值
		 			window.confirm()------确认框，如果在确认的时候点击确定返回true,点击取消返回false;
		 			window.prompt(参数1,参数2)------提示框，有两个参数.参数1是对本窗口功能的说明,参数2是默认值
		 			返回值：
		 				如果点击确定，则将用户写的值返回
		 				如果点击取消，则返回null;
		 		
		 			window.setTimeOut()-----定时执行
		 			window.setInterval()----间隔执行
		 			setTimeOut和setInterval都会开启线程，在执行的时候会将开启的线程id返回。
		 			
		 			clearTimeOut(id)------关闭setTimeOut()启动的线程
		 			clearInterval(id)-----关闭setInterval()启动的线程
		 			
		 			
		 			window.open(url,newname,features)-----打开一个设置好的子窗口，既可以是网络资源也可以打开本地资源
		 			window.open("son.html","新窗口","height=600, width=800, 
		 			top=100,left=100, toolbar=no, menubar=yes, scrollbars=yes, 
		 			resizable=no,location=yes, status=no");
		 		2、属性讲解			 		
		 		window.opener-----使用此属性可以调用父页面的函数；	
		 * */
			//警告框
			function test_alert()
			{
				window.alert("aaa");
				
			}
			//确认框
			function test_confirm()
			{
				var flag= window.confirm("你真的真的要离开我吗？");
				window.alert(flag);
			}
			//提示框
			function test_prompt()
			{
				var value=window.prompt("请输入昵称","例如：陶渊明");
				window.alert(value);
			}
			
			//setTimeOut定时执行
			function test_setTimeOut()
			{
				var num= window.setTimeout(function(){
					alert("好坑。。。。。");
				},3000);
				alert(num);
			}
			//setInterval间隔执行
			function test_setInterval()
			{
				
				window.setInterval(function(){
					alert("setInterval.......执行了");
				},2000);				
			}
			
			//open
			function test_open(){
				window.open("http://www.baidu.com");
				
			}
			
			function test_open2(){
				window.open("son.html","新窗口","height=600, width=800, top=100,left=100, toolbar=no, menubar=yes, scrollbars=yes, resizable=no,location=yes, status=no");
			}
			
			function test_opener()
			{
				alert("我是父页面");
			}
			
			
			
		</script>
	</head>
	<body>
		<h3>bom对象学习</h3>
		<pre>
		浏览器对象模型：BOM------>协议，是用来规范各大浏览器厂商开发浏览器的，这样对于我们开发人员来讲，在使用脚本语言的时候
		可以不再考虑浏览器内核差异的问题。具体的实现是window对象
		window是浏览器厂商对外提供的可以访问其内部封装的方法的对象。
		</pre>
		<hr />
		<h3>window对象常用方法讲解</h3>
		<input type="button" name="" id="" value="测试警告框" onclick="test_alert();" />
		<input type="button" name="" id="" value="测试确认框" onclick="test_confirm();" />
		<input type="button" name="" id="" value="测试提示框"  onclick="test_prompt();"/>
		<hr />
		<input type="button" name="" id="" value="测试setTimeOut" onclick="test_setTimeOut();"/>
		<input type="button" name="" id="" value="测试setInterval" onclick="test_setInterval();"/>
		<hr />
		<input type="button" name="" id="" value="测试open方法打开网络资源" onclick="test_open();"/>	
		<input type="button" name="" id="" value="测试open方法打开本地资源" onclick="test_open2();"/>	
	</body>
</html>
--------------------------------------------------------------------------------------------------------------
<html>
	<head>
		<title>子页面</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
			var id;
			//使用window.close()及setTimeOut方法实现页面自动关闭
			function test_close(){
				window.setTimeout(function(){
					window.close();
				},3000);
			}
			
		//使用setInterval()方法实现网页倒计时关闭功能
			function test_dj(){
				var f=document.getElementById("f");
				id=window.setInterval(function(){
					f.innerHTML=f.innerHTML-1;
					if(f.innerHTML==0){
						window.close();
					}
				},1000);
				//alert(f.innerHTML);
			}
			
			//使用clearInterval()方法关闭setInterval()开启的线程
			function test_stop(){				
				window.clearInterval(id);
			}
			
			
			//使用window.opener打开执行父页面的函数
			function test_op(){
				window.opener.test_opener();
			}
			
		</script>
	</head>
	<body onload="test_dj();">
		欢迎客官光临本网站，会员费一个月10元，某宝就有卖.<font color="red" size="10px" id="f">5</font>秒后本网站会自动关闭，请客官抓紧时间。
		<hr />
		<input type="button" name="" id="" value="继续" onclick="test_dj();" />	
		<input type="button" name="" id="" value="暂停" onclick="test_stop();"/>
		<input type="button" name="" id="" value="测试opener方法"  onclick="test_op();"/>
		
	</body>
</html>
--------------------------------------------------------------------------------------------------------
<html>
	<head>
		<meta charset="UTF-8">
		<title>window属性学习</title>
		<script type="text/javascript">
		/*
		 	window对象常用属性学习：
		 		1、screen：屏幕属性，主要是用来获取用户电脑的屏幕信息的
		 		例如：window.screen.height,获取用户屏幕的高分辨率
		 		剩余的参照PPT了解即可
		 		
		 		2、location:地址栏属性，主要是用来操作用户浏览器的地址栏
		 			href:window.location.href="http://www.baidu.com"----将地址栏信息改为此值，并跳转
		 				  也可以用来获取当前地址栏中的URL
		 * 			reload()：window.location.reload()刷新当前页
		 * 		3、history:存储的是浏览器的历史记录信息
		 * 			back()：window.history.back()----相当于浏览器的后退按钮
		 * 			forward():window.history.forward()----相当于浏览器的前进按钮
		 * 			go(index):index作用将指定的历史记录的编号传进来，正数表示前进到指定的记录，负数表示后退到执行的记录，0表示刷新
		 *		4、navigator:此属性保存的是浏览器的信息
		 * 			userAgent:window.nabigator.userAent---返回当前浏览器的信息 
		 * */
			function test_screen(){
				alert(window.screen.width+":"+window.screen.height);
			}
			
			function test_location(){
				alert(window.location.href);
				//window.location.href="http://www.baidu.com";
				alert(window.location.pathname+":"+window.location.port);
				
				window.location.reload();
			}
			
			function test_history(){			
				window.history.forward();
			}
			
			function test_navigator(){
				alert(window.navigator.userAgent+":"+"浏览器信息");
				alert(window.navigator.platform+"：浏览器运行的操作系统");
				alert(window.navigator.appName+":"+window.navigator.appVersion);
				
			}
		</script>
	</head>
	<body>
		<h3>window属性学习</h3>
		<input type="button" name="" id="" value="测试window的screen属性" onclick="test_screen();" />
		<input type="button" name="" id="" value="测试机window的location属性" onclick="test_location();"/>
		<input type="button" id="" value="测试windwo的history属性的forward()方法" onclick="test_history();" />
		<input type="button" name="" id="" value="测试window的navigator属性" onclick="test_navigator();" />
	</body>
</html>
-------------------------------------------------------------------------------------------------------------
<html>
	<head>
		<title>document对象学习</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
			/*
			 	document对象学习：
			 		1、document对象：此对象是属于window对象的一个属性，专门用来操作HTML元素和HTML文档结构的。 
			 * 学习内容：
			 * 	1、使用document对象获取HTML元素
			 * 	2、操作HTML元素的属性
			 * 	3、操作样式
			 * 	4、操作内容
			 * 	5、操作文档结构
			 * 
			 * 
			 * 使用document对象获取HTML元素对象的方式：
			 * 直接方式：
			 * 	1、通过id：
			 * 		document.getElementById("HTML的元素id")
			 * 		注意：HTML元素的id不可以重复，每个元素都可以加上id
			 * 		
			 * 2、通过HTML元素name属性：
			 * 		document.getElementsByName("元素的name属性值");
			 * 		注意:返回的是存储HTML元素对象的数组
			 * 		 
			 * 3、通过HTML的标签名：
			 * 		document.getElementsByTagName("标签名");
					注意：返回的是存储HTML元素对象的数组。	
				间接方式：
					父子关系：
						通过父亲找孩子---->childNodes
					子父关系：
						通过孩子找父亲---->parentNode
					兄弟关系：
						找哥哥--------->previousibling
						找弟弟--------->nextsibling
			 * */		
/*==============直接关系=======================================================================================*/			
			//通过id方式获取HTML元素对象
			function test_id(){
				var inp=document.getElementById("uname");
				alert(inp);
			}
			function test_name(){
				var sex=document.getElementsByName("sex");
				alert(sex);	
			}
			
			function test_tag(){
				var tag=document.getElementsByTagName("input");
				alert(tag);
			}	
/*===============间接关系=============================================================*/
			function test_chidNode(){
				var showdiv=document.getElementById("showdiv");
				var child=showdiv.childNodes;
				alert(child.length);
			}
			
			function test_parent(){
				var child=document.getElementById("child");
				var parent=child.parentNode;
				alert(parent);
			}
			
			function test_bro(){
				var chid=document.getElementById("child");
				var gg=chid.previousSibling;//找的是相邻的上一个元素
				alert(gg);
				var dd=chid.nextSibling;//找的是相邻的下一个元素
				alert(dd);	
			}
		</script>
		<style type="text/css">
			#showdiv{
				border: solid 2px;
				width: 300px;
				
			}
			#showdiv input{
				margin:3px ;
			}	
		</style>
	</head>
	<body>
		<h3>document对象学习</h3>
		<input type="button" name="" id="" value="测试id获取HTML元素对象" onclick="test_id();" />
		<input type="button" name="" id="" value="测试name获取HTML元素对象" onclick="test_name();" />
		<input type="button" name="" id="" value="测试tag获取HTML元素对象" onclick="test_tag();"/>
		<hr />
		<input type="button" name="" id="" value="测试父子关系" onclick="test_chidNode();" />
		<input type="button" name="" id="" value="测试子父关系" onclick="test_parent();" />
		<input type="button" name="" id="" value="测试兄弟关系" onclick="test_bro();" />
		<hr />
		用户名：<input type="text" name="uname" id="uname" value="zhangsan" /><br /><br />
		密码: <input type="password" name="pwd" id="pwd" value="123" /><br /><br />
		性别：男 <input type="radio" name="sex" id="sex" value="0" />
			女 <input type="radio" name="sex" id="sex" value="1" />
		<!--扩展知识-->	
		<br /><br />
		<div id="showdiv">
			<input type="" name="" id="" value="" />
			<input type="" name="" id="" value="lisi" /><input type="" name="" id="child" value="zhangsan" />
			<input type="" name="" id="" value="lixiaosi" />
			<input type="" name="" id="" value="" />
			<input type="" name="" id="" value="" />
		</div>
	</body>
</html>

黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 3518
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对优快云其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
Java Script 学习笔记 -- Ajax
weixin_30429201的博客
11-20 258
AJAX 一 AJAX预备知识：json进阶 1.1 什么是JSON？ JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON是用字符串来表示Javascript对象； 记住：json字符串就是js对象的一种表现形式(字符串的形式) 既然我们已经学过python的json模块，我们就用它来测试下json字符串和json对象到底是什么 ...
学习JavaScript第一天
2303_82176667的博客
07-21 1112
JavaScript 是一种广泛使用的编程语言，主要用于增强网页的交互性。它由 Brendan Eich 在 1995 年在 Netscape 公司开发，最初被设计为一种简单的脚本语言，用于在客户端浏览器中运行。客户端脚本语言：JavaScript 主要运行在用户的浏览器中，可以与 HTML 和 CSS 一起工作，控制网页的行为和外观。动态交互：通过 JavaScript，开发者可以创建动态更新的网页内容，响应用户的操作，如点击按钮、填写表单等。异步编程。
学习jQuery这一篇就够了
热门推荐
轻松的小希
11-25 11万+
目录第一章 jQuery简介1.1、jQuery简介1.2、jQuery官网1.3、jQuery版本介绍1.4、jQuery引入方式1.5、jQuery快速使用1.6、jQuery两把利器第二章 jQuery核心函数2.1、选择器2.1.1、基本选择器2.1.1.1、标签选择器2.1.1.2、id选择器2.1.1.3、class选择器2.1.1.4、通配符选择器2.1.1.5、并集选择器2.1.1.6、交集选择器2.1.2、层级选择器2.1.2.1、子代选择器2.1.2.2、后代选择器2.1.2.3、兄弟选
JavaScript入门学习案例
itboy
06-26 5万+
JavaScript入门学习案例 test01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS的引用方式</title> <style> div{ width:100px; height:100px; bac
JS-02-javaScript快速入门
qq_31532983的博客
03-07 1103
javaScript编写位置、文本编辑器、运行方式、基本调试
分享 23 个在线学习 JavaScript 的网站
前端达人
03-14 1万+
来源 | https://javascript.plainenglish.io/23-place-to-learn-javascript-2022-7c6b854928c2写在前面一直以来...
JavaScript基础全部
ingenuou_的博客
09-11 2237
JavaScript基础全部
安卓逆向及JavaScript实战
Codeooo 博客
10-10 7154
8.14(So&Unidbg)unidbg动态调式SO-console-debugemp4。8.24(So&Unidbg)unidbg补环境实战5-methodID问题.mp4。8.26(So&Unidbg)unidbg补环境实战最右Sign–算法还原.mp4。8.34(So&Unidbg)unidbg拼多多anti-token补环境.mp4。8.18(So&Unidbg)unidbg算法分析参数结构体.mp4.mp4。8.20(So&Unidbg)unidbg补环境实战2-boos.mp4。
JavaWeb学习笔记——javascript
MCC
12-17 1万+
javascript基本语法script标签引入js代码变量比较运算逻辑运算数组函数第一种方式第二种方式隐式参数arguments自定义对象{ }形式Object形式事件onload静态注册动态注册onclickonbluronchange静态绑定动态绑定onsubmitDOM对象getElementById()getElementByNamegetElementByTagNamedom对象的属性正则表达式 基本语法 script标签 alert()：警告框函数，传入的参数是警告框内要显示的信息 <!
JavaScript学习.zip
06-30
这个"JavaScript学习.zip"压缩包包含了一系列关于JavaScript基础知识的教程，旨在帮助初学者理解和掌握这一重要的编程语言。 首先，从描述中我们可以看到，这个资料涵盖了JavaScript的基础使用，如输出方法、语句和...
基于Java的Java、JavaScript、CSS、HTML全栈学习之路设计源码
10-01
它不仅仅是一套源码，更是一个设计好的学习路径，以day01、day02、day03等命名的文件夹结构，为学习者安排了清晰的学习步骤。从简单的Spring MVC框架开始，逐步过渡到Spring Boot，再到MyBatis等后端技术的深入学习...
高级软件人才培训专家-day02-JavaScript-Vue
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
library:一个用于学习JS代码结构JavaScript项目
05-18
一个简单的基于JS的图书库记录应用程序。 设置 通过在终端或CMD上运行git clone https://github.com/kunmi02/library.git来克隆项目 从项目目录运行终端或CMD。 如果需要linters，请运行npm install 。 在您的Web...
《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》
东城绝神
09-12 559
《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》
前后端开发Mock作用说明，mock.ts
循环编织时间年轮，递归叩问存在本质，谁能在硅基荒原上，种出思想的玫瑰……
09-12 409
mock.ts是前端开发中用于模拟后端接口的TypeScript文件，通过生成虚假数据使前端无需等待后端即可独立开发。它定义数据结构、模拟请求响应，并提供与真实接口一致的调用方式。示例展示了如何生成用户数据并模拟分页接口，使用vite-plugin-mock等工具实现。前端代码调用Mock接口与调用真实接口方式相同，待后端完成时只需替换接口地址即可平滑切换，实现了前后端并行开发。
JavaScript的功能和作用
2402_83164836的博客
09-10 505
JavaScript（简称 JS）是一种​​，最初设计用于为网页添加动态交互功能。经过多年发展，其应用场景已远超浏览器，成为覆盖前端、后端、移动端、桌面端甚至物联网等领域的“全场景语言”。
＜uniapp＞＜指针组件＞基于uniapp，编写一个自定义箭头指针组件
用沸腾的热血，支付我们的人生吧！
09-10 423
本文介绍了基于uniapp开发的自定义带箭头指针组件，通过SVG实现直线和箭头的组合效果。组件支持设置长度、颜色、角度等参数，并提供三种箭头规格(small/normal/big)可选。文章详细讲解了SVG结构的实现过程，包括计算终点坐标、响应式参数处理等核心功能，并展示了不同配置下的指针效果。该组件可用于时钟指针等场景，具有灵活性和复用性特点。
JavaScript经典面试题二（函数和作用域）
最新发布
weixin_43746297的博客
09-12 986
摘要：本文系统介绍了JavaScript中12个核心函数概念，包括闭包、作用域、函数绑定方法、高阶函数、箭头函数、生成器函数、防抖节流、递归、纯函数、函数重载和偏函数。重点解析了闭包的定义、实现原理及4种应用场景；详细对比了call/apply/bind三者的区别；深入探讨了箭头函数与普通函数的4个关键差异；分析了防抖节流的实现逻辑和应用场景；总结了递归的优缺点和使用建议；阐释了纯函数的定义和优势；说明了如何在JavaScript中模拟函数重载；介绍了偏函数的概念和实现方式。这些内容全面覆盖了JavaScr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值