排他思想
如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:
-
所有元素全部清除样式(干掉其他人)
-
给当前元素设置样式 (留下我自己)
-
注意顺序不能颠倒,首先干掉其他人,再设置自己
-
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';}
} -
这里面犯的错误有好几点 第一点 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(‘’)把数组里面所有的东西放到一个里面