初探Javascript（2）

最新推荐文章于 2023-08-20 11:06:32 发布
最新推荐文章于 2023-08-20 11:06:32 发布
阅读量98 收藏
点赞数 1
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36936831/article/details/107213577
版权

函数传参
运用函数传参来改变div的颜色
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
		#div1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
		
		function setColor(color){
			div1.style.background=color;
		}
	</script>
</head>
<body>
	<input type="button" value="变绿" onclick="setColor('green')">
	<input type="button" value="变黄" onclick="setColor('black')">
	<input type="button" value="变黑" onclick="setColor('black')">
	<div id="div1"></div>
</body>		       
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
div改变样式
两种操作属性的方法：
div1.value='aaaaa';
div1['value']='aaaaa';
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
		#div1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
		function setStyle(name,value){
			div1.style[name]=value
		}
	</script>
</head>
<body>
	<input type="button" value="变宽" onclick=" setStyle('width','400px')">
	<input type="button" value="变高" onclick="setStyle('height','400px')">
	<input type="button" value="变绿" onclick="setStyle('background','green')">
	<div id="div1"></div>
</body>		       
</html>

在这里插入图片描述

字符串和变量
变量不用加 ‘ ’
字符串（常量）用加 ‘ ’

提取事件：
window.onload=function(){ }加载完整个页面之后，在加载里面的代码
行为，样式，结构三者分离

获取一组元素：
getElementsByTagName

循环

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			float: left;
			border: 1px solid black;
			margin: 10px;
		}
	</style>

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
	window.onload=function(){
		var aDiv=document.getElementsByTagName('div');
		for(var i=0;i<aDiv.length;i++){
			aDiv[i].style.background='red';
		}
	
	};
	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>		       
</html>

在这里插入图片描述
全选，全不选
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
		
	</style>

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
	window.onload=function(){
		var aCh=div1.getElementsByTagName('input');		/*选择div重点input标签*/
		btn1.onclick=function(){
			
			for(var i=0;i<aCh.length;i++){
				aCh[i].checked=true;
			}
		}
		btn2.onclick=function(){
			
			for(var i=0;i<aCh.length;i++){
				aCh[i].checked=false;
			}
		}
		btn3.onclick=function(){
			for(var i=0;i<aCh.length;i++){
				if(aCh[i].checked==true){
					aCh[i].checked=false;
				}
				else{
					aCh[i].checked=true;
				}
			}
		}
	}
	</script>
</head>
<body>
	<input id="btn1" type="button" value="全选"><br>
	<input id="btn2" type="button" value="不选"><br>
	<input id="btn3" type="button" value="反选"><br>
<div id="div1">
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
	<input type="checkbox"><br>
</div>
</body>		       
</html>

在这里插入图片描述
选项卡：
this.当前发生事件的元素
HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
		#div1 .active{
			background-color: yellow;
		}
		#div1 div{
			width: 200px;
			height: 200px;
			background-color: #ccc;
			border: 1px solid #999;	
			display: none;
		}
	</style>

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
		window.onload=function(){
			var aBtn=div1.getElementsByTagName('input');
			var aDiv=div1.getElementsByTagName('div');
			for(var i=0;i<aBtn.length;i++){
				aBtn[i].index=i;
				aBtn[i].onclick=function(){
					for(var i=0;i<aBtn.length;i++){
						aBtn[i].className='';
						aDiv[i].style.display='none';
					}
					this.className='active';
					aDiv[this.index].style.display='block';
				}
			}
		}
	</script>
</head>
<body>
	<div id="div1">
		<input class="active" type="button" value="教育">
		<input type="button" value="培训">
		<input type="button" value="招生">
		<input type="button" value="出国">
		<div style="display: block;">111</div>
		<div>222</div>
		<div>333</div>
		<div>444</div>
	</div>
</div>
</body>		       
</html>

在这里插入图片描述
在这里插入图片描述
添加文字
innerHTML可以创建HTML元素
HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
		#div1{
			width: 200px;
			height: 150px;
			border: 1px solid black;
		}
	</style>

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
		window.onload=function(){
		btn1.onclick=function(){
			div1.innerHTML=txt1.value;
		}
		}
	</script>
</head>
<body>
	<input id="txt1" type="text">
	<input id="btn1" type="button" value="设置文字">
	<div id="div1">

	</div>
</body>		       
</html>

在这里插入图片描述
字符串拼接
var arr=[1,2,3,4]也是一个数组
字符串按从左到右的顺序进行

