javascript入门3

已于 2022-05-11 21:07:53 修改
阅读量240 收藏
点赞数
文章标签： javascript json 开发语言
于 2022-05-11 21:07:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67925322/article/details/124717503
版权

目录

1.json复杂类型

2.dom入门

3.通过document获取标签对象

4.js中常见事件分类

1.  点击相关的 

 2.   焦点事件 (重点)

3.   选项卡发生变化的事件 (重点)  

4.   鼠标经过事件 :onmouseover

 5.  鼠标移出事件:onmouseout

 6. 页面载入事件 (重点):onload

1.json复杂类型

var 对象名 = [{},{},{}...] 描述类似数组或者集合

<script>
           var students = 
		   [
			    {"name":"高圆圆","age":42,"gender":"女","address":"西安市"},
				{"name":"王宝强","age":35,"gender":"男","address":"北京市"},
				{"name":"文章","age":32,"gender":"男","address":"渭南市"},
				{"name":"姚笛","age":25,"gender":"女","address":"西安市"}
		   ]  ;
		   //json对象[索引值].key 获取对应value值
		   document.write(students[1].address) ;
</script>

结果:北京市

2.dom入门

3.通过document获取标签对象

共4种方式

1.id属性值

2.class属性值

3.name属性值

4.标签名称

                //方式1:在标签中给定id属性值,必须唯一 (推荐)
				//document.getElementById("id属性值") 获取标签对象
				var username = document.getElementById("username") ;
				
				//方式2:docuement.getElementsByClassName("class属性值") ; 获取的标签对象列表
				var username = document.getElementsByClassName("cl_username")[0] ;
				
				//方式3:docuement.getElementsByName("name属性值") ;//获取的标签对象列表
				var username = document.getElementsByName("name")[0] ;
				
				//方式4:通过标签名称获取标签对象
				//docuement.getElementsByTagName("同名的标签名称") ; //返回的标签对象列表
				var username = document.getElementsByTagName("input")[0] ;
				
				//标签对象获取value属性:内容可以获取到
				//alert(username.value) ;

4.js中常见事件分类

1.  点击相关的 


                   单击事件 (重点)  onclick
                   双击事件         ondbclick

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单双击事件</title>
	</head>
	<body>
		<input type="button" value="单击我试试" onclick="danji()"/>
		<input type="button" value="双击我试试" ondblclick="shuangji()"/>
		<script>
			function danji(){
				alert("您单击了一次!");
			}
			function shuangji(){
				alert("您双击了一次!");
			}	
		</script>
	</body>
</html>


 2.   焦点事件 (重点)


                    获取焦点      onfocus
                    失去焦点      onblur

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>焦点事件</title>
	</head>
	<body>
		<input type="text" placeholder="点我获取焦点" onfocus="juji()" />
		<input type="text" placeholder="点我一下就离开" onblur="shiqu()"/>
		<script>
			function juji(){
				alert("您已获取焦点!");
			}
			function shiqu(){
				alert("您已失去焦点!!");
			}	
		</script>
	</body>
</html>


