IOS HTML+CSS+JS 總結

1、HTML + CSS

1.能看到標籤的結構
* 父子關係
<p>
    <span>123</span>
</p>

* 屬性
<img src="images/01.png">

2.瞭解元素（標籤）的類型
1> block：塊級
* 獨佔一行
* 能隨意修改尺寸

2> inline：行內
* 多個行內元素能顯示在同一行
* 不能修改尺寸，尺寸取決於內容的多少

3> inline-block：行內-塊級
* 多個行內-塊級元素能顯示在同一行
* 能隨意修改尺寸
* 不設置尺寸，默認的尺寸取決於內容的多少

3.瞭解常見的屬性
1> font-size : 字體大小
2> color: 文字顏色
3> background: 背景
4> display: 顯示的類型（block、inline、inline-block、none）
5> padding
6> margin
7> border
8> width
9> height

4.脫離標準流
1> float: left\right
2> 絕對定位
* position : absolute;
* right: 0px;
* bottom: 0px;
// 右下角
// 若是想相對於父節點進行定位，最好設置父節點的position爲relative
// 原則：子絕父相

5.常見的選擇器
1> 標籤選擇器：tagName
2> 類選擇器：.className
3> id選擇器：#id
4> 後代選擇器(多個選擇器之間用空格隔開)：tagName .className .className tagName
5> 羣組選擇器(多個選擇器之間用逗號,隔開)：tagName, .className, tagName, .className
6> 直接後代選擇器(多個選擇器之間用大於號>隔開)：tagName > .className > .className > tagName
7> 屬性選擇器：tagName[arrtName="attrValue"]
8> 選擇器組合（多個選擇器粘在一塊兒）：tagName.className
9> 僞類
* tagName:hover
* .className:hover
* tagName.className tagName:hover

6.進階
* 百度

2、JS

1.節點的基本操做（CRUD）
* C（Create）：
var div = document.createElement('div');
document.body.appendChild(div);

* R（Read）：
var div = document.getElementById('logo');
var div = document.getElementsByTagName('div')[0];
var div = document.getElementsByClassName('logo')[0];

* U（Update）：
var img = document.getElementById('logo');
img.src = 'images/01.png';

* D（Delete）：
var img = document.getElementById('logo');
img.parentNode.removeChild(img);

2.事件綁定
1> 推薦作法
var button = document.getElementById('login');
button.onclick = function() {
    // 實現點擊按鈕想作的事情
};

2> 直接寫在標籤內部
<button onclick="var age = 20; alert(age);">登陸</button>

3> 不經常使用
function login() {
    // 實現點擊按鈕想作的事情
}

var button = document.getElementById('login');
button.onclick = login;

3、jQuery

1.經過選擇器查找元素
* $('選擇器')
* jQuery支持絕大部分的CSS選擇器

2.屬性操做
* 得到屬性：$('選擇器').attr('屬性名');
* 設置屬性：$('選擇器').attr('屬性名', '屬性值');

3.顯示和隱藏
* 顯示：$('選擇器').show();
* 隱藏：$('選擇器').hide();
* 顯示和隱藏來回切換：$('選擇器').toggle();

4.事件綁定
* 點擊事件(經常使用)
$('選擇器').click(function() {
    // 實現點擊按鈕想作的事情
}).hide();
// 先給節點綁定事件，再隱藏

* 點擊事件(不經常使用)
function login() {
    // 實現點擊按鈕想作的事情
}
$('選擇器').click(login);

4、參考手冊

1.www.w3school.com.cn
2.http://www.w3school.com.cn/jquery/jquery_reference.asp
3.http://www.php100.com/manual/jquery/

5、HTML5框架（大部分都是爲移動設備而寫的）

1.概念
* 有了HTML5框架，編寫簡易的幾行JS代碼，就能實現很是漂亮的手機界面
* HTML5框架封裝了大量的DOM節點操做，封裝了大量的CSS樣式
* 對JS的要求比較高，對CSS的要求並不高

2.常見的HTML5框架
* PhoneGap
* jQuery Mobile
* sencha-touch