s7.htmlhtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#test{
background-color: red;
width:300px;
height:400px;
}
</style>
<body>
<div id="test">
sdsd
</div>
<script>
var mydiv=document.getElementById('test');
mydiv.onclick=function () {
console.log('wwwwwwwwwwwwww')
}
</script>
</body>
</html>
行爲 樣式相分離app
S8.htmldom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="AddEle1();" value="+">
<input type="button" onclick="AddEle2();" value="+">
<div id="i1">
<p><input type="text"></p>
<!--<hr/> 分隔線標籤-->
</div>
<script>
function AddEle1() {
//建立一個標籤
//將標籤添加到i1裏面
var tag="<p><input type='text'/></p>";
//注意:第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
document.getElementById('i1').insertAdjacentHTML("afterEnd",tag);
}
function AddEle2() {
//建立一個標籤
//將標籤添加到i1裏面
var tag=document.createElement('input'); //建立一個input標籤
tag.setAttribute('type','text')
tag.style.fontSize="16px";
tag.style.color='red';
var p=document.createElement('p'); //建立p標籤
p.appendChild(tag)
document.getElementById('i1').appendChild(p) //添加p標籤
}
</script>
</body>
</html>
</body>
</html>ide
S9.html函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id='f1' action="http://www.baidu.com">
<input type="text">
<input type="submit" value="提交">
<a onclick="submitForm();">提交1</a>
</form>
<script>
function submitForm() {
document.getElementById('f1').submit();
alert(123);
var v=confirm('肯定?');
console.log(v)
}
var obj=setInterval(function(){
console.log(1);
},1000)
clearInterval(obj);
</script>
</body>
</html>
提交表單
任何標籤經過DOM均可以提交表單
document.getElementById('f1').submit();
alert(); 彈窗
confirm('肯定?') 確認框 確認爲true 取消爲false
console.log(v) console口打印
location.href 獲取當前url
location.href="http://www.baidu.com" 設置當前url 用於作重定向 跳轉
location.href=location.href 刷新
location.reload(); 刷新
var obj=setInterval(function(){},5000) 定時器 5000毫秒執行一次函數
clearInterval(obj);清除定時器
setTimeout 定時器只執行一次
obj= setTimeout(function (){},5000)
清除定時器
claerTimeout(obj);this
S10.htmlurl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="status"></div>
<input type="button" value="刪除" onclick="deleteEle(); "/>
<script>
function deleteEle() {
document.getElementById('status').innerText="已經刪除";
obj= setTimeout(function () {
document.getElementById('status').innerText='';
},5000)
clearTimeout(obj)
}
</script>
</body>
</html>
document.getElementById('status').innerText="已經刪除"; 從新添加標籤內容spa
S11.htmlorm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300px">
<tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>2</td></tr>
<tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>2</td></tr>
<tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>
function t1(n) {
var mytrs=document.getElementsByTagName('tr')[n];
mytrs.style.backgroundColor='red';
}
function t2(n) {
var mytrs=document.getElementsByTagName('tr')[n];
mytrs.style.backgroundColor='';
}
</script>
</body>
</html>
dom0的方式
綁定事件的兩種方式:
a.直接標籤綁定 onclick='' onfocus=''
b.先獲取dom對象,而後進行綁定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
this 當前觸發事件的標籤
a.第一種綁定方式
<input id="i1" type="button" onclick="clickon(this)">
function clickon(self){
//self 代指當前點擊的標籤
}
b.第二種綁定方式
<input id="i1" type="button" >
document.getElementById('xxx').onclick=function(){
//this 代指當前點擊的標籤
}
c.第三種綁定方式
var mycontent=document.getElementById('i1');
mymain.addEventListener('click',function(){console.log('aaaaa')},false);
mymain.addEventListener('click',function(){console.log('bbbbb')},false);
做用域示例
var mytrs=document.getElementsByTagName('tr');
var len=mytrs.length;
for(var i=0;i<len;i++){
mytrs[i].onmouseover=function () {
this.style.backgroundColor="red";
}
mytrs[i].onmouseout=function () {
this.style.backgroundColor="";
}htm
S12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300px">
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
</table>
<script>
var mytrs=document.getElementsByTagName('tr');
var len=mytrs.length;
for(var i=0;i<len;i++){
mytrs[i].onmouseover=function () {
this.style.backgroundColor="red";
}
mytrs[i].onmouseout=function () {
this.style.backgroundColor="";
}
}
</script>
</body>
</html>
dom1的方式
this 光標指向那個tr就指向那個tr
S12-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="height: 48px;"></div>
<div style="width: 300px;">
<div class="item">
<div class="header" onclick="ChangeMenu(this);">菜單1</div>
<div class="content">
<div>內容1</div>
<div>內容1</div>
<div>內容1</div>
</div>
</div>
<div class="item">
<div class="header" onclick="ChangeMenu(this);">菜單2</div>
<div class="content hide">
<div>內容2</div>
<div>內容2</div>
<div>內容2</div>
</div>
</div>
<div class="item">
<div class="header" onclick="ChangeMenu(this);" >菜單3</div>
<div class="content hide">
<div>內容3</div>
<div>內容3</div>
<div>內容3</div>
</div>
</div>
<div class="item">
<div class="header" onclick="ChangeMenu(this);" >菜單4</div>
<div class="content hide">
<div>內容4</div>
<div>內容4</div>
<div>內容4</div>
</div>
</div>
</div>
<script>
function ChangeMenu(ths) {
var current_header=ths;
var item_list=current_header.parentElement.parentElement.children;
for (var i=0;i<item_list.length;i++){
var current_item=item_list[i];
current_item.children[1].classList.add('hide');
}
current_header.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html></title>
</head>
<body>
</body>
</html>
S12-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#test{
background-color: red;
width:300px;
height:400px;
}
</style>
<body>
<div id="test">
sdsd
</div>
<script>
var mydiv=document.getElementById('test');
mydiv.addEventListener('click', function(){console.log('aaaaa')},false);
mydiv.addEventListener('click', function(){console.log('bbbbb')},false);
</script>
</body>
</html>
dom2綁定方法
S13.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#main{
background-color: red;
width: 300px;
height:400px;
}
#content{
background-color: pink;
width: 150px;
height:200px;
}
</style>
<body>
<div id="main">
<div id="content"></div>
</div>
<script>
var mymain=document.getElementById('main');
var mycontent=document.getElementById('content');
mymain.addEventListener('click',function(){console.log('main')},false);
mycontent.addEventListener('click',function(){console.log('content')},false); //冒泡 底下的先出來 true的模式恰好相反
</script>
</body>
</html>
S14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function t1(age) { //age 先找到函數聲明表達式 function age()
console.log(age); //function age()
var age=27;
console.log(age); //27
function age() {}; //沒有調用,經過
console.log(age); // 27 沒有改變
}
t1(3);
</script>
</body>
</html>
active object ====>> AO 活動對象
1.形式參數
2.局部變量
3.函數聲明表達式
1.形式參數
AO.age=undefined
AO.age=3
2.局部變量
AO.age=undefined
3.函數聲明表達式 優先級最高
AO.age=function()