3.   选项卡发生变化的事件 (重点)  

     
                     select标签 下拉菜单                 onchange     
                             option 下拉选项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>焦点事件</title>
	</head>
	<body>
		籍贯:
		<select onchange="testChange()" id="province">
			<option value="请选择">请选择</option>
			<option value="陕西省">陕西省</option>
			<option value="山西省">山西省</option>
			<option value="广东省">广东省</option>
		</select>
		籍贯:
		<select onchange="testChange()" id="province">
			<option value="请选择">请选择</option>
			<option value="陕西省">陕西省</option>
			<option value="山西省">山西省</option>
			<option value="广东省">广东省</option>
		</select>
		<script>
			function testChange(){
					  // alert("选项卡发生变化了") ;
					  //获取 id="province"的select标签对象,同时获取选择的内容
					  var province = document.getElementById("province").value ;
					 // alert(province) ;
					 
					 //获取id="city"的select标签对象
					 var city = document.getElementById("city") ;
					 //每一次选项卡变化将上一次拼接的文本内容,清空掉
					 city.innerHTML  = "" ;
					 //判断
					 if(province=="陕西省"){
						 //创建一个数组,陕西省的城市
						 var arr = ["西安市","咸阳市","宝鸡市","渭南市","神木市"] ;
						 //遍历
						 for(var i = 0 ; i < arr.length ; i++){
							 //arr[i]每一个城市名
							 //设置id="city"的select标签对象的文本内容
							 city.innerHTML += " <option value="+arr[i]+">"+arr[i]+"</option>" ;
						 }
					 }
					 
					 if(province=="山西省"){
					 			 //创建一个数组,陕西省的城市
					 			 var arr = ["太原市","大同市","晋中市","临汾市","运城市"] ;
					 			 //遍历
					 			 for(var i = 0 ; i < arr.length ; i++){
					 				 //arr[i]每一个城市名
					 				 //设置id="city"的select标签对象的文本内容
					 				 city.innerHTML += " <option value="+arr[i]+">"+arr[i]+"</option>" ;
					 			 }
					 }
					 if(province=="广东省"){
					 			 //创建一个数组,陕西省的城市
					 			 var arr = ["深圳市","东莞市","惠州市","佛山市","珠海市"] ;
					 			 //遍历
					 			 for(var i = 0 ; i < arr.length ; i++){
					 				 //arr[i]每一个城市名
					 				 //设置id="city"的select标签对象的文本内容
					 				 city.innerHTML += " <option value="+arr[i]+">"+arr[i]+"</option>" ;
					 			 }
					 }
		</script>
	</body>
</html>


4.   鼠标经过事件 :onmouseover


 5.  鼠标移出事件:onmouseout

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>焦点事件</title>
	</head>
	<body>
		<input type="text" placeholder="鼠标经过我试试" onmouseover="mouseover()"/>
		<hr />
		<input type="text" placeholder="鼠标经过我试试" onmouseout="mouseout()"/>
		<script>
			function mouseover(){
				document.write("你真好看!")
			}
			function mouseout(){
				document.write("别离开我!")
			}
		</script>
	</body>
</html>


 6. 页面载入事件 (重点):onload

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>焦点事件</title>
	</head>
	<body onload="load()">
		<input type="text" placeholder="鼠标经过我试试" />
		<hr />
		<input type="text" placeholder="鼠标经过我试试" />
		<script>
			function load(){
				document.write("已加载完毕!")
			}
			
		</script>
	</body>
</html>

陌上云幕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript入门学习书籍推荐
10-30
很多人对学习JavaScript充满热情，但面对市面上琳琅满目的书籍，初学者往往不知如何选择合适的入门书籍。这篇文章将帮助初学者了解推荐的JavaScript学习书籍，并简要介绍每本书的特点。 首先，推荐给新手的书籍是...
JavaScript入门
04-28
javascript 入门教程，第五版入门经典
JavaScript 快速入门教程
qq_53569667的博客
12-31 1372
在学习 JavaScript 的过程中，根据狂神Java和菜鸟教程的学习内容整理出来的一些笔记
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7415
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
JavaScript入门基础
『愚』的博客
11-06 3854
JavaScript入门基础概述变量的声明变量的作用域基本数据类型Number类型String类型Boolean类型Undefined类型Null类型三大引用类型Object类型Array类型Function类型typeof 操作符js编写的位置js的三种输出方式 概述 JavaScript是世界上最流行的脚本语言，是一种运行在浏览器中的解释型的编程语言，能够实现跨平台、跨浏览器。虽然只是十多天时间的产物，并且有很多的缺陷和陷阱，但也造就了JavaScript的灵活和强大。随着Node.js的兴起，Jav
javascript 阮一峰入门教程
running_131的博客
07-13 3499
Javascript [阮一峰大神](https://wangdoc.com/javascript/index.html)，深入浅出 文章来源 https://wangdoc.com/javascript/index.html 博客图片显示方法 https://crazyang.blog.csdn.net/article/details/87917772?
JavaScript基础入门
dangfulin的博客
08-21 5549
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
前端之JavaScript入门篇
Queen_is_king的博客
07-26 2835
JavaScript是一门解释型语言，也是动态语言。所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。而所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术提示。.
arcgis for JavaScript入门篇
qq_69444691的博客
07-10 2292
ArcGIS for JavaScript是一种基于Web的地图开发解决方案，由ESRI公司开发。它允许开发人员在Web应用程序中嵌入交互式地图，并使用JavaScript编写地图应用程序。ArcGIS for JavaScript提供了许多功能强大的API和工具，使开发人员能够创建高度定制的地图应用程序。它支持各种地图数据源，包括ESRI的ArcGIS Online服务、第三方地图服务、以及开发人员自己的数据。
5分钟JavaScript快速入门
luming的博客
02-24 2675
JavaScript是一种高级编程语言，用于开发网页和网络应用程序。它是一种动态类型语言，可以在客户端和服务器端运行。JavaScript主要用于改善用户体验、实现动态网页、与用户进行交互以及处理数据等功能。它具有易学易用的特点，被广泛用于网页开发和移动应用开发。JavaScript是一种弱类型、动态的编程语言，主要用于在网页上添加交互功能。、
JavaScript快速入门
qq_61506605的博客
03-13 468
JavaScript快速入门
JavaScript 入门 新手学习笔记
11-17
这篇"JavaScript入门新手学习笔记"提供了全面的学习资源，适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点： 1. **基础语法**：JS的基础包括变量（var、let、const）、数据类型（如字符串、数字、...
JavaScript入门系列之知识点总结
10-22
这只是JavaScript入门的冰山一角，还有更多诸如数组、对象、循环、控制流、事件处理、DOM操作等概念需要学习。继续深入，你将能利用JavaScript构建复杂的交互式Web应用。对于初学者来说，不断实践和理解这些基础知识...
JavaScript代码片段
weixin_66128399的博客
08-26 2348
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 1220
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
vue ref和reactive区别
灰海
08-25 4336
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 942
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
jQuery基础——DOM
m0_54066656的博客
08-27 1703
JQ基础——DOM操作
JavaScript入门经典教程解析
"javascript入门教程.pdf，这是一份经典的中文版JavaScript入门教程，包含详细目录，适合初学者阅读和理解。" 在深入探讨JavaScript语言之前，我们先了解它的基本概念和历史背景。JavaScript，作为一种广泛应用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值