|
还在学习中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul,li{
margin: 0;
padding: 0;
}
.red{
color: white;
background-color: red;
}
p{
border: 1px solid green;
background-color: yellow;
margin: 5px;
}
#outer{
width: 450px;
margin: 10px auto;
height: auto;
}
#tab{
background-color: #000;
border: 1px solid #000;
overflow: auto; /* 因为内容是浮动的所以不会占据位置导致默认高度为0，无法显示出来，所以增加此属性 */
}
#tab li{
float: left;
color: #fff;
height: 30px;
list-style-type: none;
padding: 0 20px;
}
#tab li.current{
color: #000;
background-color: #ccc;
}
#content ul{
display: none;
}
</style>
</head>
<body>
<!--DOM操作
1.先遍历完数组，然后一次性在DOM上操作
2.大范围操作先把容器隐藏，在其中操作完成后，再显示
3.样式操作不要主意修改属性，直接替换class
4.用变量保存DOM属性，而不是多次获取
-->
<ul id="nav">
</ul>
<script type="text/javascript">
var list = document.getElementById("nav");
var fragment = document.createDocumentFragment();
for(var i=0; i<6; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("option"+i))
fragment.appendChild(item);
}
list.appendChild(fragment);
</script>
<!--按钮功能实现推荐方法-->
<button id="btn" type="button">ok</button>
<script type="text/javascript">
function showFn(){
alert("Hello World")
}
function show(){
alert("Thankyou")
}
var btn = document.getElementById("btn");
btn.addEventListener("click",showFn,false);
btn.addEventListener("click",show,false);
//btn.removeEventListener('click',showFn,false);
//为了兼容IE8以下版本
//btn.attachEvent("onclick",showFn);
//btn.detachEvent("onclick",showFn);
</script>
<!--DOM节点对象的事件处理-->
<script type="text/javascript">
var fragment = document.createDocumentFragment();
for(var i=0; i<5; i++){
var p = document.createElement("p");
p.onmouseover = function(){
this.className = "red";
}
p.onmouseout = function(){
this.className="";
}
var text = document.createTextNode("行内元素"+ i);
p.appendChild(text)
fragment.appendChild(p)
}
document.body.appendChild(fragment);
</script>
<!--新的选择方法和遍历方式-->
<p>第一</p>
<div id="t">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
</div>
<p>第二</p>
<script type="text/javascript">
var t = document.querySelector("#t");//id属性加＃，class属性加.
//alert(t.innerHTML);
console.log(t.childElementCount);//4
console.log(t.firstElementChild);//<a href="">1</a>
console.log(t.lastElementChild);//<a href="">4</a>
console.log(t.previousElementSibling);//<p>第一</p>
console.log(t.nextElementSibling);//<p>第二</p>
</script>
<!--学会使用classlist-->
<div id="pq" class="aa ss dd ff"></div>
<button type="button" onclick="show()">show</button>
<script type="text/javascript">
function show(){
var pq = document.querySelector("#pq");
pq.classList.add("gg");
alert(pq.classList);//aa ss dd ff gg
pq.classList.remove("aa");
alert(pq.classList);//ss dd ff gg
alert(pq.classList.contains("bb"));//false
alert(pq.classList.toggle("pp"));//true
//关于toggle用法，如果pp存在则删除返回fasle，如果pp不存在则添加，返回true
alert(pq.classList)//ss dd ff gg pp
}
</script>
<!--简易选项框-->
<div id="outer">
<ul id="tab">
<li class="current">第一</li>
<li>第二</li>
<li>第三</li>
</ul>
<div id="content">
<ul style="display: block;">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var oli = document.querySelector("#tab").getElementsByTagName("li");
var oul = document.querySelector("#content").getElementsByTagName("ul");
for(var i=0; i<oli.length; i++){
oli[i].index = i
oli[i].onmouseover = function(){
for(var j=0; j<oli.length; j++){
oli[j].className="";
}
this.className="current";
for(var j=0; j<oli.length; j++){
oul[j].style.display = "none";
}
oul[this.index].style.display = "block"
}
}
}
</script>
</body>
</html>
|