JavaScript学习7

最新推荐文章于 2024-06-19 15:01:00 发布

aneyal

最新推荐文章于 2024-06-19 15:01:00 发布

阅读量1.7k

点赞数 1

分类专栏：前端学习文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/aneyal/article/details/123772788

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

简单数据类型和复杂数据类型

简单数据类型又叫基本数据类型或者值类型（string，number，boolean，undefined，null），存储时变量中存储的是值本身

复杂数据类型又叫引用类型，存储式变量中存储的仅仅是值的地址通过new关键字创建的对象都是复杂数据类型

简单数据类型传参时传的是值，所以如果将简单数据类型的变量传递给函数，函数不会改变该变量

简单数据类型传参时传的是址，所以如果将复杂数据类型的变量传递给函数，函数会改变该变量

堆栈

复杂数据类型首先在栈里面存放一个地址，该地址指向堆里面的数据

WebAPIs

WebAPIs是JS独有的部分，主要学习DOM和BOM，主要学习页面交互功能

WebAPI是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM），主要针对于浏览器做交互效果。

API是应用程序接口，帮助我们实现某种功能。

WebAPI一般有输入和输出（函数的传参和返回值），很多都是方法（函数）

DOM

DOM是文档对象模型，是W3C组织推荐的处理可拓展标记语言（HTML或XML）的标准编程接口

通过DOM接口可以改变网页的内容、结构和样式

DOM树：

获取元素

DOM要操作元素，首先要获取元素

根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

参数是大小写敏感的字符串，返回的是元素对象

	<body>
		<dir id='time'>2022-03-03</dir>
		<script>
			// 因为文档页面从上往下加载，所以要先有标签，script写在标签下面
			var timer=document.getElementById('time');
			// 打印返回的元素对象，更好地查看里面的属性和方法
			console.dir(timer);
		</script>
	</body>

根据标签名

通过getElementByTagName()方法可以返回带有特定标签名的对象的集合。返回的是获取的对象的集合，以伪数组的形式存储。所以如果想要操作里面的元素就需要遍历。

如果特定标签名对应的对象只有一个，返回的仍是伪数组形式

如果特定标签名没有对应的对象，返回空的伪数组

并且得到的对象是动态的

还可以获取某个元素（父元素）内部所有指定标签名的子元素

注意，父元素必须是单个对象（必须指明是哪一个元素对象），获取时不包括父元素自己

//获取整个页面内所有指定标签名的子元素
document.getElementsByTagName('标签名')
//获取某个元素（父元素）（Id为a）内部所有指定标签名(li)的子元素
var test=document.getElementsById('a');
var ans=test.getElementsById('li')

HTML5新增的获取元素的方法

//根据类名获取某些元素
document.getElementsByClassName('类名');
//根据指定选择器返回第一个元素对象
document.querySelector('选择器');
/根据指定选择器返回所有元素对象,返回一个伪数组
document.querySelectorAll('选择器');

对于querySelector，里面的选择器需要加符号：.类选择器 #ID选择器标签选择器不加符号

获取特殊元素

body元素

可以通过document.body获取body对象

html元素

可以通过document.documentElement获取body对象

事件

事件指可以被JS检测到的行为

简单理解就是：触发---响应机制

事件组成

事件由三部分组成：事件源、事件类型、事件处理程序

事件源指的是事件被触发的对象

事件类型指的是如何触发事件

事件处理程序是事件触发之后要做的事，通过函数赋值的方式完成

执行事件过程

	<body>
		<button id="t">点我</button>
		<!-- 点击按钮，弹出弹框 -->
		<script>
            //获取事件源
			var bu=document.getElementById('t');
            //t.onclick是绑定事件
            //通过函数赋值的形式添加事件处理机制
			t.onclick=function(){
				alert('弹出弹框');
			}
		</script>
	</body>

常见鼠标事件

操作元素

可以利用DOM操作元素来改变元素的内容和属性

修改元素属性

改变元素的内容

	<body>
		<div>修改前</div>
		<script>
			// 选择元素
			var test=document.querySelector('div');
			// 修改内容
			test.innerText='修改后';
		</script>
	</body>

