- 、隔行换色
案例一:完成对无序列表的隔行换色(原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作)
var btn = document.getElementById("btn");
var liObj = document.getElementById("list").getElementsByTagName("li");
console.log(liObj);
btn.onclick = function () {
//第一种
for (var i = 0; i < liObj.length; i += 2) {
console.log(liObj[i]);
/* if (i % 2 == 0) {
liObj[i].style.color = "red";
} */
liObj[i].style.color = "red";
}
//第二种
/* for (var i = 0; i < liObj.length; i++) {
console.log(liObj[i]);
if (i % 2 == 0) {
liObj[i].style.color = "red";
}
} */
}
思考代码还有没有能优化的空间(是不是还可以使用三元表达式)
演示示例:隔行换色
- 、美女画廊
效果展示:
点击小图完成大图切换
思路:遍历伪数组,给四张小图绑定单击事件,让当前被单击的小图的src属性值赋给大图的src属性值,让小图的title的属性值,赋给下侧文本内容。
<script>
/*
步骤:
1、页面的搭建
2、获取元素
3、遍历伪数组
4、给四个小美女绑定单击事件
5、把事件源的src属性值赋给大图的src属性值
6、把事件源的title属性值赋给标题的innerText属性值
*/
// 获取小图
var smallPic = document.getElementById("smallPicObj").getElementsByTagName("img");
// 获取大图
var bigPic = document.getElementById("bigPic");
// 获取文本
var title = document.querySelector("#text");
for (var i = 0; i < smallPic.length; i++) {
smallPic[i].onclick = function () {
bigPic.src = this.src;
title.innerText = this.title;
}
}
</script>
2.阻止a链接跳转
三种写法
<!-- 第一种方法 -->
<a href="https://www.baidu.com" οnclick="alert('单击链接了!'); return false">百度一下</a>
<a href="https://www.baidu.com" οnclick="fn1(); return false">百度两下</a>
function fn1() {
alert("单击链接了哈");
}
第一种缺点:代码不分离,不符合低耦合,高内聚的规范
<!-- 第二种方法 -->
<a href="https://www.baidu.com" οnclick="return fn2();">百度三下</a>
function fn2() {
alert("单击百度三了哈!");
return false;
}
第二种代码 缺点同上
<!-- 第三种方法 -->
<a href="https://www.baidu.com" id="link">百度四下</a>
document.getElementById("link").onclick = function () {
alert("单击百度四了哈!");
return false;
}
第三种 行为与结构分离 想想还有没有更加优化的空间?
3.新事件
(1)、鼠标事件
onmouseover鼠标移入事件:在鼠标指针移动到元素上时触发。
onmouseout 鼠标移出事件:在鼠标指针移出元素后触发
//鼠标移入事件
box1.onmouseover = function () {
this.style.fontSize = "26px";
this.style.height = "60px";
console.log(111)
}
// 鼠标移出事件
box1.onmouseout = function () {
this.innerText = "鼠标移出了哈!";
this.style.height = "30px";
this.style.fontSize = "16px";
}
onmouseenter鼠标进入事件:在鼠标指针进入到元素上时触发。
onmouseleave 鼠标离开事件:在鼠标指针离开元素后触发
// 鼠标进入事件
box2.onmouseenter = function () {
this.style.borderRadius = "12px";
this.style.backgroundColor = "blue";
}
//鼠标的离开事件
box2.onmouseleave = function () {
this.style.borderRadius = "0";
this.style.backgroundColor = "purple";
}
onfocus获取焦点事件:在鼠标光标获取输入框焦点时触发
onblur失去焦点事件:在鼠标光标失去焦点时触发。
//获取焦点事件
user.onfocus = function () {
this.style.border = "3px solid red";
this.style.outline = "0";
}
// 失去焦点事件
user.onblur = function () {
console.log(this.value);
}
onclick单击事件:在鼠标指针单击时触发
ondblclick双击事件:在鼠标光标双击时触发。
box1.ondblclick = function () {
this.style.backgroundColor = "yellow";
}
(2)、键盘事件
onkeydown:键盘按下
onkeyup:键盘抬起
document.getElementById("user").onkeydown = function () {
console.log("按下了!!1");
}
document.getElementById("user").onkeyup = function () {
console.log("抬起来了!!1");
console.log(this.value);
}
(3)、浏览器事件
onload:浏览器加载完成执行
onscroll:滚动浏览器滚动条时触发
window.onscroll = function () {
console.log("滚动了!");
}
4 文本内容属性
(1)、innerText和textContent
设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
(2)、innerText和innerHTML的区别
使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
5 元素的属性操作
- 、自定义属性
元素除了本身的属性之外可以设置自定义属性
<div id="box1" class="box_1" name1="divObj">我是盒子</div>
(2)、获取属性
getAttribute("属性的名字")
getAttribute("属性"):不仅可以获取元素本身的属性的属性值,还可以获取元素自定义的属性的属性值
console.log(in1.getAttribute("type"));//text
console.log(in1.getAttribute("name"));//user
console.log(in1.getAttribute("id"));//text1
console.log(in1.getAttribute("style"));//color: red;
(3)、设置属性
setAttribute("属性的名字","属性的值");
元素的属性的设置:不仅可以设置元素本身的属性,还可以设置元素自定义的属性
setObj1.onclick = function () {
in1.setAttribute("name", "password");
// in1.setAttribute("class", "");
in1.className = "";
// in1.setAttribute("style", "border:5px dotted pink");
in1.style.border = "5px dotted pink";
console.log(in1.getAttribute("name"));//password
}
6、移除属性
removeAttribute("属性"):不仅可以移除元素本身的属性,还可以移除元素自定义的属性
var removeObj = document.getElementById("remove");
removeObj.onclick = function () {
in1.removeAttribute("class");
div1.removeAttribute("name1");
}
7 元素样式设置的几种方式
能用switch语句实现的就一定可以使用if实现,但是反之不一定,如果是区间范围就采用if,如果是等值判断使用switch
- 对象.style
- 对象.className
- 对象.setAttribute("style")
- 对象.setAttribute("class")
- 对象.style.setProperty("CSS属性","CSS属性值")
- 对象.style.cssText
<body>
<div class="box1" id="box1"></div>
<input type="button" value="改变样式" id="change">
</body>
<script>
var box = document.getElementById("box1");
var changeBtn = document.getElementById("change");
changeBtn.onclick = function () {
// 1、对象.style
// box.style.backgroundColor = "red";
// 2、对象.className
// box.className = "box2";
// 3、对象.setAttribute("style")
// box.setAttribute("style", "background-color:red");
// 4、对象.setAttribute("class")
// box.setAttribute("class", "box2");
// 5、对象.style.setProperty("CSS属性","CSS属性值")
// box.style.setProperty("background-color", "red");
// 6、对象.style.cssText
box.style.cssText = "background-color: red;height:80px";
}
</script>