JavaScript知识大纲（进阶篇）

最新推荐文章于 2024-03-14 14:38:28 发布
最新推荐文章于 2024-03-14 14:38:28 发布
阅读量672 收藏 6
点赞数 2
分类专栏： Java学习路线及各阶段知识大纲 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/super_Fake/article/details/117927223
版权

一、 JavaScript中常用对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			/********[1]日期对象的学习****************/
			function  demo1(){	
				var  date =new  Date();
				//  118   1900到现在的时间差
				console.log(date.getYear());
				//  9    0-11  获得月份
				console.log(date.getMonth());
				//  星期几   3
				console.log(date.getDay());
				//  31   获得本月中的第几天
				console.log(date.getDate());	
				console.log(date.getHours());	
				console.log(date.getMinutes());
				console.log(date.getSeconds());
				//获得全年  2018
				console.log(date.getFullYear());
				//获得本地的时间
				console.log(date.toLocaleString());	
			}
			
			/********[2]数学对象的学习*******************/
			function  demo2(){
				//获得随机数  0-1
				var  ran =Math.random();
				//四位随机的整数
				console.log(Math.floor(ran*9000+1000) );
				//向上取整
				console.log(Math.ceil(12.9));
				//四舍五入
				console.log(Math.round(12.6));
			}
			


			/*******[3]字符串对象的学习**********************/
			
			function  demo3(){
				
				var  st ="星-期-三";		
				var  st2=new String("星期三");
				//期-三   从下标为2的开始截取到最后结束
				console.log(st.substr(2));
				//期-三  2:从下标为2的开始  3：截取的个数 
				console.log(st.substr(2,3));
				//期-三 从下标为2的开始截取
				console.log(st.substring(2));
				//2:开始下标   3 ：结束下标（不包含）
				console.log(st.substring(2,3));
				//字符串的分割   返回的是数组
				console.log(st.split("-"));
			}
			
			/****[4]Global对象的学习****************************/
			function  demo4(){	
				var  a ="var b =123";
				
				//*把字符串转换成可以执行的js代码
				eval(a);
                console.log(b);
                var  hh ="123a";
				//console.log(Number(hh));// NAN
                //检查某个值是否是数字。
				console.log(isNaN(hh));
			}
			
			demo4();
		</script>
	</head>
	<body>
	</body>
</html>

二、 JavaScript中event事件

1.什么是事件

事件是可以被 JavaScript 侦测到的行为
事件也是满足某些条件就可以触发指定的函数
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以      在用户点击某按钮时产生一个 onClick 事件来触发某个函数
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
<body onload="getTime()">
<input  type="button" value="提交"   onclick="calc()"/>
<input  type="button" value="暂停" onclick="pauseTime()"/>
 <input  type="button" value="继续" onclick="continueTime()"/>
生活案例：
电动车、汽车报警器
燃气泄漏探测器、火灾烟雾探测器

2.有哪些事件

在这里插入图片描述

3.总结事件的一般使用情况:

onclick、ondblclick、按钮使用 （按钮是绝对不会结合onchange、onblur事件） onchange、onkeydown、onkeyup onblur、onfocus、结合单行文本框和多行文本框
onchange:下拉框,文本框等元素
onload：作用到body 标签上
onmouseover、onmouseout、onmousemove：某些块元素上结合使用

三、JavaScript中BOM对象

1.什么是BOM

BOM是Browser Object Model的简写，即浏览器对象模型。 
BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。 
BOM的顶层是window对象

2.BOM对象学习A

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			/*三种弹框方式*/
			function  demo1(){
				//只是含有确认按钮的弹框
				window.alert("七夕快乐");		
			}
			function  demo2(){		
				//含有确认和取消按钮的弹框
				var flag= window.confirm("是否删除？");		
				alert(flag);
			}
		    function  demo3(){
		    	//含有输入内容的弹框
		    	var   v= window.prompt("请输入昵称","例如：李白"); 	
		    	alert(v);
		    }
			function  getDate(){
				//获得时间对象
				var date=new Date();
				
				var time= date.toLocaleString();	
				//获得span对象
				document.getElementById("span_1").innerHTML=time;
			}
		  
		   //定时器  1000毫秒
		   // 过指定的时间调用方法---只会执行一次
//		   window.setTimeout("getDate()",1000);
		   //间隔1s就会调用指定的方法---调用多次  
		  var  iny=  window.setInterval("getDate()",1000); 
		   function  stop1(){
		   	//清除指定的定时器
		   	window.clearInterval(iny);	
		   } 
		   function  close1(){
		   	 //关闭当前的窗口
//		   	 window.close();
		   	 //打开指定的页面
		   	 window.open("http://www.baidu.com");	
		   }
		</script>
		
	</head>
	<body onload="getDate()">
		
<input type="button" name="" id="" value="关闭窗口" onclick="close1()" />

当前的时间是：<span id="span_1"></span>
<input type="button" name="" id="" value="停止计时" onclick="stop1()" />

<input type="button" name="" id="" value="弹框一" onclick="demo1()" />
		
