<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day2</title>
<style>
/* *{
border: 0;
padding: 0;
} */
ul{
border: 0;
padding: 0;
}
#imggallery li{
list-style: none;
display: inline-block;
}
#img2{
width: 640px;
height: 400px;
}
.hd {
height: 50px;
width: 100%;
clear: both;
}
.hd span{
box-sizing: border-box;
float: left;
height: 50px;
width: 100px;
border: 1px solid black;
line-height: 50px;
text-align: center;
margin-right: -1px; /* 相邻边框消除 */
}
.hdOn{
background-color: pink;
}
.bd{
width: 400px;
height: 400px;
}
ol{
list-style: none;
padding: 0;
margin: 0;
}
ol li{
display: none;
}
.bdOn{
background-color: pink;
display: block;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<!-- 禁用文本框 -->
<input type="button" value="禁用" id="btn1">
<input type="text" name="" id="tx1">
<script>
document.getElementById("btn1").onclick = function(){
var tx1 = document.getElementById("tx1");
tx1.disabled = true;
};
</script>
<!-- 阻止超链接跳转 在点击事件中用return false 阻止默认的浏览器点击事件，也可以添加新事件-->
<a href="http://www.baidu.com" onclick = "return false">百度</a>
<a href="http://www.baidu.com" onclick = "alert('哈哈'); return false">百度</a>
<a href="http://www.baidu.com" onclick="f1()">百度</a> <!-- 这样不能阻止跳转，因为f1结果为false，而不是return false -->
<a href="http://www.baidu.com" onclick="return f1()">百度</a> <!-- 正常 -->
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
function f1(){
alert("嘻嘻");
return false;
}
document.getElementById("ak").onclick = function(){
alert("嘻嘻");
return false;
};
</script>
<!-- 可以创建一个common.js表示公共的js文件并引用，里面存放一些公共的函数 -->
<!-- 相册案例 -->
<ul id = "imggallery">
<li><a href="images/1.jpg" ><img src="images/1-small.jpg" alt=""></a></li>
<li><a href="images/2.jpg" ><img src="images/2-small.jpg" alt=""></a></li>
<li><a href="images/3.jpg" ><img src="images/3-small.jpg" alt=""></a></li>
<li><a href="images/4.jpg" ><img src="images/4-small.jpg" alt=""></a></li>
</ul>
<div id="dv1">
<img src="" alt=" " id="img2">
</div>
<script src="common.js">//创建一个common.js表示公共的js文件并引用，里面存放一些公共的函数</script>
<script>
var imgObj = my$("imggallery").getElementsByTagName("a");
console.log(imgObj);
for(var i = 0; i < imgObj.length; i++){
imgObj[i].onclick = function(){
my$("img2").src = this.href;
return false;
};
}
</script>
<!-- 案例：改变背景颜色 -->
<input type="button" value="变色" id="btn2">
<ul id="uu">
<li>1234567</li>
<li>1234567</li>
<li>1234567</li>
<li>1234567</li>
<li>1234567</li>
<li>1234567</li>
<li>1234567</li>
<li>1234567</li>
</ul>
<script>
my$("btn2").onclick = function(){
var liObj = my$("uu").getElementsByTagName("li");
for (i = 0; i < liObj.length; i++){
// if (i%2==0) {
// liObj[i].style.backgroundColor = "red";
// }else{ //奇红偶黄注意i从零开始
// liObj[i].style.backgroundColor = "yellow";
// }
liObj[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
}
};
</script>
<!-- onmouseover事件：鼠标进入 onmouseout事件：鼠标离开 -->
<ul id="uu2">
<li>fasfgaaabzc</li>
<li>fasfgaaabzc</li>
<li>fasfgaaabzc</li>
<li>fasfgaaabzc</li>
<li>fasfgaaabzc</li>
<li>fasfgaaabzc</li>
<li>fasfgaaabzc</li>
<li>fasfgaaabzc</li>
</ul>
<script>
var liObj2 = my$("uu2").getElementsByTagName("li");
for (i = 0; i < liObj2.length; i++) {
liObj2[i].onmouseover = function(){
this.style.backgroundColor = "yellow";
};
liObj2[i].onmouseout = function(){
this.style.backgroundColor = "";
};
}
</script>
<!-- 一些其他的获取元素的方式 -->
<!-- 根据name属性值获取表单里的标签元素：getElementsByName() -->
<!-- 根据类名获取标签元素：getElementsByClassName() -->
<!-- querySelector(选择器)根据选择器返回第一个元素 -->
<!-- querySelectorAll(选择器)根据选择器返回所有元素伪数组 -->
<!-- 一些其他DOM事件 -->
<!-- onfocus获得焦点事件 -->
<!-- onblur失去焦点事件 -->
<!-- 案例：搜索框 -->
<input type="text" value="请输入搜索内容" id="sousuo" style="color:gray; outline: none;">
<script>
var txt = document.querySelector("#sousuo"); //与document.getElementById("sousuo")效果一样
txt.onfocus = function(){
if (this.value == "请输入搜索内容") {
this.value = "";
this.style.color = "black";
}
};
txt.onblur = function(){
if(this.value == ""){ //这里改成this.value.length == 0更好，因为比较字符串更浪费资源
this.value = "请输入搜索内容";
this.style.color = "gray";
}
};
</script>
<!-- innerText 与 innerHTML -->
<div id = "div2" style="width: 100px;height: 100px;border: 1px dotted red;">
</div>
<script>
my$("div2").innerText = "<p>这是一个p</p>"; //innerText不能添加标签，只能设置文本
my$("div2").innerHTML = "<p>这是一个p</p>"; //innerHTML可以设置新标签，当然也可以设置文本内容
console.log(my$("div2").innerText); //innerText只能获取文本内容
console.log(my$("div2").innerHTML); //innerHTML可以获取内部的标签和文本
</script>
<!--innerText 和textContent的区别差异：
1. textContent不会理会html格式，会输出隐藏的文本
2. innerText会根据标签里面的样式输出显示出的文本
3.兼容性：
innerText 谷歌 火狐 IE8都支持
textContent IE8不支持
-->
<!-- 兼容代码：如果有的方法浏览器不支持的话，那么得到的是undefined
根据这个原理编写兼容代码
以textContent和innerText为例
-->
<script>
function setInnerText(element, text){ //编写一个设置文本内容的函数
if(typeof element.textContent == "undefined"){
element.innerText = text; //如果不支持textContent，则利用innerText
}else{
element.textContent = text;//支持则利用textContent
}
}
function getInnerText(element){ //编写一个获取文本内容的函数
if(typeof element.textContent == "undefined"){
return element.innerText; //如果不支持textContent，则利用innerText
}else{
return element.textContent;//支持则利用textContent
}
}
</script>
<!-- 可以自定义Html标签中没有的属性--自定义属性，用来存放一些数据
但是自定义属性不能通过DOM得到的标签对象直接获得，需要使用getAttribute("自定义属性")来获取
也可以在OMD对象中设置自定义属性，如果使用.的方式设置，则不能在HTML中添加属性，只能添加到DOM对象上，
可以使用setAttribute("自定义属性名","自定义属性值")来设置，会添加到Html对象中
可以使用removeAttribute("自定义属性名")来移除html标签中的自定义属性，也可以移除HTML固有的属性
-->
<h3>点击英雄查看终结技</h3>
<p terminus = "重力喷涌" style="cursor:pointer;">查莉亚</p>
<p terminus = "原始暴怒" style="cursor:pointer;">温斯顿</p>
<p terminus = "鸡飞狗跳" style="cursor:pointer;">路霸</p>
<p terminus = "裂地猛击" style="cursor:pointer;">大锤</p>
<script>
var pObj = document.getElementsByTagName("p");
for(i = 0; i<pObj.length; i++){
pObj[i].onclick = function(){
// alert(this.terminus); //这样不能得到自定义属性值
alert(this.getAttribute("terminus")); //这样可以
}
}
</script>
<!-- 案例：切换标签改变 -->
<div class="hd" id="hd">
<span class="hdOn">新闻</span>
<span>娱乐</span>
<span>体育</span>
<span>科技</span>
</div>
<div class="bd" id="bd">
<ol>
<li class="bdOn">这是新闻模块</li>
<li>这是娱乐模块</li>
<li>这是体育模块</li>
<li>这是科技模块</li>
</ol>
</div>
<script>
var hds = document.getElementById("hd").getElementsByTagName("span");
var bds = document.getElementById("bd").getElementsByTagName("li");
//循环遍历给hds添加点击事件
for (var i = 0; i < hds.length; i++) {
hds[i].setAttribute("num",i); //设置一个自定义属性为索引
hds[i].onclick = function(){
//1.所有hd的模块样式清零
//2.被点击的模块修改样式
for(j = 0;j <hds.length; j++){
hds[j].className= "";
}
this.className = "bdOn";
//1.所有的bd模块隐藏
//2.对应的bd模块修改样式
for(k = 0;k < hds.length; k++){
bds[k].className = "";
}
bds[this.getAttribute("num")].className = "bdOn" //无法获得对应的索引？，办法：利用setAttribute设置一个自定义属性存放索引，然后获取this的该属性值以利用
};
}
</script>
</body>
</html>
