#JS对象
一个具体的事物
有属性和方法组成，<br>
**创建对象的方式**<br>
1. 函数字面量<br>
2. new Object创建对象<br>
3. 构造函数：就是把对象里面相同的属性和方法抽象出来封装到函数里面<br>
构造函数名字首字母大写
不需要return就可以返回对象<br>
调用构造函数必须使用new<br>
var zxs = new Star('','','')<br>
> function Zero(name,age,gj) {
this.name = name;
this.age = age;
this.gj = gj;
}
var lianpo = new Zero('廉颇',20,'法术');
var xiangxu = new Zero('项羽',23,'攻击');
console.log(lianpo,xiangxu);
**简易计算器** <br>
//
function input(operation) {
var num1 = parseInt(prompt('请输入第一个数值：'))
var num2 = parseInt(prompt('请输入第二个数值：'))
if (operation == '+') {
return num1 + num2
} else if (operation == '-') {
return num1 - num2
} else if (operation == '*') {
return num1 * num2;
} else {
return num1 / num2
}
}
do {
var num = parseInt(prompt('欢迎使用计算器:\n1.加法运算;\n2.减法运算;\n3.乘法运算;\n4.除法运算;\n5.退出;\n请输入您的选项:'));
switch (num) {
case 1:
alert(input('+'))
break
case 2:
alert(input('-'))
break
case 3:
alert(input('*'))
break
case 4:
alert(input('/'))
break
}
} while (num != 5)
alert('正在退出。。。')//利用do-while实现实现简易计算器的首页可循环出现，不退出就一直进行计算
#JS对象分为三种
1. ##自定义对象
1. ##内置对象
1. ##浏览器对象
MDN（推荐）、 W3Shool
####查阅文档 <br>
##Math()
function getRandom(min,max) {
return Math.floor(Math.random() * (max - min +1)) + min;
}
var random = getRandom(1, 10);
返回随机范围内整数
##Date()
###Date() 日期对象，是一个构造函数，必须使用new 来调用创建我们的日期对象
var arr = new Date();
####如果没有参数，返回当前系统时间
##倒计时
//倒计时
function countDown(time) {
var nowTime = +new Date(); //时间戳
var inputTime = +new Date(time);
var times = (inputTime - nowTime) / 1000;
var d = parseInt(times / 60 / 60 /24); //天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 69 / 60 % 60); //时
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60); //分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60) //秒
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-5-1 18:00:00'));
var date = new Date();
console.log(date);
##Array()
var arr1 = new Array(2); //这个2 表示数组的长度为2 ，里面有2 个空的数组元素
var arr1 = new Array(2,3); //这个2 ，3 表示里面有两个为2，3的元素
####instanceof 用来检测是否为数组
1 . console.log(arr instanceof Array); //返回为true
2 . console.log(Array.isArray(obj)); //返回为false H5新方法 IE9以上版本支持
####添加数组元素
1 . var arr = [2,3,4];
console.log(arr.push(4,'pink')); //返回新数组的长度
console.log(arr); //返回数组元素
//push是可以给数组追加新的元素
//push(参数1,参数2,...) 参数直接写数组元素就可以了
//push完成之后，返回的结果是新数组的长度
//原数组也会发生变化
2 . arr.unshift('red',3); //在数组前面参加元素，与push 用法相同
####删除数组元素
1 . console.log(arr.pop()); //返回被删除的数组 一次只能删除一个元素
2 . arr.shift(); //删除数组元素的第一个元素
//pop() 和 shift() 都没有参数，一次只能删除一个元素，pop()从数组最后删除，shift()从第一个删除，
####筛选数组
var arr = [2344,232,24324,23];
var newArr = [];
for ( var i = 0; i < arr.length; i++) {
if(arr[i] < 2000){
newArr.push(arr[i]); //筛选数组内小于2000的元素
}
}
console.log(newArr);
####翻转数组
var arr = ['pink','red','yellow'];
arr.reverse();
####冒泡排序
var arr1 = [2,3,4,5,2];
arr1.sort(); //只能拍单位数，，
var arr1 = [2,3,4,5,2]; //双数冒泡
arr1.sort(function(a,b){
return a - b; //升序排序
return b - a; //降序排序
});
####返回数组索引号
var arr1 = [2,3,4,5,2];
console.log(arr1.indexOf(3)); //返回数组元素的索引号，只返回第一个满足条件的数组
//如果没有满足条件的返回 -1
console.log(arr1.lastIndexOf(3)); //从后面查找 返回最后一个满足条件，找不到返回 -1
**案例：数组去重**
// 遍历就数组，然后拿着就数组的元素去查询新数组，
// 如果该元素在新数组里面没有出翔过，就添加，否则不添加
function unique(arr) {
var newArr = [];
for(var i = 0; i < arr.length ; i++) {
if(newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(['c','v','c','f','g','r','f'])
console.log(demo); //打印(5) ['c', 'v', 'f', 'g', 'r']
#### 数组转化为字符串、
######1. toString() 把数组转换为字符串，都好分隔每一项
######2. join('分隔符') 方法用于数组中所有元素转换为一个字符串
var arr = [1,4,3];
console.log(arr.toString()); //1,4,3
console.log(arr.join('-')); //1-4-3
####数组对象
//concat() 连接两个或多个数组，不影响原数组
//slice() 数组截取 slice(begin,end)
//splice() 数组删除 splice[第几个开始，要删除几个]
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
##字符串
####基本包装类型：
#####把简单数据类型包装成复杂数据类型（加了new的）
var str = 'andy';
//对象才有属性和方法，简单数据类型str 为什么会有length属性呢
//1 把简单数据类型包装成复杂数据类型
var temp = new String('andy');
//2 把临时变量的值 给 str
str = temp;
//3 销毁这个临时变量
temp = null;
####字符串不可变
#####所以不要大量拼接字符串，内存不释放，新拼接的字符串会新开辟空间
######根据字符返回位置
//字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成后会返回一个新的字符串
- indexOf('要查找的字符',开始的位置) 返回指定内容在原字符中的位置，如果找不到就返回-1 ，开始的位置是index索引号，
- lastIndexOf() 从后往前，执照第一个匹配的元素
**案例：返回字符串的位置和数量**
//查找字符串"abejbaahjdjsafjdsbcabmfew"中所有的 a 出现的位置及次数
//核心算法: 先查找第一个 a 出现的位置
//然后 只要indexOf 返回的结果不是 -1 就继续查找
//因为indexOf 只能查找到第一个满足条件的元素，所以后面的查找，一定是当前索引 +1 ，从而继续查找
var str = "abejbaahjdjsafjdsbcabmfew";
var index = str.indexOf('a');
while(index !== -1) {
console.log(index);
num++;
index = str.indexOf('a');
console.log('a 出现的次数：' + num);
####根据位置返回字符（重点）
- charAt(index) 返回指定位置的字符（index字符串的索引号）
- charCodeAt(index) 获取指定位置字符的ASCII码，***可以用来判断用户输入了什么***
- str[index] 获取指定位置的字符 **H5新增，IE8支持**
####统计出现次数最多的字符
var str = "abejbaahjdjsafjdsbcabmfew";
var o = {};
for(var i = 0;i < str.length ;i++){
var chars = str.charAt(i);
if(o[chars]) { //o[chars]得到的是属性值
o[chars]++;
}else {
o[chars] = 1;
}
}
console.log(o);
//遍历对象
var max = 0;
var ch = '';
for (var k in o){ //k 得到的是属性名 ， o 得到的是属性值
if( o[k] > max){
max = o[k];
ch = k;
}
}
console.log('最大次数为' + max + '最多的字符为' + ch);
####替换字符串
var str = "abejbaahjdjsafjdsbcabmfew";
console.log(str.replace('a','b')); //把第一个a 替换为b
var str1 = "abejbaahjdjsafjdsbcabmfew";
while(str1.indexOf('a') !== -1){
str1 = str1.replace('a','b'); //把所有的a 替换为b
}
console.log(str1);
####字符串转换为数组
var str1 = 'red,pink,blue'; //以逗号隔开使用split(',')
console.log(str1.split(',')); //打印(3) ['red', 'pink', 'blue']
####字符串转换大小写
console.log(str1.toUpperCase()); //转换为大写
console.log(str1.toLowerCase()); //转换为小写
##JS总结
null返回类型为Object，空对象，
<br>如果有个变量我们以后打算存储为对象，但是还没想好存啥，可以将其设为null
<br> **简单数据类型**：放到栈里面，里面直接开辟一个空间，存放的是值<br>
**复杂数据类型**：首先在栈里面存放地址，这个地址指向堆里面的数据，真正的数据全放在堆里面
<br>
function Person(name) {
this.name = name;
}
function f1(x) { //p的地址给了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); //打印张学友
#####案例：根据时间更换图片
<img src="./images/icon_error.png" 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/logo.png';
div.innerHTML = '上午好';
}else if(h <18) {
img.src= './images/icons.png';
div.innerHTML = '下u我好';
}else {
img.src = './images/recom.png';
div.innerHTML = '晚上好';
}
</script>
改变表单内容
利用DOM可以操作如下表单属性
**type,value,checked,selected,disabled**
<button>按钮</button>
<input type="text" value="孩子">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
input.value = '你好';
}
</script>
**案例：按钮多次点击不同效果**
###### 利用flog
<input type="password">
<img src="./images/logo.png" alt="">
<script>
var input = document.querySelector('input');
var img = document.querySelector('img');
var flog = 0;
img.onclick = function() {
if(flog == 0) {
input.type = 'text';
flog = 1;
}else {
input.type = 'password';
flog = 0;
}
}
##### JS行内样式权重高，会替换原来的
##### 案例：点击关闭广告
<div></div>
<img src="./images/icons.png" alt="">
<script>
var div = document.querySelector('div');
var img = document.querySelector('img');
img.onclick = function() {
div.style.display = 'none';
}
</script>
##### 表单获得/失去焦点
######获得焦点 onfocus ，失去焦点 onblur
##### 通过className更改元素的样式，适合样式较多或者功能复杂的情况
###### 会覆盖原先的 ，解决多类名选择器，this.className = 'nav change'
<style>
.change {
color: aqua;
font-size: 24px;
}
</style>
<div>文本</div>
<script>
var text = document.querySelector('div');
text.onclick = function() {
this.className = 'change';
}
</script>
#### 案例：全选按钮
<div>
<table>
<tr>
<th><input type="checkbox" id="j_cbAll"></th>
<th>商品</th>
</tr>
<tbody id="j_tb">
<tr>
<td><input type="checkbox"></td>
<td>京东</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>京东</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>京东</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>京东</td>
</tr>
</tbody>
</table>
</div>
<script>
var table = document.getElementById('j_cbAll');
var j_tb = document.getElementById('j_tb').getElementsByTagName('input');
table.onclick = function () {
for (var i = 0; i < j_tb.length; i++) {
j_tb[i].checked = this.checked;
}
}
for (var i = 0; i < j_tb.length; i++) {
j_tb[i].onclick = function () {
var flog = true;
for (var i = 0; i < j_tb.length; i++) {
if (!j_tb[i].checked) {
flog = false;
break;
}
}
table.checked = flog;
}
}
</script>
#### 创建节点
//创建元素
var li = document.createElement('li');
var ul = document.querySelector('ul');
//直接添加到ul后面
ul.appendChild(li);
//指定位置添加li
ul.insertBefore(li, ul.children[0]);
#### 添加/删除评论
var input = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function() {
var li = document.createElement('li');
if(!input.value){
alert('请输入内容');
}else {
ul.insertBefore(li,ul.children[0]);
li.innerHTML = input.value + "<a href='javascript:;'>×</a>";
input.value = '';
var as = document.querySelectorAll('a');
for(var i =0;i<as.length;i++){
as[i].onclick = function() {
//删除父亲的孩子
ul.removeChild(this.parentNode);
}
}
}
}
#### 复制节点 ***
var ul = document.querySelector('ul');
//1.node.cloneNode(); 括号为空或者里面是false时，浅拷贝，只复制标签不复制里面的内容
//2.node.cloneNode(); 括号为true时，深拷贝，复制标签又复制内容
btn.onclick = function() {
var li = ul.children[0].cloneNode(true);
ul.appendChild(li);
}
#### 动态生成表格
var tbody = document.querySelector('tbody');
for(var i= 0;i <datas.length;i++){
var tr = document.createElement('tr');
tbody.appendChild(tr);
for(var k in datas[i]){
var td = document.createElement('td');
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
}
#### 删除表格
//接上面
var td = document.createElement('td');
td.innerHTML = "<a href='javascript:;'>删除</a>";
tr.appendChild(td);
}
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
tbody.removeChild(this.parentNode.parentNode);
}
}
#### 三种动态创建元素的区别
- document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
- element.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
- innerHTML创建多个元素凶啊率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
- createElement() 创建多个元素效率稍低一点点，但是结构清晰
###DOM重点核心
文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式
- 1.对于JavaScript，为了能够使JavaScript操作HTM，就有了一套自己的ｄｏｍ编程接口
- 对于HTML，ｄｏｍ是的HTML形成一棵ｄｏｍ树，包含文档、元素、节点
**增：**
- appenChild
- insertBefore
**删：**
- removeChild
**改：主要修改dom元素属性，dom元素的内容、属性、表单的值等**
- 修改元素属性：src、href、title等
- 修改普通元素的内容：innerHTML、innerText
- 修改表单元素：value、type、disabled等
- 修改元素样式：style、className
**查：主要获取擦汗寻dom元素**
- DOM提供的API方法：getElementById、getElementByTagName古老用法不太推荐
- H5提供的新方法：querySelector、querySelectorAll
- 利用系欸但操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）提倡
**属性操作：主要针对自定义属性**
- setAttribute：设置dom的属性值
- getAttribute：得到dom的属性值
- removeAttribute：移除属性
**事件操作：给元素注册事件、采取事件源+事件类型=事件处理程序**
- onclick\onmouseover\onmouseout\onfocus\onblur\onmousemove\onmouseup\onmousedown
### 事件高级
#### 注册事件
- 传统注册方式，利用btn.onclick = function() {},
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
- 方法监听注册方式
是W3C标准 推荐方式
addEventlistener()
IE9之前不支持此方法，可使用attachEvent()代替
同一个元素同一个事件可以注册多个监听
#### addEventlistener()事件监听方式
67
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
