webapi-02_综合

1.排他思想

<button>按钮1</button>` <button>按钮2</button> <button>按钮3</button> <button>按钮4</button>```<button>按钮5</button>

<script>

// // 1. 获取所有按钮元素 // var btns = document.getElementsByTagName('button'); // // btns得到的是伪数组里面的每一个元素 btns[i] // for (var i = 0; i < btns.length; i++) { // btns[i].onclick = function() { // // (1) 我们先把所有的按钮背景颜色去掉干掉所有人 // for (var i = 0; i < btns.length; i++) { // btns[i].style.backgroundColor = ''; // } // // (2) 然后才让当前的元素背景颜色为pink 留下我自己 // this.style.backgroundColor = 'pink';

    //     }// }// //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想

2.全选反选

	商品	价钱
	iPhone8	8000
	iPad Pro	5000
	iPad Air	2000
	Apple Watch	2000

</tbody> </table> </div>

// } // } // // 1. 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可 // // 获取元素 // var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 // var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框 // // 注册事件 // j_cbAll.onclick = function() { // // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中 // console.log(this.checked); // for (var i = 0; i < j_tbs.length; i++) { // j_tbs[i].checked = this.checked; // } // }

// // 2. 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。 // for (var i = 0; i < j_tbs.length; i++) { // j_tbs[i].onclick = function() { // // flag 控制全选按钮是否选中 // var flag = true; // // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中 // for (var i = 0; i < j_tbs.length; i++) { // if (!j_tbs[i].checked) { // flag = false; // break; // 退出for循环这样可以提高执行效率因为只要有一个没有选中，剩下的就无需循环判断了 // } // } // j_cbAll.checked = flag; // } // }

3.自定义属性

<body>

// 1.获取元素

var div=document.querySelector('div')

//获取属性

console.log(div.id);

console.log(div.className);

console.log(div.getAttribute('index'));

// 设置属性

div.id='text';

div.className='nav2';

div.setAttribute('index',2);

// 移除属性

div.removeAttribute('index')

// var div = document.querySelector('div');

// div.getAttribute('index')

// // 1. 获取元素的属性值

// // (1) element.属性

// console.log(div.id);

// //(2) element.getAttribute('属性') get得到获取 attribute 属性的意思我们程序员自己添加的属性我们称为自定义属性 index

// console.log(div.getAttribute('id'));

// console.log(div.getAttribute('index'));

// // 2. 设置元素属性值

// // (1) element.属性= '值'

// div.id = 'test';

// div.className = 'navs';

// // (2) element.setAttribute('属性', '值'); 主要针对于自定义属性

// div.setAttribute('index', 2);

// div.setAttribute('class', 'footer'); // class 特殊这里面写的就是class 不是className

// // 3 移除属性 removeAttribute(属性)

// div.removeAttribute('index');

</script>

4.h5自定义属性

<script>var div=document.querySelector('div')console.log(div.dataset.index);console.log(div.dataset['index']);var a='index'console.log(div.dataset[a]); // 相当于dataset['index']console.log(div.dataset.a);// undefiend 输出dateset对象中名为a的属性值，所以是undefinedconsole.log(div.dataset.listName);div.dataset.b=100  // 添加date-b 值为100div.dataset.userPwd=10 // 添加date—user-pwd 值为10// var div = document.querySelector('div');// // console.log(div.getTime);// console.log(div.getAttribute('getTime'));// div.setAttribute('data-time', 20);// console.log(div.getAttribute('data-index'));// console.log(div.getAttribute('data-list-name'));// // h5新增的获取自定义属性的方法 它只能获取data-开头的// // dataset 是一个集合里面存放了所有以data开头的自定义属性// console.log(div.dataset);// console.log(div.dataset.index);// console.log(div.dataset['index']);// // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法// console.log(div.dataset.listName);// console.log(div.dataset['listName']);

5.tab栏切换案例

商品介绍
规格与包装
售后保障
商品评价（50000）
手机社区

商品介绍模块内容

规格与包装模块内容

售后保障模块内容

商品评价（50000）模块内容

手机社区模块内容

    </div>
</div>
?
<script>// // 1. 获取元素// var lis=document.querySelectorAll('.tab_list li')// var items=document.querySelectorAll('.item')// // 2.注册事件 程序执行// for(var i=0;i<lis.length;i++){//     lis[i].setAttribute('index',i) // 给每一个li设置自定义属性index//     lis[i].οnclick=function(){//         // 排他思想 其他人颜色背景无 只有自己有//         for(var j=0;j<lis.length;j++){//             lis[j].className=''//         }//         this.className='current' // 给自己添加类//         // 排他思想 其他人隐藏 只有自己显示//          for (var k = 0; k < items.length; k++) {//             items[k].style.display = 'none'//         }//         var idx = this.getAttribute('index') // 当前点击元素的自定义属性值//         items[idx].style.display = 'block'//     }// }

6.节点

（1）.子节点

<div>我是div</div> ? 我是span <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li>

</ul>
<ol><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li>
</ol>
?
<div class="demo"><!-- 111 --><div class="box"><span class="erweima">×</span></div>
</div>
?
<script>var ul = document.querySelector('ul')var lis = ul.childrenfor (var i = 0; i < lis.length; i++) {lis[i].innerHTML = '月薪过万不是梦'}// // DOM 提供的方法（API）获取// var ul = document.querySelector('ul');// var lis = ul.querySelectorAll('li');// // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等// console.log(ul.childNodes);// console.log(ul.childNodes[0].nodeType);// console.log(ul.childNodes[1].nodeType);// // 2. children 获取所有的子元素节点 也是我们实际开发常用的// console.log(ul.children);

（2）.父节点

script>

// 1. 父节点 parentNode

var erweima = document.querySelector('.erweima');

// var box = document.querySelector('.box');

// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null

console.log(erweima.parentNode);

（3）.兄弟节点

‘’<div>我是div</div>

<span>我是span</span>
<script>var div = document.querySelector('div');// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等console.log(div.nextSibling);console.log(div.previousSibling);// 2. nextElementSibling 得到下一个兄弟元素节点console.log(div.nextElementSibling);console.log(div.previousElementSibling);

7.创建节点

‘’<ul> <li>123</li> </ul>

<script>// 1. 创建节点元素节点var li = document.createElement('li');// 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的pushvar ul = document.querySelector('ul');ul.appendChild(li);
?// 3. 添加节点 node.insertBefore(child, 指定元素);var lili = document.createElement('li');ul.insertBefore(lili, ul.children[0]);// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素