一、复杂元素操作
1. 排他思想
<script>
// 1.获取所有按钮元素
var btns = document.getElementsByTagName("button");
// 进行遍历获取元素
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.然后将当前的背景颜色改为red
this.style.backgroundColor = "red";
};
}
</script>
-
实现效果:
- 当前按钮(元素)触发事件
- 遍历所有元素
- 清除所有同类元素的执行函数
- 执行当前元素事件
2. 案例-背景换肤效果
-
实现效果:点击哪个图片,背景图就会显示那个图片
<script>
// 1.获取元素(增进写法:连续写)
var imgs = document.querySelector(".box").querySelectorAll("img");
console.log(imgs);
// 2.循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
// this.src就是点击图片的路径
//把这个路径给body
document.body.style.backgroundImage = "url(" + this.src + ")";
};
}
</script>
- 设置好静态页面
- 获取到元素
- 遍历
- 注册事件
- 执行函数内容:注意执行函数中存在获取到body对象:document.body
3. 案例-隔行变色
<script>
// 1.获取元素:tbody里面所有的行
var trs = document.querySelector("tbody").querySelectorAll("tr");
// 2.利用循环注册事件
for (var i = 0; i < trs.length; i++) {
// 3.鼠标经过事件
trs[i].onmouseover = function () {
// 利用样式类名进行修改
this.className = "bg";
};
// 4.鼠标移出
trs[i].onmouseout = function () {
// 空的样式类名表示没有操作
this.className = "";
};
}
</script>
-
执行效果:鼠标移动到哪一行就会修改那一行的背景色
- 布局静态页面
- 获取所有行元素
- 遍历
- 设置当前元素的鼠标移动:mouseover事件
- 修改当前className
- 设置当事件鼠标移开:mouseout事件
- 再次修改当前的className为其他name或者空:根据自己的布局进行设置
4. 案例-表单全选功能
<script>
//选中上面则是全选 再点击就是全部取消
// 1.获取元素
// 获取全选框
var j_cbAll = document.getElementById("j_cbAll");
// 获取复选框
var j_tbs = document.getElementById("j_tb").getElementsByTagName("input");
// 2.绑定事件
// 上面影响下面的按钮
j_cbAll.onclick = function () {
// 注意默认点击有一个input值:checked
// this.checked返回true和false
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 () {
// 每次点击下面的复选框都要循环检查小按钮使得否都被选中
var flag = true;
//类似于排他:遍历所有选框判断里面是个否有没选中的
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
// 作为排除:任何一个没有被选中就是未选中状态
flag = false;
}
}
// 总点击事件选中样式=小的点击样式:很具true返回值进行判断
j_cbAll.checked = flag;
};
}
</script>
-
执行效果
- 点击全选:所有复选框同样获得点击效果
- 点击所有复选框:全选复选框同样获得点击效果
- 当缺少任何一个复选框时候全选框无法获得点击效果
2. 执行分析
主要使用复选框的checked(true和false)和排思想
- 首先获取到元素:全选复选框和多个复选框伪数组
- 全选框点击(复选框同样点击效果)事件
- 遍历多个复选框
- 设置当前所有复选框的点击效果:checked = 全选框的checked
- 遍历复选框并给当前复选框设置点击事件
- 设置一个判断值:布尔值(默认是点击)
- 在执行这个布尔值之前遍历多个复选框
- 判断如果点击事件没有被点击
- 则修改判断值为false
- 执行当前对象的点击事件 = 这个布尔值
- 设置一个判断值:布尔值(默认是点击)
二、对象属性值
1. 获取属性方式
element.属性 :基础获取自带对象值
console.log(div.className);
element.getAttribute('属性') :获取自定义对象属性值
console.log(div.getAttribute("class"));
element.dataset(直接获取到以data开头的属性的集合)
element.dataset.name
element.dataset['name'] :H5新增两个获取自定义对象属性值
首先需要建立以data开头的:dataset开头获取
接着才能使用获取daata开头的属性
console.log(div.dataset.index);
console.log(div.dataset["index"]);
2.设置自定义属性
element.属性名= '值' (设置内置) 基础设置
div.className = "one";
element.setAttribute('属性名','值') 自定义设置
div.setAttribute("data-time", "18");
element.dataset.属性名= '值' H5新增自定义设置
div.dataset.index = "nihao";
3. 清除元素属性值
element.属性名 = '' 基础设置:只是清除值保留属性名
div.className = "";
element.setAttribute('属性名') 自定义设置:全部清除
div.removeAttribute("index");
element.dataset.属性名= '' H5新增自定义清除:只是清除值保留属性名
div.dataset.index = "nihao";
4. 案例-详情页tab栏点击切换
<script>
// 1. 获取元素
var tab_list = document.querySelector(".tab_list");
var lis = tab_list.querySelectorAll("li");
var items = document.querySelectorAll(".item");
// 2.遍历+绑定事件
for (var i = 0; i < lis.length; i++) {
// 点击事件做完之后:遍历设置自定义属性(方便后面的显示功能)
// index的属性值对应着点击事件第几个
lis[i].setAttribute("index", i);
lis[i].onclick = function () {
//选项卡点击模块(排他思想)
// 排他思想:清除所有class类
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
//留下自己
this.className = "current";
// -----------------------------------------------
//下面显示内容模块
//li添加自定义属性:属性值从0开始编号
// 1.得到当前index的索引号
var index = this.getAttribute("index");
//排他思想
// 先把所有显示内容隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = "none";
}
// 单独把点击到的内容显示出来
items[index].style.display = "block";
};
}
</script>
-
实现效果:点击哪个模块,下方的内容也会随着改变
-
执行分析
- 首选获取所有用到的元素
- 遍历按钮
- 设置一个属性为当前遍历下标值
- 给当前元素设置点击事件
- 利用排他思想
- 遍历并清除所有点击元素样式
- 给当前点击元素设置点击事件
- 获取到当前的时间的下标元素
- 再次排他思想:清除所有内容显示
- 单独显示与当前元素下标匹配的样式