innerText和innerHYML的区别：

innerText不识别HTML标签，并且直接显示出来

innerHYML识别HTML标签（W3C推荐）。

innerText和innerHYML也可以获取元素里面的内容。获取时innerText不保留元素内容里面的换行和空格，并且去除HTML标签，innerHYML保留元素内容里面的换行和空格和HTML标签

常用元素属性操作

实例：根据当前时间的不同显示问候语和图片

	<body>
		<div>问候语</div>
		<img src="img/i1.jpg" />
		<script>
			// 获取时间
			var n_date=new Date();
			var hour=n_date.getHours();
			console.log(hour);
			// 获取元素对象
			var d=document.querySelector('div');
			var i=document.querySelector('img');
			// 根据时间，替换图片和问候语
			// 上午
			if(hour>6&&hour<12){
				d.innerHTML='上午好';
				i.src='img/i2.jpg';
			}else if(hour>12&&hour<19){ //下午
				d.innerHTML='下午好';
				i.src='img/t2.jpg';
			}else{ //晚上
				d.innerHTML='晚上好';
				i.src='img/i1.jpg';
			}
		</script>
	</body>

修改表单属性

DOM可以操作这些表单属性：type、value、checked、selected、disabled

disabled属性表示当前表单是否被禁用，是否不能再点击

value属性表示表单里面的值

修改样式属性

可以通过JS修改元素的大小、颜色、位置等样式

通过style属性修改

样式修改较少或功能简单时，可以通过style属性修改，例如要修改宽度，可以通过元素对象名.style.width修改，这样修改属于行内样式，权重较高

通过类名修改

样式修改较多或功能复杂时，可以先在<style>中声明一个类，这个类里面是修改之后的样式，然后在需要修改样式时，设置元素的类名为之前声明的类，即：元素名.className='修改之后的类名'

注意，className会覆盖原来的类名。

如果想要保留原来的类名，则：元素名.className='原来的类名修改之后的类名'

实例：输入栏隐藏内容

点击输入栏之后输入栏中原本的默认文字消失（如果里面文字是用户输入的文字则不消失），点击输入栏之外的地方，如果输入栏内容为空，显示默认文字

	<body>
		<div>
			<input type="text" class="ipt" value="请输入内容"/>
			<button class="btn">确定</button>
		</div>
		<script>
			var ipt=document.querySelector('.ipt');
			ipt.onfocus=function(){
				if(ipt.value=='请输入内容'){
					ipt.value='';
				}
			}
			ipt.onblur=function(){
				if(ipt.value==''){
					ipt.value='请输入内容';
				}
			}
		</script>
	</body>

实例：可关闭广告

点击关闭图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 107px;
				height: 110px;
				border: 1px solid lightgray;
				margin: 200px auto;
				position: relative;
			}
			.i2{
				width: 20px;
				height: 20px;
				position: absolute;
				top: 0;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/i1.jpg" class="i1"/>
			<img src="img/i2.jpg" class="i2"/>
		</div>
		<script>
			var i2=document.querySelector('.i2');
			var d=document.querySelector('div');
			i2.onclick=function(){
				d.style.display='none';
				console.log('no');
			}
		</script>
	</body>
</html>

实例：下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.mainc{
				position: relative;
				width: 60px;
				height: 30px;
				overflow: hidden;
			}
			.first, .last{
				width: 58px;
				height: 29px;
				text-align: center;
				line-height: 30px;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="mainc">
			<div class="first">下拉</div>
			<div class='last'>下拉</div>
			<div class='last'>下拉</div>
			<div class='last'>下拉</div>
			<div class='last'>下拉</div>
			<div class='last'>下拉</div>
		</div>
		<script>
			var fir=document.querySelector('.mainc');
			var las=document.querySelector('.last');
			fir.onmouseover=function(){
				fir.style.overflow='visible';
			}
			fir.onmouseout=function(){
				fir.style.overflow='hidden';
			}
			
		</script>
	</body>
</html>