Java系列课程第三十五天 （属性操作与实践）

Day35 属性操作与事件

1.案例扩展
(1)、隔行换色
案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作）
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”;
}
} */
}
思考代码还有没有能优化的空间(是不是还可以使用三元表达式）
(2)、美女画廊
效果展示:

点击小图完成大图切换
思路：遍历伪数组，给四张小图绑定单击事件，让当前被单击的小图的src属性值赋给大图的src属性值，让小图的title的属性值，赋给下侧文本内容。

2.阻止a链接跳转
三种写法

百度一下
百度两下
function fn1() {
alert(“单击链接了哈”);
}
第一种缺点：代码不分离，不符合低耦合，高内聚的规范

百度三下
function fn2() {
alert(“单击百度三了哈！”);
return false;
}
第二种代码 缺点同上

百度四下
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.元素的属性操作
(1)、自定义属性
元素除了本身的属性之外可以设置自定义属性

我是盒子

(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 } (3)、移除属性 removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元素自定义的属性 var removeObj = document.getElementById("remove"); removeObj.onclick = function () { in1.removeAttribute("class"); div1.removeAttribute("name1"); } 6.元素样式设置的几种方式 能用switch语句实现的就一定可以使用if实现，但是反之不一定，如果是区间范围就采用if，如果是等值判断使用switch 1、对象.style 2、 对象.className 3、对象.setAttribute("style") 4、对象.setAttribute("class") 5、对象.style.setProperty("CSS属性","CSS属性值") 6、对象.style.cssText