函數function();
1.函數定義：只是告訴系統有這個函數，不會實際執行；
2.函數調用：真正執行函數裏面的代碼；
//函數定義
function foo(){
alert('abc');
}//函數調用
foo()；if判斷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 40px;
background: red;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="">點擊</div>
<div style="display: none;" id="box">112</div>
<p>11111</p>
</body>
<script type="text/javascript">
var oDivs=document.querySelectorAll('div');
oDivs[0].οnclick=function(){
if(oDivs[1].style.display=='block'){
oDivs[1].style.display='none';
}else{
oDivs[1].style.display='block';
}
}
</script>
</html>爲a鏈接添加js
<a href="javascript:;"></a>
className的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{
width: 300px;
height: 300px;
border: 1px solid black;
}
.box{
background: red;
}
input{
width: 80px;
height: 40px;
}
</style>
</head>
<body>
<input type="button" name="" id="" value="背景變紅"/>
<div id="a" class="a">
</div>
</body>
<script type="text/javascript">
var div=document.getElementById('a');
var btn=document.querySelector('input');
btn.οnclick=function(){
div.className='box';
}
</script>
</html>js操作的樣式是放在行間的；優先級在id之前；
提取行間事件
如果js寫在head裏面，就要加window.onload表示頁面加載完才執行js；
行爲/樣式/結構分離
不要在行內加這些東西；
獲取一組元素
getElementsByTagName();
循環while
while（條件成立）{
執行語句；
}
循環for
for（var i=0; 條件；i++）{
執行語句;
}
index自定義屬性
瀏覽器不支持，因爲它不是標準的，但可以用js引入；
簡單日曆innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
}
.calendar{
width: 240px;
height: 320px;
margin: 200px auto;
background: silver;
overflow: hidden;
}
ul{
width: 168px;
height: 216px;
margin: 0 auto;
margin-top: 20px;
}
ul li{
width: 44px;
height: 42px;
background: sandybrown;
margin: 5px;
line-height: 21px;
text-align: center;
float: left;
border: 1px solid black;
cursor: pointer;
}
.text{
width: 166px;
height: 60px;
border: 1px solid wheat;
margin: 0 auto;
margin-top: 5px;
background: white;
}
.active{
background: white;
}
</style>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active">
<h2>1</h2>
<p>1月</p>
</li>
<li>
<h2>2</h2>
<p>2月</p>
</li>
<li>
<h2>3</h2>
<p>3月</p>
</li>
<li>
<h2>4</h2>
<p>4月</p>
</li>
<li>
<h2>5</h2>
<p>5月</p>
</li>
<li>
<h2>6</h2>
<p>6月</p>
</li>
<li>
<h2>7</h2>
<p>7月</p>
</li>
<li>
<h2>8</h2>
<p>8月</p>
</li>
<li>
<h2>9</h2>
<p>9月</p>
</li>
<li>
<h2>10</h2>
<p>10月</p>
</li>
<li>
<h2>11</h2>
<p>11月</p>
</li>
<li>
<h2>12</h2>
<p>12月</p>
</li>
</ul>
<div class="text">
<h2>1月活動</h2>
<p>快過年了，大家快回家吧！</p>
</div>
</div>
</body>
<script type="text/javascript">
(function(){
var arry=['快過年了，大家快回家吧！','2月龍泰用它','3月大家上學去','4月我們要幹嘛','5月我們要幹嘛','6月龍泰用它','7月大家上學去','8月我們要幹嘛','9月我們要幹嘛','10月龍泰用它','11月大家上學去','12月我們要幹嘛'];
var tab=document.getElementById('tab');
//console.log(tab);
var lis=tab.getElementsByTagName('li');
var text=tab.getElementsByTagName('div')[0];
//console.log(text);
for(var i=0; i<lis.length;i++){
lis[i].index=i;
lis[i].οnmοuseοver=function(){
for(var i=0; i<lis.length;i++){
lis[i].className='';
}
this.className='active';
text.innerHTML='<h2>'+(this.index+1)+'月活動</h2><p>'+arry[this.index]+'</p>';
}
}
})();
</script>
</html>
