JSday6
文章目录
JavaScript简单数据类型、复杂数据类型总结
简单数据类型与复杂数据类型
简单数据类型值类型:
在存储变量中存存储的值是本身，因此又叫值类型。
string,number,boolean,undefined,null
null返回的是object空对象(若有一变量准备存储为对象，但未想好存储内容，可以暂时给null)
复杂数据类型引用类型:
在存储变量中存储的仅仅是地址(引用)，因此也叫做引用数据类型
通过new关键字创建的对象(系统对象，自定义对象)如Object，Array,Date等
堆和栈
堆栈空间分配:
- 栈:由操作系统自动分配是否存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈中
- 堆:存储复杂类型(对象)，一般由程序员分配释放，若不释放由垃圾回收机制回收。复杂数据类型存放到堆中
- 注:JavaScript中没有堆栈的概念，只是方便理解。
简单类型的内存分配
存放于栈中，里面开辟一个空间存放的是值
复杂类型的内存分配
首先在栈中存放地址，用十六进制表示。然后该地址指向堆中的数据。
简单类型传参
函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量。
复杂类型传参
当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参保存的是同一地址，故操作的是同一对象。
function Person(name)
{
this.name = name;
}
function f1(x)
{
console.log(x.name); // 输出李四
x.name = '张三';
console.log(x.name); // 输出张三
}
var p = new Person('李四');
console.log(p.name); // 输出李四
f1(p);
console.log(p.name); // 输出张三
Web API
Web APIs 和 JS基础关联性
- JS的组成
JavaScript(ECMAScript(JavaScript语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型))
API 和 Web API
- ==API(应用程序编程接口)==是一些预先定义的函数，目的是提高应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
- Web API : Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
DOM
文档对象模型，是WSC组织推荐的可处理可扩展标记语言(HTML或者XML)的标准编程接口。
DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中的所有标签都是元素，DOM中使用element表示
- 节点：网页中的所有内容都是节点(标签，属性，文本，注释等)，DOM中使用node表示
- DOM把以上内容都看作是对象
获取元素
- 根据ID获取
-
使用==getElementById()==方法可以获取带有ID的元素对象。其中参数是大小写敏感的字符串(需加引号)。
-
通过console.dir 可以打印我们返回的元素对象，更好的查阅里面的属性和方法。
- 根据标签名获取
-
使用getElementsByTagName()方法可以返回带有指定标签名的对象集合
-
返回的是 获取过来元素对象的集合 以伪数组的形式存储的
-
如果页面中只有一个标签 返回的还是伪数组的形式
-
还可以获取某个元素(父元素)内部所有指定标签名的子元素
element.getElementsByTagName('标签名');
// 父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己。
- 通过HTML5新增方法获取
- 根据类名返回元素对象集合
document.getElementsByClassName('类名');
<div class = 'box'>盒子</div>
<div class = 'box'>盒子</div>
<script>
var boxs = document.getElementsByClassName('box');
console.log(boxs);
</script>
- 根据指定选择器返回第一个元素对象 里面的选择器需要加符号(.(类) #(ID))
document.querySelector('选择器');
- 根据指定选择器返回所有元素集合
document.querySelectorAll('选择器');
- 特殊元素获取
获取body元素
document.body;
获取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);
事件基础
触发—相应机制
事件三要素:事件源，事件类型，事件处理程序
事件源 ：事件被触发的对象
事件类型 ：如何触发 什么事件 如鼠标点击、经过、移开
事件处理程序 ：通过函数赋值的方式完成
<button id = 'btn'>弹出按钮</button>
var btn = document.getElementById('btn');
btn.onclick = function()
{
alert('点击');
}
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
操作元素
DOM操作可以改变网页内容、结构和样式、我们可以利用DOM操作元素来改变元素里面的内容、属性等。
改变元素内容
- 从起始位置到终止位置的内容，但它去除html标签，同时空格换行也会去掉
element.innerText
- 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
element.innerHTML
innerText和innerHTML的区别
- innerText 不识别html标签、会去除空格和换行
- innerHTML识别html标签、 保留空格和换行
案例1：分时显示不同图片，显示不同问候语
分析:
- 根据系统不同时间来判断，所以需要用到日期内置对象
- 利用多分支语句来设置不同的图片
- 需要图片，根据时间修改图片，用到操作元素src属性
- div显示不同问候语，修改其内容
<img src = "images/1.jpg" alt="">
<div>上午好</div>
<script>
var img = document.querySelector('img');
var div = document.querySelector('div');
var date = new Date();
var h = date.getHours();
if(h<12){
img.src = "images/1.jpg";
div.innerHTML = "上午好，好好学JS";
}else if(h<18){
img.src = "images/2.jpg";
div.innerHTML = "下午好，好好学JS";
}else{
img.src = "images/3.jpg";
div.innerHTML = "晚上好，好好学JS";
}
</script>
案例2：显示查看密码明文
分析:
-
点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
-
一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
-
利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
position: relative;
width: 400px;
border-bottom: 1px solid aqua;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0px;
outline: none;
}
.box img{
position: absolute;
right: 2px;
top: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label>
<img src="images/pic2.jpg"id="eye"/>
</label>
<input type="password" name="" id="pwd"/>
</div>
<script>
//1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
//2.注册时间 处理程序
var flag = 0;
eye.onclick = function(){
if(flag == 0){
pwd.type = "text";
flag = 1;
}else{
pwd.type = "password";
flag = 0;
}
}
</script>
</body>
通过JS修改元素的大小、颜色、位置样式
- element.style //行内样式操作
适用于样式较少或者功能简单的情况
- element.className //类名样式操作
修改当前元素的类名，适合样式较多或者功能复杂的情况，会覆盖原先的类
如果想要保留原先的类名（多类名选择器）
// 其中first和change都是写好的css样式
<div class = 'first'>
文本
</div>
<script>
var test = document.querySelector('div');
test.onclick = function(){
this.className = 'first change'
}
</script>
案例3：关闭二维码
分析
- 利用样式的显示和隐藏完成，display:none隐藏元素display:block显示元素
- 点击按钮，隐藏二维码
案例4：密码框格式提示错误信息
用户输入个数不是6-16，则提示错误信息
- 判断的事件是表单失去焦点onblur
- 若输入正确则信息颜色为绿色
- 若不是6-16位，则提示错误信息为红色
- 由于里面变化样式较多，我们采取className修改样式
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 600px;
margin: 100px auto;
}
.message{
display: inline-block;
font-size: 12px;
color: cornflowerblue;
padding-left: 20px;
}
.wrong{
color: red;
}
.right{
color: aquamarine;
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt"/>
<p class="message">请输入6-16位数字</p>
</div>
<script>
//获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//注册事件
ipt.onblur = function(){
// 根据表单中元素的值的长度 ipt.value.length
if(this.value.length<6 || this.value.length>16){
message.className = 'message wrong';
message.innerHTML = '请输入有效长度6-16'
}else{
message.className = 'message right';
message.innerHTML = '核验通过'
}
}
</script>
</body>
操作元素总结
操作元素是DOM核心内容
-
操作元素内容(innerText/innerHTML)
-
常见元素属性(src/href/title/alt)
-
操作表单元素属性(type/value/disabled等)
-
操作元素样式属性(element.style/className)
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