简易日历：
HTML

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>
	<style>
		li{
			float: left;
			margin-left: 15px;
			border: 1px solid black;
			background-color: blueviolet;
			list-style: none;
		}
	</style>

	<link id="l1" rel="stylesheet" type="text/css" href="new 1.css">	
	<script>	/*在里面定义函数*/
		window.onload=function(){
			var aLi=tab.getElementsByTagName('li');
			var oTxt=tab.getElementsByTagName('div')[0];
			for(var i=0;i<aLi.length;i++){
				aLi[i].index=i
				aLi[i].onmouseover=function(){
					for(var i=0;i<aLi.length;i++){
						aLi[i].className='';
					}
					this.className='active';
					oTxt=tab.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
				}
			}
		}
	</script>
</head>
<body>
	<div id="tab" class="calendar">
		<ul>
			<li class="active"><h2>1</h2><p>JAN</p></li>
			<li><h2>2</h2><p>FER</p></li>
			<li><h2>3</h2><p>MAR</p></li>
			<li><h2>4</h2><p>APR</p></li>
			<li><h2>5</h2><p>MAY</p></li>
			<li><h2>6</h2><p>JUN</p></li>
			<li><h2>7</h2><p>JUL</p></li>
			<li><h2>8</h2><p>AUG</p></li>
			<li><h2>9</h2><p>SEP</p></li>
			<li><h2>10</h2><p>OCT</p></li>
			<li><h2>11</h2><p>NOV</p></li>
			<li><h2>12</h2><p>DEC</p></li>
		</ul>
	</div>
	<div class="text">
		<h2>月活动</h2>
		<p>快过年了</p>
	</div>
</body>		       
</html>

在这里插入图片描述

