Bug倉庫 // 程式日記

9月 03 週日 201722:29
data屬性、屬性選取器、switch練習

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[data-state='grey']{
background-color: #eee;
}
[data-state='red']{
background-color: #f00;
}
</style>
</head>
<body>
<button id="btn" data-state='grey'>我是按鈕</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(e){
switch(e.target.getAttribute('data-state')){
case 'grey':
e.target.setAttribute('data-state','red');
break;
case 'red':
e.target.setAttribute('data-state','grey');
break;
}
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 03 週日 201722:29
data屬性、屬性選取器、switch練習

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[data-state='grey']{
background-color: #eee;
}
[data-state='red']{
background-color: #f00;
}
</style>
</head>
<body>
<button id="btn" data-state='grey'>我是按鈕</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(e){
switch(e.target.getAttribute('data-state')){
case 'grey':
e.target.setAttribute('data-state','red');
break;
case 'red':
e.target.setAttribute('data-state','grey');
break;
}
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(12)

個人分類：Javascript

▲top

9月 03 週日 201722:06
DOMContentLoaded和load的執行順序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
font-family: 微軟正黑體;
}
span{
color: darkRed;
}
em{
color:steelBlue;
font-style: normal;
}
</style>
</head>
<body>
<h3>
解析html結構<br>
加載外部css/js <br>
解析並執行js<br>
DOM樹建構完成<em>DOMContentLoaded</em>：<span id="DOMContentLoaded"></span><br>
加載圖片等外部文件<br>
頁面加載完畢<em>load</em>：<span id="load"></span><br>
</h3>
<p>從數字可以看出哪一個事件先載入</p>
<script type="text/javascript">
var i = 0;
function DOMContentLoaded(){
i++;
document.getElementById('DOMContentLoaded').innerHTML=i;
}
function load(){
i++;
document.getElementById('load').innerHTML=i;
}
window.addEventListener('DOMContentLoaded',DOMContentLoaded,false);
window.addEventListener('load',load,false);
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 03 週日 201722:06
DOMContentLoaded和load的執行順序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
font-family: 微軟正黑體;
}
span{
color: darkRed;
}
em{
color:steelBlue;
font-style: normal;
}
</style>
</head>
<body>
<h3>
解析html結構<br>
加載外部css/js <br>
解析並執行js<br>
DOM樹建構完成<em>DOMContentLoaded</em>：<span id="DOMContentLoaded"></span><br>
加載圖片等外部文件<br>
頁面加載完畢<em>load</em>：<span id="load"></span><br>
</h3>
<p>從數字可以看出哪一個事件先載入</p>
<script type="text/javascript">
var i = 0;
function DOMContentLoaded(){
i++;
document.getElementById('DOMContentLoaded').innerHTML=i;
}
function load(){
i++;
document.getElementById('load').innerHTML=i;
}
window.addEventListener('DOMContentLoaded',DOMContentLoaded,false);
window.addEventListener('load',load,false);
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(26)

個人分類：Javascript

▲top

9月 03 週日 201721:50
DOMNodeInserted事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="ul">
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ul>
<button id="btn">按我</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var li = document.createElement('li');
li.appendChild(document.createTextNode('呵呵'));
document.getElementById('ul').appendChild(li);
}
document.getElementById('ul').addEventListener('DOMNodeInserted',
function(){alert('有東西插進來了')},false);
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 03 週日 201721:50
DOMNodeInserted事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="ul">
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ul>
<button id="btn">按我</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var li = document.createElement('li');
li.appendChild(document.createTextNode('呵呵'));
document.getElementById('ul').appendChild(li);
}
document.getElementById('ul').addEventListener('DOMNodeInserted',
function(){alert('有東西插進來了')},false);
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(243)

個人分類：Javascript

▲top

