学js的第二天

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1. 所有元素全部清除样式（干掉其他人）

2. 给当前元素设置样式 （留下我自己）

3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

4. 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';

               }
           }

5. 这里面犯的错误有好几点 第一点 vari=0 记住了要有空格 var i = 0   先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想

 注意this.src 变量要加 '++' 然后变量放中间

接着换背景图片就是backgroundImage=‘url()’

鼠标经过 onmouseover 鼠标离开 onmouseout

input=check 代表一个能打钩的 checked= “checked”表示已经选中

6.

var flag = true;

                for (var i = 0; i < j_tbs.length; i++) {

                    if (!j_tbs[i].checked) {

                        flag = false;

                        break;

                    }

                }

                j_cbAll.checked = flag;

            }

这里新加了一个思想 flag = true;

让最后的值等于flag 然后 flag的话 符合条件就等于flase 不符合条件就等于 true

 属性重新赋值

element.属性=‘值’

自定义属性

element.setAttribute(属性，值)主要针对自定义属性

例子<div id = "demo" index ="1"></div>

获得属性就 div.getAttribute('id')

赋值更改属性就 div.id='test';

div.setAttribute('index',2)；

移除属性值是removeAttribute

div.removeAttribute('index')

总结一下 get是获得属性 set是更改属性 remove是删除属性

tab栏切换 

所有自定义属性都以data 做开头 以data-做开头的属性都是自定义属性

获取的时候为了方便就统一

console.log(div.dataset.time);

        console.log(div.dataset);

这样获取

parentNode获取父节点

childNodes获取子节点

children获取所有的子节点  实际开发经常用

我们想要页面添加一个新的元素 分两步 第一步 创建新的元素 第二步添加元素

  第一步createlement 第二步 添加元素 node.inserbdfore(child,指定元素)

用法
let insertedNode = parentNode.insertBefore(newNode, referenceNode);
参数
newNode：将要插入的节点
referenceNode：被参照的节点（即要插在该节点之前）
insertedNode：插入后的节点
parentNode：父节点

添加元素 node.appendChild(child) node父级 child是子级 后面追加元素

删除元素是 node.removeChild()   

创造元素是 document.createElement('li')

 

三种动态创建元素的区别

document.write () 创建元素 如果页面文档流加载完毕 在调用这句话会导致页面重绘 重绘的意思就是之前的都没了 document.write 里面的重新加载 。

innerHtml创建元素

这种浏览器反应慢一点 但是如果以数组的方式创建的话速度会更快

documnet.createElement()创建元素

这种方法浏览器反应第二快一点，会比较规整

arr.join(‘’)把数组里面所有的东西放到一个里面