1鼠标移入移出事件
<ul>
<li>这是第1个li标签</li>
<li>这是第2个li标签</li>
<li>这是第3个li标签</li>
<li>这是第4个li标签</li>
<li>这是第5个li标签</li>
<li>这是第6个li标签</li>
</ul>
<script src="common.js"></script>
<script>
// 鼠标移入事件 onmouseover
// 鼠标离开事件 onmouseout
var list = document.getElementsByTagName("li");
for(var i = 0 ; i < list.length ; i++){
//给每一个li注册鼠标移入事件
list[i].onmouseover = function () {
this.style.backgroundColor = "pink";
}
list[i].onmouseout = function () {
//恢复到这个标签的默认颜色
this.style.backgroundColor = "";
}
}
</script>
2.关于焦点的事件
<input type="text" value="请输入搜索内容" id="txt">
<script src="common.js"></script>
<script>
// 获取焦点 onfocus
// 失去焦点 onblur
//1.注册获取焦点的事件
my$("txt").onfocus = function () {
//console.log(this.value)
this.value = "";
this.style.outline = "none";//取消轮廓线
}
//注册失去焦点
my$("txt").onblur = function () {
this.value = "请输入搜索内容"
}
//需求: 在失去焦点的时候判断密码的长度 6<= x =< 10 背景颜色为红色, 否则为绿色
my$("txt").onblur = function () {
if(this.value.length >= 6 &&this.value.length <= 10 ){
this.style.backgroundColor = "red";
}else if(this.value.length == 0){
this.style.backgroundColor = "";
}else{
this.style.backgroundColor = "green";
}
}
</script>
3.关于textContent的问题
<input type="button" value="设置" id="btn">
<div id="dv">哈哈</div>
<script src="common.js"></script>
<script>
// innerText 谷歌, 火狐, ie 都支持
// textContent 谷歌, 火狐, 支持 ie8不支持
my$("btn").onclick = function () {
my$("dv").textContent = "这是改变了的div"
// console.log(my$("dv").innerText);
// console.log(my$("dv").textContent);//
}
// textContent属性 在ie8 返回的是undefined;
//判断这个属性的值如果是undefined , 说明这个浏览器不支持
//兼容代码
// 获取任意标签中间的文本内容, 需要返回值
function getInnerText(element) {
//判断类型
if(typeof element.textContent == "undefined"){
//不支持
return element.innerText;
}else{
return element.textContent;
}
}
// 设置任意标签中间的文本内容, 需要返回值
// 形参: 操作的元素, 设置的内容
function setInnerText(element, text) {
//判断类型
/*if(typeof element.textContent == "undefined"){
//不支持
element.innerText = text;
}else{
element.textContent = text;
}*/
if(element.textContent){
//如果有值, 用textContent设置
element.textContent = text;
}else{
//不支持
element.innerText = text;
}
}
//测试
my$("btn").onclick = function () {
console.log(getInnerText(my$("dv")));
setInnerText(my$("dv"), "哈哈你好")
}
</script>