webApi第三天
字符串
1.类似数组的特性
2.属性 length 当前字符串的长度
3.字符串也可以通过下标来访问
4.字符串也可以遍历
购物车数量加减案例
<body>
<div>
<input type="text" value="1">
<button class="add"> + </button>
<button disabled class="sub"> - </button>
</div>
<script>
let inputDom = document.querySelector('input')
let addDom = document.querySelector('.add')
let subDom = document.querySelector('.sub')
let num = 1
addDom.addEventListener('click',function () {
inputDom.value = ++num
//点击+按钮后启用-按钮
subDom.disabled=false;
})
subDom.addEventListener('click',function () {
inputDom.value = --num
if (num === 1 ){
subDom.disabled=true; //禁用 - 按钮
}
})
</script>
</body>
环境对象
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】 是判断 this 指向的粗略规则 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
window是js中一个大大的全局变量，内置就有的，不需要我们创建，平时为了编写代码方便，允许我们使用window的一些属性或者方法的时候，省略了window（其他对象无法做到）
全局函数 全局变量 都是window的一个属性
排他思想
当前元素为A状态，其他元素为B状态
1.使用for循环--干点所有人
2.通过this或者下标找到自己或者对应的元素--复活自己
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
//获取li标签数组
let lisDom =document.querySelectorAll('li')
//循环li标签数组
for (let index = 0; index < lisDom.length; index++) {
// 给每一个li标签绑定点击事件
lisDom[index].addEventListener('click',function () {
//移出每一个li标签的bgc类名
for (let i = 0; i < lisDom.length; i++) {
lisDom[i].classList.remove ('bgc')
}
//单独给要点击的li标签添加bgc类名
this.classList.add('bgc')
})
}
</script>
</body>
tab栏案例
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
<script>
/*
1 给标题标签 给他们绑定点击事件
2 事件触发 开始使用排他思想
1 获取所有的要设置标题样式的标签 遍历他们，移除掉 上边框 红色效果
2 通过 this 给自己单独添加上 上边框红色的效果
3 获取到所有的main标签（决定图片显示） 遍历他们 移除掉 一个class active
4 再获取到要设置的 main标签 让它 添加上一个class active
*/
let lisDom =document.querySelectorAll('li')
let mainsDom = document.querySelectorAll('.main')
for (let index = 0; index < lisDom.length; index++) {
lisDom[index].addEventListener('click',function () {
//遍历li标签 移出所有li标签active类名
for (let i = 0; i < lisDom.length; i++) {
lisDom[i].classList.remove('active')
}
//单独给点击的li标签添加active类名
this.classList.add('active')
//-------图片div数组-------
//遍历所有的图片div数组 移出所有图片div标签active类名
for (let j = 0; j < mainsDom.length; j++) {
mainsDom[j].classList.remove('active')
}
//单独给被点击的li标签对应的图片div标签添加active类名
mainsDom[index].classList.add('active')
})
}
</script>
</body>
节点操作
Dom节点
Dom树里面的每一个内容称为节点
节点类型
1.元素节点（重点！！！）
所有的标签 如 body，div.....
html是根节点
2.属性节点
所有的属性 如herf
3.文本节点
所有的文本
4.注释节点
查找节点
父节点查找
parentNode
返回最近一级的父节点 找不到返回null
语法：子元素.parentNode
关闭二维码案例
<body>
<div>
<img src="./关闭二维码/img/2.png" class="close">
<img src="./关闭二维码/img/1.png">
</div>
<script>
//获取 close 标签
let closeDom = document.querySelector('.close')
//添加点击事件
closeDom.addEventListener('click',function () {
//this.parentNode找到当前点击元素的父元素
this.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>
/*
//获取ul
let ulDom=document.querySelector("ul");
//给ul绑定点击事件
ulDom.addEventListener("click",function(){
//获取的ul的所有li子元素是个数组，所以需要遍历让所有子元素都隐藏
for (let index = 0; index < ul.children.length; index++) {
ulDom.children[index].style.display="none"
}
})*/
//获取ul标签数组
let ulsDom=document.querySelectorAll("ul");
////遍历ul数组 并挨个绑定点击事件
for (let index = 0; index < ulsDom.length; index++) {
ulsDom[index].addEventListener('click',function () {
// this.children.style.display='none'
for (let i = 0; i < this.children.length; i++) {
this.children[i].style.display='none'
}
})
}
</script>
</body>
兄弟节点查找
1.下一个兄弟节点：nextElementSibling
2.上一个兄弟节点：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>
let lisDom = document.querySelectorAll('li')
for (let index = 0; index < lisDom.length; index++) {
lisDom[index].addEventListener('click',function () {
//下一个兄弟元素
this.nextElementSibling.style.backgroundColor='orange'
//上一个兄弟元素
this.previousElementSibling.style.backgroundColor='greenyellow'
})
}
</script>
</body>
增加节点
1.创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
**语法： document.createElement('标签名') **：
2.追加节点
插入到父元素的最后一个子元素:
**语法： 父元素.appendChild(要插入的元素) **
appendChild
追加到最后一个子元素。
如果要插入的元素 是已经存在的，那他的作用是移动，剪切过去。
如果插入的元素 是新创建的，那他的作用 仅仅是 插入。
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
// 1 创建一个 li标签 节点
let li = document.createElement('li');
li.innerText='六一'
li.style.backgroundColor='orange'
// 2 把li标签插入到 ul标签中 父元素的底部 插入子元素
let ulDom = document.querySelector('ul');
ulDom.appendChild(li);
</script>
</body>
插入到父元素中某个子元素的前面：
语法：父元素.insertBefore(要插入的元素，在哪个元素前面)
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: space-between;
padding: 100px;
}
ul {
border: 1px solid #000;
width: 400px;
}
</style>
</head>
<body>
<ul class="left">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</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);
</script>
</body>
作业 微博发布案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./weubo.css" />
</head>
<body>
<div class="w">
<div class="controls">
<img src="./tip.png" alt="" /><br />
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul></ul>
</div>
</div>
<script>
let textareaDom = document.querySelector('#area')
let useCountDom = document.querySelector('.useCount')
let btnDom = document.querySelector('button')
let ulDom = document.querySelector('ul')
textareaDom.addEventListener('input',function () {
// textareaDom.value.length
/* let a = textareaDom.value.length;
console.log(a);
useCountDom.innerHTML = a ; */
useCountDom.innerHTML = textareaDom.value.length;
})
// button添加点击事件
// 输入的内容等于li里面的内容 并插入到ul
//所有要点击button后发生的变化都加在button点击后的函数里面
btnDom.addEventListener('click',function () {
let li = document.createElement('li');
li.innerText=textareaDom.value;
ulDom.appendChild(li);
textareaDom.value = ''
useCountDom.innerHTML= 0
})
</script>
</body>
</html>