<input type="button" name="" id="" value="弹框二" onclick="demo2()" />
		
<input type="button" name="" id="" value="弹框三" onclick="demo3()" />
		
</body>
</html>

3.BOM对象学习B

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			/************Location*****************/
			function  demo1(){
				
				//获得Location对象
				//http://127.0.0.1:8020/2018-08-17JavaScript/03JS学习.html
				console.log(window.location.href);
				//127.0.0.1:8020  ip+端口号
				console.log(window.location.host);
				//8020
				console.log(window.location.port);
				//127.0.0.1
				console.log(window.location.hostname);
				
				//修改当前的地址********
				window.location.href="http://www.baidu.com";
				 //重新加载网页
				 window.location.reload();
				
			}
			/********History对象学习*******************/
			function  demo2(){
				//返回浏览器历史列表中的 URL 数量。
				var  le=window.history.length;
				
				console.log(le);
                 //后退按钮
               window.history.back();
                 //前进的按钮
              window.history.forward();
                 //-3:后退3个网页   3：前进3个网页   0：刷新
                 window.history.go(-3); 
			}
			/***********Screen 对象学习(了解)**********************/
			function  demo3(){
				
				var  he =window.screen.height;
				
				var wi=window.screen.width;
				//获得屏幕的分辨率
				console.log(he+"----"+wi);	
			}
			/*************Navigator 对象的学习(了解)******************/
			function  demo4(){
				//用户代理
				var us= window.navigator.userAgent;
				//Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
				console.log(us);
				
			}
		</script>
		
	</head>
	<body>
	
	<input type="button" name="" id="" value="Location对象的学习" onclick="demo1()" />
	<input type="button" name="" id="" value="History对象的学习" onclick="demo2()" />
	<input type="button" name="" id="" value="Screen对象的学习" onclick="demo3()" />
	<input type="button" name="" id="" value="Navigator对象的学习" onclick="demo4()" />
	</body>
</html>

四、JavaScript中DOM对象

1.什么是DOM

DOM是Document Object Model的简写，即文档对象模型。 
DOM用于XHTML、XML文档的应用程序接口(API)。 
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。 
DOM由系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。 
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。 
DOM的顶层是document对象

2.DOM操作的内容

A、获得元素节点对象
B、操作元素的属性
C、操作元素的内容
D、操作元素的样式css
E、操作元素的节点对象

3.DOM直接获得元素对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>	
		<script type="text/javascript">	
			function  demo1(){
				
				//*通过ID名称获得节点元素对象----单个对象
				var span =window.document.getElementById("span_1");
				alert(span);	
			}
		  function  demo2(){
		  	  
		  	   //*通过标签的名称获得元素对象----多个对象
		  	   var spans=window.document.getElementsByTagName("span");
		  	   //获得具体的某一个
		  	   alert(spans[1]);
		  }
			
		 function  demo3(){ 	
		 	 //*通过class的名称获得元素对象----多个对象
		 	  var  spans=document.getElementsByClassName("sp");
		 	  
		 	  //不是所有的标签都是具有name属性的 所以这种获得方式不是太多
		 	  //通过name属性获得元素对象----多个对象
		 	  var inp=document.getElementsByName("inp");
		 	  
		 	  alert(spans);	
		 }
		</script>
	</head>
	<body>
		
<input type="button" name="inp" id="" value="ID获得元素对象" onclick="demo1()" />		
<input type="button" name="inp" id="" value="TagName获得元素对象" onclick="demo2()" />		
<input type="button" name="" id="" value="Class获得元素对象" onclick="demo3()" />
<hr/>
        <span id="span_1">bjsxt</span>
		
		<span>12345</span>
		
		<span class="sp" >12345</span>
		
		<span class="sp">12345</span>		
	</body>
</html>

3 DOM间接获得元素对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM间接获得元素对象的方式</title>
		
		<script type="text/javascript">
			
         function  demo1(){		
				//获得div对象
				
				var div=document.getElementById("div1");
				//获得div下面的所有子元素--text文本也是一个节点
				var ch= div.childNodes;		
				//alert(ch.length);
				//document.getElementsByTagName("span")
				
				//获得div下面的所有的span对象
				var sp= div.getElementsByTagName("span");			
				console.log(sp);
			}	
			function  demo2(){
				//获得span对象
				var  span=document.getElementById("sp1");
				//获得父节点
				var pa= span.parentNode;		
				//console.log(pa);		
				alert(pa);
			}	
			function  demo3(){		
				//获得span对象
				var sp= document.getElementById("sp1");		
				//获得span对象的上一个元素 
				//#text
				var  pr= sp.previousSibling;
				// 上一个span对象
				var pr2=sp.previousElementSibling;
				//获得下一个元素
				// #text
				var ne= sp.nextSibling;
				//下一个span元素对象
				var ne2=sp.nextElementSibling;	
				console.log(pr2);	
			}
			
		</script>
	</head>
	<body>
		
