-
字符串的长度
-
环境对象
-
排他思想
-
DOM- 节点操作
-
时间对象
-
数组和伪数组的区别
字符串的长度
- 需要用到 表单的input事件
- 如何统计文字个数 字符串 看成是数组 （拥有一点点数组的特点）
- 字符串有 数组的长度length
- let str="你们好呀"; str[0]=你 str[1]=们
- 字符串也可以循环
<body>
<input type="text">
<script>
//字符串长度
console.log("aa".length);
console.log("aab".length);
console.log("aabb".length);
// let str="你们好呀123";
// console.log(str.push);
// console.log(str[0]);
// console.log(str[1]);
// console.log(str[2]);
// for (let index = 0; index < str.length; index++) {
// console.log(str[index]);
// }
let input=document.querySelector("input")
// 绑定input事件
input.addEventListener("input",function () {
console.log(input.value.length);
})
</script>
</body>
环境对象
①环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
②作用：弄清楚this的指向，可以让我们代码更简洁
- 函数的调用方式不同，this 指代的对象也不同
- 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
③在前端的js中， 我们的全局变量 可以理解为 是window的一个属性
- window 是默认就存的一个全局变量
- window比较特殊，我们想要使用window的一些功能的时候 是可以省略 window
<body>
<ul>
<li>大家好我是1弟</li>
<li>大家好我是2弟</li>
<li>大家好我是3弟</li>
<li>大家好我是4弟</li>
<li>大家好我是5弟</li>
</ul>
<script>
// 需求： 点击每一个 li标签 都可能 打印出 被点击的li标签的文本内容即可
let liList=document.querySelectorAll("li");
for (let index = 0; index < liList.length; index++) {
liList[index].addEventListener("click",function () {
// console.log(liList[index].innerText);
console.log(this.innerText); // this = 表示 我自己 this整体的知识
})
}
</script>
</body>
排他思想
当前元素为A状态,其他元素为B状态
使用：
- 干掉所有人 使用for循环
- 复活他自己 通过this或者下标找到自己或者对应的元素
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
let List = document.querySelectorAll('li')
for (let index = 0; index < List.length; index++) {
List[index].addEventListener('click',function(){
//设置所有li标签为白色
for (let j = 0; j < List.length; j++) {
List[j].style.backgroundColor = '#fff'
}
//给被点击的li标签加上选中样式
this.style.backgroundColor = '#baf'
})
}
</script>
</body>
DOM节点
DOM树里每一个内容都称之为节点
1、节点类型
①元素节点
- 所有的标签 比如 body、 div
- html 是根节点
②属性节点
- 所有的属性 比如 href
③文本节点
- 所有的文本
④其他
- 注释节点
2、查找节点
①父节点查找：
- parentNode 属性
- 返回最近一级的父节点 找不到返回为null
子元素.parentNode
<body>
<div>
<button>目标元素</button>
</div>
<script>
let button = document.querySelector('button');
// 先获取button 目标元素
console.dir(button);
console.dir(button.parentNode); // 获取到父元素 div标签
// 修改一下父元素的背景颜色
// console.dir(button.parentNode); // 获取到父元素 div标签
// button.parentNode.style.backgroundColor = 'red';
button.parentNode.style.display = 'none';
</script>
</body>
②子节点查找：
-
childNodes
获得所有子节点、包括文本节点（空格、换行）、注释节点等
-
children**（重点）**
仅获得所有元素节点
返回的还是一个伪数组
父元素.children
<body>
<ul>
<li>a1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>b1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>c1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
/*
1 获取到所有的ul标签 数组
2 遍历ul数组 挨个绑定点击事件
3 点击事件触发了
1 this = 当前被点击的ul标签
2 this.children 获取到 所有的ul的子元素 数组
3 遍历 children 获取到中的每一个li标签
4 li.style.display="none"
*/
// let ul=document.querySelector("ul");
// 获取ul标签下的 子节点
// console.log(ul.children);
// console.log(ul.childNodes);// 什么都那
// 1 获取到所有的ul标签 数组
let uls = document.querySelectorAll('ul');
// 遍历ul数组 挨个绑定点击事件
for (let index = 0; index < uls.length; index++) {
// 3 点击事件触发了
uls[index].addEventListener('click', function () {
// 3.1 3.2 3.3 对被点击的ul的children 做遍历
for (let j = 0; j < this.children.length; j++) {
// this.children[j] 表示 每一个li标签
this.children[j].style.display="none";
}
});
}
</script>
</body>
③兄弟关系查找：
-
下一个兄弟节点
nextElementSibling 属性
-
上一个兄弟节点
previousElementSibling
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
/*
1 获取所有的li标签 数组
2 遍历 绑定点击事件
3 事件触发了
this.next
this.previou 获取到对应的元素 设置他们的样式
*/
// 1 获取所有的li标签 数组
let lis = document.querySelectorAll('li');
// 2 遍历 绑定点击事件
for (let index = 0; index < lis.length; index++) {
// 3 事件触发了
lis[index].addEventListener('click', function () {
// 上一个兄弟 设置 蓝色
this.previousElementSibling.style.backgroundColor = 'blue';
// 下一个兄弟 设置 绿色
this.nextElementSibling.style.backgroundColor = 'green';
});
}
</script>
</body>
3、增加节点
①创建节点
- 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
- 创建元素节点方法：
//创建一个新的元素节点
document.createElement('标签名')
创建节点与追加节点语法：
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
// 1 创建一个 li标签 节点
let li = document.createElement('li');
li.innerText="这个是新创建的li标签";
li.style.backgroundColor="green";
// 2 把li标签插入到 ul标签中
let ul = document.querySelector('ul');
ul.appendChild(li); // 把li标签插入到ul中 父元素的底部 插入子元素
</script>
</body>
②追加节点
剪切-移动
- 要想在界面看到，还得插入到某个父元素中
- 插入到父元素的最后一个子元素:
//插入到这个父元素的最后
父元素.appendChild(要插入的元素)
<body>
<ul class="left">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="right"></ul>
<script>
// appendChild 插入元素的功能 | 剪切
// appendChild(元素) 如果该元素是已经存在网页中， appendChild作用类似 移动
// appendChild(元素) 如果该元素新创建的， appendChild作用类似 简单的插入
// 先获取左边的第一个li标签
let li = document.querySelector('.left li:nth-child(1)');
let rightUl = document.querySelector('.right');
// 把li标签插入到右边的ul中
rightUl.appendChild(li);
</script>
</body>
- 插入到父元素中某个子元素的前面
//插入到某个子元素的前面
父元素.insertBefore(要插入的元素, 在那个元素前面)
<body>
<ul class="left">
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
/*
insertBefore 也能插入元素 功能也类似 appendChild
1 如果要插入的元素 是已经存在的 那么insertBefore作用 移动
2 如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入
*/
let c = document.querySelector('.left li:nth-child(3)');
let two = document.querySelector('.right li:nth-child(2)');
let right = document.querySelector('.right');
// right.insertBefore(c,two);
let li = document.createElement('li');
li.innerText = '新创建的';
right.insertBefore(li, two);
// 父元素.insertBefore(要插入的元素,哪个元素的上面);
</script>
</body>
③克隆节点
//克隆一个原有的元素节点
元素.cloneNode(布尔值)
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
- 若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
- 若为false，则代表克隆时不包含后代节点--浅拷贝
- 默认为false
<body>
<div class="box">
<button>点击</button>
</div>
<script>
// 1 来克隆这个节点 box
let box = document.querySelector('.box');
// 2 开始克隆
// let newBox = box.cloneNode(); // 浅克隆 不会把 div的后代节点一起克隆
let newBox = box.cloneNode(true); // true 深克隆 会把 div的后代节点一起克隆
// 3 插入到body标签中
document.body.appendChild(newBox);
</script>
4、删除节点
- 若一个节点在页面中已不需要时，可以删除它
- 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
- 语法
父元素.removeChild(要删除的元素)
-
注：
如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
<body>
<button>删除ul中某一个li标签</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let button = document.querySelector('button');
let ul = document.querySelector('ul');
// 要删除的子元素
let li = document.querySelector('li:nth-child(1)'); // 1
button.addEventListener('click', function () {
// 删除指定的元素
ul.removeChild(li);
// 删除自己
ul.remove();
});
</script>
</body>
时间对象
1、实例化
- 在代码中发现了 new 关键字时，一般将这个操作称为实例化
- 创建一个时间对象并获取时间
①获得当前时间:
let date = new Date()
②获得指定时间:
let date = new Date('1949-10-01')
2、时间对象方法
- 因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear() | 获得年份 | 获取四位年份 |
| getMonth() | 获得月份 | 取值为 0 ~ 11 |
| getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
| getDay() | 获取星期 | 取值为 0 ~ 6 |
| getHours() | 获取小时 | 取值为 0 ~ 23 |
| getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
| getSeconds() | 获取秒 | 取值为 0 ~ 59 |
- 配合定时器使用
<body>
<h1></h1>
<script>
// // 1 实例化一个 时间对象 new
// let date = new Date();
// console.log(date.getFullYear()); // 2 输出当下是什么年份
// console.log(date.getMonth()); // 3 输出月份 0-12 都会自己 加一
// console.log(date.getDate()); // 4 几号
// console.log(date.getDay()); // 5 输出星期几 星期一 是 1 星期二 星期六 6 星期天 0
// console.log(date.getHours()); // 6 小时
// console.log(date.getMinutes());// 7 分钟
// console.log(date.getSeconds());// 8 秒
// 在定时器内输出他们
// 输出 年月日 时分秒
let h1 = document.querySelector('h1');
setInterval(function () {
let nowDate = new Date();
console.log(1);
let fullyear = nowDate.getFullYear();//年
let month = nowDate.getMonth();//月
let date = nowDate.getDate();//日
let hours = nowDate.getHours();//时
let minutes = nowDate.getMinutes();//分
let seconds = nowDate.getSeconds();//秒
h1.innerText = `${fullyear}-${month}-${date} ${hours}:${minutes}:${seconds}`;
}, 1000);
</script>
</body>
3、时间戳
使用场景：来快速生成一个不会重复的数字 * 随机数
①什么是时间戳
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
②三种方式获取时间戳
- 使用 getTime() 方法
//实例化
let date = new Date()
//获取时间戳
console.log(date.getTime())
-
简写 +new Date()
可以返回当前时间戳或者指定的时间戳
只要日期对象 可以使用 + 将整个对象 转成 时间戳
console.log(+new Date())
-
使用 Date.now()
无需实例化
但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳
console.log(Date.now)
数组和伪数组的区别
-
都可以使用for循环
-
伪数组对于好用的数组方法不支持
filter、map、some、every、ind、findIndex、reduce
-
使用document.querySelectorAll获取的数组是伪数组
<script>
// 真正的数组 简单的判断 有一个方法 filter
let arr=[];
// 通过 document.querySelectorAll 获取的数组 就是伪数组 可以使用for循环 但是有很多的真正的数组方法 伪数组用不了的！！
// 那些数组方法呢 很多 还没有正式讲到而已
console.log(arr.filter);
let divs=document.querySelectorAll("div");
console.log(divs.filter);
console.log(arr.filter);
console.log(arr.map);
console.log(arr.some);
console.log(arr.every);
console.log(arr.find);
console.log(arr.findIndex);
console.log(arr);
</script>