Hermioneee_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript 自定义事件初探
10-29
JavaScript中的事件机制是一种强大的编程工具，它使得代码能够响应用户操作或者其他特定的程序事件，从而使程序的逻辑更接近现实世界的交互。在JavaScript中，许多内置的DOM对象都拥有自己的事件，比如按钮的`...
初探JavaScript与HTML的交互之美：Hello World实例详解
06-28
这背后，是JavaScript引擎的精密运作，是DOM操作的巧妙运用，是对事件驱动机制的基本理解。每一个字符的出现，都是对编程逻辑的一次实践，对代码执行流程的一次把握。 当我们按下浏览器的刷新按钮，看到那句熟悉的...
初探JavaScript
大草的博客
07-06 303
在前端进行简单的交互：首先是哪个标签需要修改，然后找到该标签，进行修改。
01 初探JavaScript和概述
wucan111的博客
11-25 101
01 初探JavaScript和概述 一、聊一下JavaScript的历史 (1) 产生背景和原因 早期的Html是什么样的呢？ 现在收藏的最早的网页 那个时候还没有JavaScript呢！Css也还在整合当中，当初网页要实现一个表单的提交，可没有Html5这么简单轻松。以前的input可没有验证属性之类的验证方法，只有每次提交经有服务器验证确认才能确定自己是否有正确填写格式。 对的也许你已经能够想到当时网民的痛苦，数据格式还不是其它错误都需要30s的等待回复时间，这是一个相当漫长的过程。直到1995年，终
初探JavaScript一
可芭乐的博客
01-10 348
鼠标、函数、隐藏显示、换肤、提示框鼠标操作 onmouseover鼠标移入显示 onmouseout鼠标移出显示<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 { widt
初探JavaScript之浅拷贝
weixin_46308155的博客
07-26 104
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对象拷贝</title> </head> <body> <script type="text/javascript"> //对象浅拷贝------------>>>>>>>>>>> O
JavaScript初探之闭包
wm1634208243的博客
08-20 40
注意：JS中变量的声明和赋值是在两个不同时期的。如下，当fn函数执行的时候，首先找到函数内部所有的变量、函数声明，把它们放在作用域中，给变量一个初始值：undefined，此时变量可以访问。之后才是逐条执行代码，在执行代码的过程中，如果有赋值语句，对变量进行赋值。●　JS中还可以通过函数创建出一个独立的作用域，其中函数可以嵌套，所以作用域也可以嵌套。完整资料进入【数字空间】查看——搜索"writebug"JavaScript中的变量作用域、作用域链与闭包。●　变量作用域的概念：就是一个变量可以使用的范围。
JavaScript设计模式初探
R的博客
07-13 128
设计模式初探 单例模式 内部定义变量,并通过闭包判断,不存在则生成新的 策略模式 符合单一职责原则 增加或减少策略,无需大改原有的代码 针对同一问题的多种处理方式，仅仅是具体行为有差别时 参考文章:JavaScript用策略模式消除if else 和switch const listString={ add:0, del:1, update:2 } const strFunc={ add:function(){ return listString['add']; }, de.
初探javascript
05-17 54
javascript是一种在网络广泛应用的脚本语言，虽然名字与java相近，但其实两者并没有直接的关系，脚本语言是一种为了便于操作和拓展功能而开发出来的解释性语言，不同于传统的编程语言，脚本语言不需要编译即可通过解释器运行，各大浏览器中均内置javascript解释器。 html中提供了script标签来标明需要使用javascript解释器的代码块，script标签可以放在html文...
初探JavaScript PDF blob转换为Word docx方法
葡萄城技术团队博客
10-20 1889
PDF转WORD为什么是历史难题 PDF 转Word 是一个非常非常普遍的需求，可谓人人忌危，为什么如此普遍的需求，却如此难行呢，还得看为什么会有这样的一个需求： PDF文档遵循iOS32000的规范是由Adobe 公司推出的文档格式，之所以应用如此广泛，是因为PDF精确定位了每个字符的坐标、根据坐标绘制的各种形状，使用PDF格式传输和打印文档可以保证格式的一致性，然后很多PDF文件是可用于阅读，展示，打印，但编辑起来是非常困难，如格式调整，文字修改，样式调整等，那么就衍生了PDF 转Word这一历史性的需
javascript之DOM初探
JasonCeng_的博客
02-05 244
一、 HTML DOM（文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM模型被构造为对象的树。 通过可编程的对象模型，javascript获得了足够的能力来创建动态的HTML。 javascript能够改变页面中所有的HTML元素 javascript能够改变页面中的HTML属性 javascript
初探JavaScript魅力-笔记
eluanshi12的博客
10-24 256
初探JavaScript魅力-01初探JavaScript魅力-01JavaScript是一门用于给网页添加功能、交互的脚本语言。<html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> #div1{ width:200px; height: 100p
Angular2库初探
08-31
Angular2作为下一代JavaScript框架，提供了许多强大的特性和改进，使得开发者能够构建更高效、可维护的Web应用。然而，随着技术的更新，开发工作流程也发生了变化，例如从传统的外链JavaScript引用转变为使用npm包...
JavaScript动画初探
09-16
JavaScript动画初探
程序员合同范本
07-18
【作品名称】：程序员合同范本 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
python代码提取163邮箱账号内的邮件内容
最新发布
07-18
使用python实现提取163邮箱里邮件内容，增加的有正则匹配判断，插入数据库等操作代码
行业比较框架：择优而仕.pdf
07-18
行业比较框架：择优而仕
Python人工智能课程 AI算法课程 Python机器学习与深度学习 13.RNN 共47页.pptx
07-18
【内容大纲】 1.Python与数学基础 共83页.pdf 1.矩阵和线性代数_Python 共90页.pdf 2.概率论与数理统计 共89页.pdf 3.数据清洗和特征选择 共16页.pdf 4.多元回归与逻辑回归 共69页.pdf 5.决策树随机森林 共91页.pptx 6.支持向量机 共70页.pdf 7.聚类 共88页.pdf 8.EM算法 共66页.pptx 9.HMM 共80页.pptx 10.主题模型 共78页.pdf 11.卷积神经网络 共76页.pdf 12.目标检测算法 共47页.pdf 12卷积神经网络 共76页.pdf 13.RNN 共47页.pptx 14.NLP技术分享 自然语言处理技术课程 共184页.pdf 15.GAN网络 共25页.pdf 15.GAN源代码讲解及GAN项目介绍 共24页.pdf 16.强化学习-课件 共125页.pdf
大数据技术分享 Spark技术讲座 将Apache Hive工作负载迁移到Apache Spark-弥补差距 共20页.pdf
07-18
大数据技术分享 Spark技术讲座 将Apache Hive工作负载迁移到Apache Spark-弥补差距 共20页.pdf
使用Java进行2D游戏编程初探
在COVID-19期间，作者的团队研究了Unity3D和Unreal Engine，这些引擎主要基于C#、JavaScript和C++。尽管Java不是传统意义上的游戏开发首选语言，但现代库和引擎提供了对OpenGL渲染的支持，使得用Java开发游戏成为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值