#排它思想
排它思想是什么？
先让所有的内容都只为初始值，让你想要选中的内容变成你想设置内容
首先设置按钮
<div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<div>
<script>
然后我们在获取按钮
var btns = doucument.querySelectorAll("button")
然后在遍历一遍所有按钮
for(var i = 0; i < btns.length; i++){
然后设置点击事件
btnsp[i].onclick = function(){
在按钮点击的时候，让所有的按钮全变成黑色
按钮在点击的时候遍历一遍所有按钮
for(var j = 0; j < btns.length; j++){
让所有的按钮变为黑色
btns[j].style.color = "black"
}
在此处在让被点击的按钮变为红色
this.style.color = "red"
}
}
</script>
#百度换肤
设置css样式
<style>
html body{
width:100%
height:100%
}
.thumb{
width:650px;
margin:200px auto;
}
.thumb img{
width:200px;
height:150px
display:inline-block;
}
</style>
设置图片
<div class="thumb">
<img src="图片地址">
<img src="图片地址">
<img src="图片地址">
</div>
设置js
<script>
获取特殊元素body
var body = document.body
设置初始背景
body.style.background = "url(../images/ldh.jpg) no-repeat"
设置初始背景宽高
body.style.backgroundSize = "100%"
获取所有背景图
var imgs = document.querySelectorAll("img")
遍历所有背景图
for(var i = 0; i < imgs.length; i++){
设置背景图点击事件
imgs[i].omclick = funciton(){
设置点击图片更换背景图
body.style.background = "url('"+ this.src +"') no-repeat"
设置点击图片宽高
body.style.backgroundSize = "100%"
}
}
</script>
#隔行变色
设置表格
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr class="tdline">
<td>张三</td>
<td>18</td>
<td>3年2班</td>
</tr>
<tr class="tdline">
<td>李四</td>
<td>18</td>
<td>3年2班</td>
</tr>
<tr class="tdline">
<td>王朝</td>
<td>18</td>
<td>3年2班</td>
</tr>
<tr class="tdline">
<td>马汉</td>
<td>18</td>
<td>3年2班</td>
</tr>
</table>
<script>
获取到表格
var trs = document.querySelectorAll(".tdline")
遍历一遍表格
for(var i = 0; i < trs.length; i++){
条件判断需要更改的表格
if(i % 2 == 0){
trs[i].style.background = "red"
}
}
</script>
#升级版
设置表格
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr class="tdline">
<td>张三</td>
<td>18</td>
<td>3年2班</td>
</tr>
<tr class="tdline">
<td>李四</td>
<td>18</td>
<td>3年2班</td>
</tr>
<tr class="tdline">
<td>王朝</td>
<td>18</td>
<td>3年2班</td>
</tr>
<tr class="tdline">
<td>马汉</td>
<td>18</td>
<td>3年2班</td>
</tr>
</table>
<script>
获取到表格
var trs = document.querySelectorAll(".tdline")
遍历一遍表格
for(var i = 0; i < trs.length; i++){
设置鼠标移入时
trs[i].onmouseover = function(){
设置表格变成红色
this.style.background = "red"
}
设置鼠标移出时
trs[i].onmouseout = function(){
this.style.background = "white"
}
}
</script>
#全选
<div>
设置表格
<table border="1" width="500px" align="center">
<tr>
<th><input type="checkbox" class="all">全选</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr class="tdline">
<th><input type="checkbox" class="c-item"></th>
<td>张三</td>
<td>18</td>
<td>3年2班</td>
</tr>
<tr class="tdline">
<th><input type="checkbox" class="c-item"></th>
<td>李四</td>
<td>17</td>
<td>3年3班</td>
</tr>
<tr class="tdline">
<th><input type="checkbox" class="c-item"></th>
<td>王朝</td>
<td>19</td>
<td>3年1班</td>
</tr>
<tr class="tdline">
<th><input type="checkbox" class="c-item"></th>
<td>马汉</td>
<td>18</td>
<td>3年1班</td>
</tr>
</table>
</div>
<script>
获取到全选
var allSelect = document.querySelector(".all")
获取到每个选框
var selects = document.querySelectorAll(".c-item")
定义全选按钮点击事件
allSelect.onclick = function(){
遍历选框按钮
for(var i =0; i < selects.length; i++){
让每个选框的按钮checked的状态等于全选选框的checked的状态
selects[i].checked = this.checked
}
}
设置一个flag
var flag = false;
遍历一遍选框
for(var i = 0; i < selects.length; i++){
设置每个选框的点击事件
selects[i].onclick = function(){
每当有个选框点击的时候flag就等于true
flag = true
每当有个选框点击的时候就遍历一遍全部的选框
for(var j = 0; j < selects.length; j++){
当有一个选框不是ture的时候flag就是false
if(!selects[j].checked){
flag = false
break
}
}
然后全选按钮就等于flag
allSelect.checked = flag
}
}
</script>
#属性操作
<img src="" alt="">
<script>
Attribute:属性
var img = document.querySelector("img")
console.log(img.src)
img.src = "http://www.baidu.com"
getAttribute 获取属性的值
console.log(img.getAttribute("src"))
setAttribute设置属性的值
img.setAttribute("src","http://www.baidu.com")
setAttribute可以设置属性的名字
img.setAttribute("data-src","http://www.baidu.com")
移出属性 removeAttribute
img.removeAttribute("data-src")
</script>
#tab栏切换
<style>
.nav li{
display: inline-block;
}
.content > div{
display: none;
}
</style>
<div class="nav">
<!-- 这是导航 -->
<ul>
<li>首页</li>
<li>列表</li>
<li>购物车</li>
<li>我的</li>
</ul>
</div>
<div class="content">
<div class="item-content">home</div>
<div class="item-content">list</div>
<div class="item-content">shopping</div>
<div class="item-content">mine</div>
</div>
<script>
var liList = document.querySelectorAll("li")
var divs = document.querySelectorAll(".item-content")
// 首先给每一个li都增加上去一个属性
for(var i = 0; i < liList.length; i++){
liList[i].setAttribute("myindex", i)
}
for(var i = 0; i < liList.length; i++){
liList[i].onclick = function(){
// 让点击的导航变成红色
for(var j = 0; j < liList.length; j++){
liList[j].style.color = "black"
}
this.style.color = "red"
// 让点击下内容出现
// 因为在执行点击事件处理函数时，for循环已经执行完毕了
// console.log(i) //需要注意在这里打印的i就是最大值4
// 获取元素上面的属性值
var index = this.getAttribute("myindex")
// 将对应内容区域显示出来
for(var j = 0; j < divs.length; j++){
divs[j].style.display = "none"
}
divs[index].style.display = "block"
}
}
</script>
#H5新增属性
<div>
<!-- 自定义属性 -->
<img data-type= "jpeg" src="" alt="">
</div>
<script>
var img = document.querySelector("img")
console.log(img.dataset.type)
</script>
#节点属性
网页中所有的内容都是节点，在DOM中，使用node进行表示！！！都是可以通过js进行访问的
一个node包含了三个属性nodeType节点类型、nodeName节点名称、nodeValue节点值
#父节点操作
<div>
<ul>
<li class="myli">321</li>
<li></li>
<li></li>
</ul>
</div>
<script>
var li = document.querySelector(".myli")
// console.log(li.nodeType) //如果返回值不为1，哪可能就是文本
// console.log(li.nodeName)
// console.log(li.nodeValue)
// 通过子节点li获得li父节点
console.log(li.parentNode)
</script>
#子节点操作
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelector("ul")
// 如果使用childNodes那么换行和空格也算是子节点
var liList=ul.childNodes
console.log(liList)
// children,使用父节点获取子节点，只打印li元素
// 在开发中经常用！！！
console.log(ul.children)
// firstChild返回第一个子元素 lastChild返回最后一个子元素 识别text文本的
</script>
#兄弟节点
<ul>
<li>1</li>
<li class="myli">2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var myli = document.querySelector(".myli")
console.log(myli.nextSibling) //下一相同对象，识别文本
console.log(myli.previousSibling) //当前节点的前一个节点，识别文本
console.log(myli.nextElementSibling)
console.log(myli.previousElementSibling)
</script>
#创建添加节点
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
var ul = document.querySelector("ul")
// 创造新的一个节点
// create创建element节点
var li = document.createElement("li")
li.innerHTML = "123"
// 添加节点
// append追加child孩子,因为是追加所以在最后方
ul.appendChild(li)
console.log(ul)
// 添加到最前面的位置
ul.insertBefore(li,ul.children[0])
</script>
#留言板
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul></ul>
</div>
<script>
var text = document.querySelector("textarea")
var btn = document.querySelector("button")
var ul = document.querySelector("ul")
btn.onclick = function(){
// 判断text文本中是否有文字，如果有，进行发布，如果没有，提示输入内容
if(text !== ""){
// 增加一个li元素，将text文本中内容放到li中
// 追加到ul中
var li = document.createElement("li")
li.innerHTML = text.value
ul.appendChild(li)
text.value = ""
}else{
alert("发布内容不能为空")
}
}
</script>