<input type="button" name="" id="" value="获得子元素" onclick="demo1()" />
<input type="button" name="" id="" value="获得父元素" onclick="demo2()" />
<input type="button" name="" id="" value="获得兄弟元素" onclick="demo3()" />
<hr />
<div id="div1">
			
			<span>bjsxt</span>		
			<span id="sp1">bjsxt</span>	
			<span>123456</span>	
			<span>123456</span>	
		</div>		
		<span>123456</span>		
	</body>
</html>
拉比小熊
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
大数据学习进阶实战大纲，学习路径
12-23
以下是一个详细的学习进阶实战大纲，旨在帮助你从初级到高级逐步提升技能，避免在不重要的知识点上浪费时间。 第一阶段，你将深入学习Java SE核心知识。这部分涵盖Java编程的基础，如变量、数据类型、数组、运算符...
JavaScript学习大纲
2302_79340128的博客
01-30 342
以上是一个基本的学习大纲，我们可以根据自己的实际情况和学习进度进行调整和扩展。另外，建议在学习过程中结合实际项目进行练习，这样可以更好地掌握JavaScript的应用和开发技巧。
js总结大纲
CSDN_ure001的博客
10-08 236
自从我们学习了js进行页面交互，才发现页面的多种动态效果。 从一开始的加减乘除运算到后来的if else判断，for循环等等，都极高的提高了对js这门语言兴趣与爱好相信大家也如同我一样，那就让我们一起来回顾我们热爱和神奇的js吧！ 1运算符和if判断 运算符包含（+ - * / %）就如同我们之前数学学的一样，不过js运算期间可以进行隐式转换。 但是有一些不能转化成功我们可以通过parseInt（）或者parseFloat（）进行转换 if判断与三元运算符是我们js常用的判断句式 i...
js大纲（流程控制语句对象，函数，数组等）
weixin_46724415的博客
03-09 2148
js流程控制语句
JS大纲简介
weixin_45678402的博客
08-16 167
JS大纲简介
web前端开发大纲.doc
06-25
总之，这个Web前端开发大纲涵盖了从基础到进阶的全面学习路径，旨在培养学生的实际开发能力和创新思维，使他们能适应不断发展的Web技术环境。通过系统学习，学生不仅能理解和运用各种前端技术，还能具备解决实际问题...
javascript-basic
03-05
JavaScript是一种广泛应用于网络开发的脚本语言，由Netscape公司的...通过"javascript-basic"这个资源，初学者可以逐步建立起JavaScript的基础知识体系，进阶者则可以通过它来巩固和复习基础知识，提升自己的编程能力。
JS-Course-Udemy:完整JavaScript课程2021
03-19
**JavaScript进阶技术** 随着对基础的深入理解，课程会进一步讲解JavaScript的高级特性，如异步编程（回调函数、Promise和async/await）、模块化（CommonJS和ES6模块）、类和原型继承，以及错误处理和调试技巧。...
01-exercises:这些是教学大纲中的练习
04-04
本压缩包"01-exercises"包含了教学大纲中的练习，旨在帮助学习者掌握JavaScript的基础知识和技能。 在"01练习"中，我们可以预期涵盖以下JavaScript的核心概念： 1. **变量与数据类型**：在JavaScript中，变量用于...
javaScript深入大纲
08-03
javaScript深度讲解，javaScript深入大纲，系统学习，熟练使用javaScript原理
javascript学习大纲
09-22
学习js 的好教程 入门级学习 有实例
JavaScript基础复习大纲
09-10
JavaScript基础复习大纲DAY1,很好，很强大，还有下半部分
JavaScript教学大纲
05-06
Javascript脚本程序设计 及实验安排 教学大纲 包括课程的内容和要求 非常详细
JavaScript知识大纲（基础篇）
super_Fake的博客
06-15 1103
一、JavaScript的引入方式 … 1.内部引用：文件内定义< script >标签，内写js代码。 2.外部引用：文件内定义< script >标签，通过引入js文件形式调用。 <!--src:引入的路径 type：引入否认类型 charset：引入文件的编码 --> <script src="js/test.js" type="text/javascript" charset="utf-8"></script> 二、javaScript
javascript基础学习大纲梳理
前端云松导师
11-04 554
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
Javascript基础知识大纲导图
清平乐的技术专栏
07-21 809
使用JavaScript控制行为 JavaScript基本语法 语句和注释 变量和数据类型 声明和赋值 简单数据类型和复杂数据类型 变量的命名规则 表达式和运算符 赋值运算符 算术运算符 比较运算符 逻辑运算符 分支结构 if…else... switch…case…default... 循环结构 for循环 while循环 d...
JavaScript的50个「进阶」知识点
最新发布
广漂程序猿DevinRock
03-14 697
在 Javascript 中，作用域分为全局作用域和函数作用域全局作用域：代码在程序任何地方都能访问，window对象的内置属性都属于全局作用域函数作用域：在固定的代码片段才能被访问image.png作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的。如上，fn作用域下创建了bar函数，那么“fn作用域”就是“bar作用域”的上级。作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值。
Javascript学习大纲
whqet
09-21 4217
今天闲逛某JS前端培训网站，发现推出了最新的Javascript学习dagang

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值