邂逅Javascript

LESSON 7 - HTML DOM (上)

HTML

Hyper Text Markup Language

DOM

Document Object Model

HTML DOM

定義了如何對HTML元素的取得、新增、刪除、修改的標準

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

HTML 基本架構

<tag>內容</tag>

 

有開有關 再開不難

(一定一定要記得關起來)

HTML標題

HTML Headings

<h1>h1</h1> <!-- 最大 -->
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6> <!-- 最小 -->

HTML段落

HTML Paragraphs

沒有p的第一段
沒有p的第二段

<p>第一個段落</p>
<p>第二個段落</p>

<!-- 換行 -->
可以透過這樣做換行<br />我是第二行

HTML連結

HTML Links

<a href="http://www.google.tw">網站連結</a>

HTML圖片

HTML Images

<img src="http://img.pubgame.tw/pubgame/webgame/
201508/66949fda-3ab2-46dd-97f1-01249d5ccc76.png" />

HTML屬性

HTML Attributes

// href屬性 => 連結URL
<a href="http://xxx.com"></a>

// src屬性 => 圖片連結
// width => 寬度
// height => 高度
<img src="http://myphoto.com" width="48" height="48" />

HTML樣式

HTML Styles

// Style通常只用來做簡單的樣式
// 複雜的樣式通常由CSS來做
<p style="color:blue">藍色的字</p>
<p style="color:red">紅色的字</p>

<p style="background-color:yellow">黃色的底</p>
// 色碼
<p style="background-color:#000000;color:#FFFFFF">黑底白字</p>

HTML 符號

HTML Symbols

HTML區塊

HTML Block - div

<!-- div, h1-h6, p => block-level element -->
<div style="background-color:yellow;">我是第一區</div>
<div style="background-color:red;">我是第二區</div>

HTML內嵌元素 - span

Inline element - span

<!-- span, a, img => inline element -->
<div style="background-color:yellow;">
我是第一區<span style="color:red;">比較重要的文字</span>
</div>
<div style="background-color:red;">我是第二區</div>

class vs id

// class不是唯一, id是唯一
<div class="bg-black color-blue">hello 1</div>
<div class="bg-black color-blue" id="red">hello 2</div>

// id是唯一, 因此這個不會生效
<div class="bg-black color-blue" id="red yellow">hello 3</div>

// CSS
.bg-black {
background-color: #000;
}

.color-blue {
color:blue
}

#red {
color: red;
}

#red {
color: yellow;
}

// HTML
<div id="this-id">我是value</div>

// Javascript
var value = document.getElementById("this-id").innerHTML;
console.log(value); // 我是value

簡單的DOM

有沒有更簡單的方式？

jQuery

write less, do more

一切都是從$開始

document.getElementById => $('#this-id')

id => #this-id

class => .this-class

// HTML
<div id="this-id">我是value</div>

// Javascript
var value = $('#this-id').text();
console.log(value);

jQuery取值 - text()

// HTML
<div id="this-id"></div>

// Javascript
$('#this-id').html('新的值進來了');

jQuery賦值 - html()

// HTML
<div id="wrap">
  <p>
    原本的我只有一行
  </p>
</div>

// Javascript
$('#wrap').append('<p>別擔心，加了我就有兩行</p>');

jQuery新增 - append()

HW

1. 請把之前寫過的9*9乘法表輸出到HTML上

Made with Slides.com