9月 02 週六 201719:12
onchange、onsubmit、selectIndex、options[0]、checked等等表單相關功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: darkRed;
line-height: 40px;
}
</style>
</head>
<body>
<form id="form" action="http://www.google.com">
<select id="select">
<option>aa</option>
<option>bb</option>
<option>cc</option>
<option>dd</option>
</select>
<h2>
你選到第<span id="selectedIndex"></span>個，
值是<span id="value"></span>
</h2>
<input type="checkbox" id="checkbox">把我打勾才能送出喔<br>
<span id="youshouldcheck"></span><br>
<input type="submit" >
</form>
<script type="text/javascript">
document.getElementById('select').onchange=function(){
document.getElementById('selectedIndex').innerHTML=this.selectedIndex+1;
document.getElementById('value').innerHTML=this.options[this.selectedIndex].value;
}
document.getElementById('form').onsubmit=function(e){
e.preventDefault();
if(!document.getElementById('checkbox').checked){
document.getElementById('youshouldcheck').innerHTML='你應該要打勾喔';
}else{
e.target.submit();
}
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 02 週六 201719:12
onchange、onsubmit、selectIndex、options[0]、checked等等表單相關功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: darkRed;
line-height: 40px;
}
</style>
</head>
<body>
<form id="form" action="http://www.google.com">
<select id="select">
<option>aa</option>
<option>bb</option>
<option>cc</option>
<option>dd</option>
</select>
<h2>
你選到第<span id="selectedIndex"></span>個，
值是<span id="value"></span>
</h2>
<input type="checkbox" id="checkbox">把我打勾才能送出喔<br>
<span id="youshouldcheck"></span><br>
<input type="submit" >
</form>
<script type="text/javascript">
document.getElementById('select').onchange=function(){
document.getElementById('selectedIndex').innerHTML=this.selectedIndex+1;
document.getElementById('value').innerHTML=this.options[this.selectedIndex].value;
}
document.getElementById('form').onsubmit=function(e){
e.preventDefault();
if(!document.getElementById('checkbox').checked){
document.getElementById('youshouldcheck').innerHTML='你應該要打勾喔';
}else{
e.target.submit();
}
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(9)

個人分類：Javascript

▲top

9月 02 週六 201718:41
e.keyCode與keyup事件，關於你鍵盤打的字

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: darkRed;
}
</style>
</head>
<body>
<input type="text" id="type">
<h2>您輸入了<span id="remind"></span>個字</h2>
<h2>您輸入的ASCII碼為 <span id="keyCode"></span> </h2>
<script type="text/javascript">
document.getElementById('type').onkeyup=function(e){
document.getElementById('keyCode').innerHTML=e.keyCode;
document.getElementById('remind').innerHTML=e.target.value.length;
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 02 週六 201718:41
e.keyCode與keyup事件，關於你鍵盤打的字

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: darkRed;
}
</style>
</head>
<body>
<input type="text" id="type">
<h2>您輸入了<span id="remind"></span>個字</h2>
<h2>您輸入的ASCII碼為 <span id="keyCode"></span> </h2>
<script type="text/javascript">
document.getElementById('type').onkeyup=function(e){
document.getElementById('keyCode').innerHTML=e.keyCode;
document.getElementById('remind').innerHTML=e.target.value.length;
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(10)

個人分類：Javascript

▲top

Bug倉庫 // 程式日記已經搬家到 https://bugswarehouse.blogspot.tw/ 了喔

文章搜尋

文章搜尋

文章分類

伺服器架設 (1)

伺服器架設 (1)

前端框架 (2)

前端框架 (2)

HTML與開發工具 (2)

HTML與開發工具 (2)

CSS與framework (4)

CSS與framework (4)

JS與函式庫 (3)

JS與函式庫 (3)

後端框架 (1)

後端框架 (1)

文章分類

伺服器架設 (1)

伺服器架設 (1)

前端框架 (2)

前端框架 (2)

HTML與開發工具 (2)

HTML與開發工具 (2)

CSS與framework (4)

CSS與framework (4)

JS與函式庫 (3)

JS與函式庫 (3)

後端框架 (1)

後端框架 (1)

最新文章

最新文章

個人資訊

個人資訊

文章精選

文章精選

熱門文章

熱門文章

最新留言

最新留言

動態訂閱

動態訂閱

誰來我家

誰來我家

參觀人氣

參觀人氣