简单数据类型和复杂数据类型
简单数据类型又叫基本数据类型或者值类型(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>