復習日記-HTML+css+js+jquery
一：
1.HTML書寫規則：
超文本：超越一般文本，描述文本的字體、顏色、圖片
標記：標簽
文件後綴名： .html(推薦） 或者 .htm
屬性：key = "value"推薦用引號
路徑的寫法：
相對路徑：
寫法一：./（當前路徑）或者什麽也不寫，都代表當前目錄
寫法二：../（上一級目錄）
絕對路徑：
1.帶協議的絕對路徑
http://www.itheima.com
2.不帶協議的絕對路徑
大小的寫法：
像素：123px
百分比：20%
meta
元信息
HTML5的寫法：
<meta charset="UTF-8">指定瀏覽器用什麽編碼打開此頁面
HTML4的寫法：
<meta http-equiv=”Content-Type“ content="text/html; charset="UTF-8"/>指定瀏覽器用什麽編碼打開此頁面
2.顏色的取值：(RGB紅綠藍,光的三元色)
方式一： #xxxxxx x為16進制 eg: color="#ff0000"
方式二：英文單詞 eg: color="red"
3.target默認屬性;_self在本身頁面打開
4.form默認get提交
若要提交單選框、復選框或者下拉框中的值，需要給value屬性
單/復/的默認值寫法：
checked="checked"（推薦）或者只寫checked
下拉選擇默認值寫法：
selected="selected"
5.get和post的區別：
1.get請求會把請求參數追加到地址欄
2.get請求參數大小有限制，post沒有限制
3.post相對於get請求安全些
6.設置input="disable/readonly"，則該文本框參數不會提交
7.隱藏於hidden可以將hidden參數提交到後臺
二：
css相關：渲染
層疊樣式表
作用：
渲染頁面
提高工作效率
格式：
選擇器{屬性1:值;屬性2:值}
後綴名：
.css 獨立的css文件
和html元素的整合
方式一：內聯樣式表 通過標簽的style屬性設置樣式，在head中有style標簽
方式二：內部樣式表 在當前頁面中直接定義使用的樣式
方式三：外部樣式表 通過link標簽引入外部css文件
div:塊標簽(獨自占一行)
span:行內標簽
選擇器：
id選擇器
要求：
HTML標簽必須有id屬性且有值，id是唯一的
在css中通過#+id值書寫樣式：#id1{...}
class選擇器
HTML標簽必須有class屬性且有值
在css中通過.class值書寫樣式：#class1{...}
元素選擇器
直接用元素名即可：eg: p{...}
派生的選擇器：
屬性選擇器
要求：
HTML元素必須有一個屬性且有值<xxx nihao="wohenhao"/>
css中通過下面的方式使用
元素名[屬性="屬性值"] {...}
eg:xxx[nihao="wohenhao"] {color : red}
後代選擇器
選擇器 後代選擇器{...} 在滿足第一個選擇器的條件下找後代的選擇器，給滿足條件的元素添加樣式
了解的選擇器
錨偽類選擇器
在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。
a:link{color: #FF0000} /* 未訪問的鏈接 */常用a:visited{color: #00FF00} /* 已訪問的鏈接 */a:hover{color: #FF00FF} /* 鼠標移動到鏈接上 */常用a:active{color: #0000FF} /* 選定的鏈接 */
提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。
提示：在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。
提示：偽類名稱對大小寫不敏感。
選擇器使用小結：
id:一個元素
class:一類元素
元素選擇器：一種元素
屬性選擇器：元素選擇器特殊用法
使用的時候註意：
若多個樣式作用於一個元素時，不同的樣式會疊加，相同的樣式會通過最近原則選擇樣式
若多個選擇器作用於一個元素時，越特殊優先級越高id優先級最高
屬性（了解）
字體：
font-family:設置字體（隸書），設置字體家族
font-size:設置字體大小
font-style:設置字體風格（例如：斜體）
文本;改變文本的顏色，字符間距等
color：文本顏色
line-height：設置行高
text-decoration:向文本添加修飾
text-align:文本對齊方式
列表：
list-style-type:設置列表項的類型 例如： a 1 實心圓
list-style-image:設置圖片為列表項類型，使用url函數 url("圖片地址")
背景：
background-color:背景顏色
background-image:背景圖片 url
尺寸：
width
height
浮動;
float:可選值left、right
clear：設置元素的兩邊是否允許有其它浮動元素，可選值：left(左邊不允許)、right(右邊...)、both(兩邊均不允許)等
display:設置是否以及如何顯示元素
none：此元素不會顯示
block：此元素顯示為塊級元素，前後帶換行符
inline：此元素顯示為內聯元素
框模型：
一個元素外面有padding(內邊距) border margin(外邊距)
padding:元素和邊框的距離
margin：元素最外邊的空白
上面三個屬性都有簡寫屬性，順序：上右下左，若只寫一個值，代表四個方向值均為該值，若只寫兩個值，代表方向值均為該值，
三：JavaScript
組成部分：
ECMAScript：js基礎語法
Bom：瀏覽器對象模型
Dom：文檔對象模型
作用：
修改HTML頁面的內容、樣式、表單驗證、操作瀏覽器任何東西
註意：
js可以在頁面上直接寫，也可以獨立出去寫成一個庫，例如jQuery，獨立出去的文件使用.js後綴名
js和HTML的整合
方式一：頁面直接寫--將js代碼放在script標簽中，<script></script/>標簽原則上可以存放在任意位置，一般放在head標簽中
方式二：獨立的js文件，通過script標簽的src屬性引入
js變量聲明：
var 變量名 = 初始值；
註意：
var可以省略，建議不要省略
一行要以分號結尾，最後一行的分號可以省略，建議保留
js的數據類型：
原始類型5種：
NULL：undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用於表示尚未存在的對象。如果函數或方法要返回的是對象，
那麽找不到該對象時，返回的通常是 null。
String：字符型
Number：數字
Boolean：布爾
Undefined：沒有初始化
通過typeof運算符可以判斷一個值或者變量是否屬於原始類型以及屬於哪個原始類型
typeof 變量 | 值 eg: var age=18 typeof age/18
對變量或值調用 typeof 運算符將返回下列值之一：
- undefined - 如果變量是 Undefined 類型的
- boolean - 如果變量是 Boolean 類型的
- number - 如果變量是 Number 類型的
- string - 如果變量是 String 類型的
- object - 如果變量是一種引用類型或 Null 類型的
通過typeof運算符可以判斷一個值或者變量是否屬於原始類型以及屬於哪個原始類型
typeof 變量 | 值 eg: var age=18 typeof age/18
為什麽 typeof 運算符對於 null 值會返回 "Object"。這實際上是 JavaScript 最初實現中的一個錯誤，然後被 ECMAScript 沿用了。
現在，null 被認為是對象的占位符，從而解釋了這一矛盾，但從技術上來說，它仍然是原始值。
引用類型：
js:事件驅動函數
函數定義格式：
方式一：function 函數名(參數) {
}
方式二：var 函數名 = function(參數) { 函數體}
註意：js中不需要聲明返回值，參數也不需要添加類型，eg:function add(a,b) { alert(a+b); } 函數調用：add(1,2);
js事件
常見的事件：
單擊：onclick
表單提交：onsubmit 加在form表單上的onsubmit="return 函數名()" 註意函數返回值必須為Boolean類型
頁面加載：onload
頁面關閉：onunload
js事件和函數的綁定
方式一：通過標簽的事件屬性 eg: <xxx onclick="函數名(參數)"></xxx>
方式二：通過給元素派發事件來綁定
document.getElementById("id值").onclick = function(參數) { 函數體 }
document.getElementById("id值").onclick = 函數名
註意：因為js是直譯式語言，即從上到下依次翻譯，因此內存中存在某元素時才可以給其派發事件，解決方式
1.將方式二的js代碼放在HTML頁面最下面
2.在頁面加載成功後再運行方式二的js代碼，即使用onload事件
js獲取元素：
方式一：
var obj = document.getElementById("id值")；
獲取元素value值：obj.value;
獲取元素標簽體中的內容：obj.innerHTML;
js實現輪播圖：
BOM中window對象的定時器方法
定時器：
var id = setInterval(code,毫秒數)：每隔指定的毫秒數執行一次函數，周期執行
var id = setInterout(code,毫秒數)：延遲指定的毫秒數執行一次函數，單次執行
清楚定時器：
clearInterval(id);
clearTimout(id);
補充：
運算符：
比較運算符：> >= < <=
若兩邊都是數字直接比較大小；
若一邊為數字，另一邊為字符串形式的數字，則先轉換為數字再比較
若一邊為數字，另一邊為字符串，則返回false
若兩邊均是字符串，則比較ASCII碼
等性運算符 == ===
==：只判斷值是否相等
===：不僅判斷值是否相等，還判斷類型是否相等
js操作css屬性
事件是Event，css樣式自然是Style，在手冊中可以找到操作樣式屬性的語句
eg；document.getElementById("id”).style.屬性="值"
屬性就是css中的屬性。如果有-號，例如background-color只需將-刪除，後面第一個字母大寫即可。及backgroundColor
註意：只要是window對象的屬性和方法，window都可以省略掉，eg：window.omload = onload
bom總結
所有的瀏覽器都有5個對象
window：窗口
location：定位信息
history：歷史信息
window對象詳解：
如果文檔包含框架(frame或iframe)，瀏覽器會為整個HTML文檔創建一個window對象，再為每一個frame創建一個額外的window對象
常用的屬性:
通過window可以獲取其它四個對象 window.location = location ...
常用的方法：
消息框：
alert("...")， 警告框
confirm("...")，確認框，返回值為Boolean
prompt("...’)，輸入框，返回值為輸入的內容
定時器
打開和關閉
open(url)：打開
close()：關閉
location對象：定位信息
常用屬性：
href:獲取或者設置當前頁面的url(定位信息)
location.href; 獲取url
location.href="...";設置url，相當於a標簽
history對象：瀏覽歷史
常用方法：
back()：加載history列表中前一個url
forward()：加載history列表中下一個url
go(int)：加載history列表中某個具體頁面
go(-1) = back()
go(1) = forward()
註意：js調用函數的參數，this用法：
function login（a）{
alert(a);
}
<xxx onblur = "login(this.value)"/>
此處的this代表這個元素xxx，即代表當前dom對象，
這麽做就不用在login中寫document.get..ById(id)來獲取value值，通過傳參獲取
事件總結：
常見的事件：
焦點事件：onfoucs、onblur
表單事件：onsubmit、onchange
頁面加載事件：onload
鼠標事件：onclick（還有雙擊事件，鼠標按下等等）、鼠標懸停(onmouseover)、鼠標移出(onmouserout)
阻止默認事件發生，Event中的方法
阻止瀏覽器的事件傳播
幾個js經典案例：
1.表格隔行換色：onload之後獲取所有tr，放在js集合裏，根據arr.length%2的結果設置樣式style
2.全選/全不選：獲取onclick的checked屬性值，取得所有復選框放置在數組中，依次設置checked屬性值
dom(文檔對象模型)：
當瀏覽器接受到HTML代碼時，瀏覽器會將所有的代碼裝載到內存中，形成一棵樹，這棵樹有四種節點
Node接口有以下四種實現類：
1.文檔節點 document
2.元素節點 element
3.屬性節點 attributed
4.文本節點 text
獲取節點：
通過document可以獲取其它結點：
常用方法：
document.getElementById("id") ：獲取一個特定元素
...類似方法還有通過TagName、ClassName、Name
設置獲取節點的value屬性
dom對象.value;獲取
dom對象.value="";設置
設置獲取結點的標簽體：
dom對象.innerHTML;獲取
dom對象.innerHTML="";設置
設置獲取節點的style屬性
dom對象.style.屬性;獲取
dom對象.style.屬性=“”；設置
總結：獲取或者設置屬性：dom對象.屬性
在HTML DOM查找不到的方法，可以去XML DOM去看一下
關於document的操作在XML DOM的document中
關於element的操作...element中
練習案例：選項左右移動，先選中元素，點擊按鈕，移動選中元素到另一邊
技術分析：
1.確定時間onclick
2.編寫函數
點擊移動單個：
a.獲取左邊選中的選項
b.將其追加到右邊的下拉選中
點擊移動所有的：
a.獲取左邊所有選項
b.一個個追加過去
註意小細節：註意arr.length會因為移動元素導致長度變化，所以for循環中要i--
谷歌內核瀏覽器：調代碼，點擊source打斷點調試
案例：省市聯動（前端案例，應該從數據庫加載）
需求：選中省的時候，自動加載該省的市
技術分析：
數組：
語法：new Array(); new Array(size);new Array(e1,e2..)
註意：js數組長度是動態可變的,不存在角標越界，只會提示undefined
步驟分析：
1.省的option添加值遞增的value屬性，當作數組索引
2.初始化市
3.選擇省的時候，onchange事件
4.根據不同的省value下標創建不同的arr[i]的對應市數組
js引用類型總結：
原始類型的String、Number、Boolean都是偽對象，可以調用相應的方法
Array:數組
String：var s = new String("11");
var s1 = String("11");
當 String() 和運算符 new 一起作為構造函數使用時，它返回一個新創建的 String 對象，存放的是字符串 s 或 s 的字符串表示。
當不用 new 運算符調用 String() 時，它只把 s 轉換成原始的字符串，並返回轉換後的值。
Boolean:
new Boolean("");//Boolean("");
Number
Date
new Date();
常用方法：toLocalString()
RegExp:正則表達式
語法兩種：
直接量語法： /正則表達式/(參數)
new RegExp("正則表達式",(參數))
參數：
i:忽略大小寫
g:全局查找
常用方法：Boolean test(s);
Math：
常用常量：Math.PI、Math.random()
全局：
decodeURI：解碼某個編碼的URI
encodeURI：把字符串編碼為URI
eval(s):計算js字符串，並把它當作腳本執行
parseInt():嘗試強轉為整數
parseFloat:強制強轉為浮點數
JQuery：一種js類庫，其中2.0以後版本不兼容IE6、IE7、IE8，因此使用1.0版本中的高版本
以前通過js獲取元素：
var obj = document.getElementById("id");
JQuery: var obj = $("選擇器")；
如何區分dom對象和jQuery對象，有一種約定
原生dom對象：var obj
jQuery對象：var $obj
dom對象obj和jQuery對象的轉換：
dom--->jquery
var $o = $(obj);
jQuery----》dom
方式一：jQuery對象[索引]
方式二：jQuery對象.get(索引下標)
jQuery中頁面加載：
js: window.onload=function() ---頁面中只能出現一次
jQuery：
方式一：$(function() {...})---頁面中可以出現多次
方式二：
$(document).ready(function() {});----頁面中可以出現多次
派發事件：常用。因為不用更改HTML，直接使用js監聽事件
eg: $("選擇器“).click(function() {...});
等價於原生js的事件去掉on
jQuery選擇器總結：
基本選擇器：$("#id值") $(".class值") $("標簽名")
獲取多個選擇器：$("#id",".class值"),用逗號隔開
jQuery設置樣式： eg: $("#id").css("樣式key","樣式value",...)
層次選擇器：
a b: a的所有b後代
a>b:a的所有第一層b孩子
a+b:a的下一個兄弟(大弟弟)
a~b:a的所有弟弟
基本過濾選擇器：
:first
:last
:odd:索引為奇數
:even:索引為偶數
:eq(index)指定索引
:gt(index)大於指定索引
:lt(index)小於指定索引
內容過濾選擇器：
:has("選擇器") 包含指定選擇器的元素，例如：選取div元素且要求選取的div元素的class選擇器的值為mini
可見過濾選擇器
:hidden 在頁面上不展示的元素，一般指input type="hidden"和樣式中diaplay:none
:visible 頁面可見元素
例如：選取所有可見div $("div:visible");
屬性選擇器：
寫法一：[屬性名]
寫法二：[屬性名=屬性值]...例如：$("div[title]")
表單過濾：
:input 所有表單子標簽
jQuery的屬性和css操作總結：
對屬性的操作：
方式一：attr方法(有BUG，因此在jQuery1.6版本之後推薦用prop方法替代)
獲取：attr("屬性名稱")；
設置：attr("屬性名"，”屬性值“)
設置多個屬性：attr({
"屬性一"：”值1“，
”屬性二“：”值2“
})
移除屬性：removeAttr("屬性名稱"）
還有一個專門針對class屬性的方法：addClass、removeClass都是對上面attr方法的封裝
對css的操作：操作元素的style屬性
css():獲取或者設置css樣式
方式一：獲取 css("屬性名")
方式二：設置一個屬性 css("屬性名"，”屬性值“)
方式三：設置多個，json形式 css({
"":"",
"":""
});
獲取元素的尺寸：width()、height
jQuery數組操作
遍歷數組：數組.each(function(){...}); $.each(function(){...});
設置/獲取value屬性
jQuery對象.val();獲取
jQuery對象.val("");設置
設置/獲取標簽體的內容
html()
text()
xxx();獲取 xxx("");設置
html()和text()方法的區別：
使用html(s)方法會解析字符串s，可以填入腳本
使用html()方法獲取的值是經過解析的字符串值，例如超鏈接會被解析為源碼
text(s)方法會將s當作普通字符串輸出
使用text()方法獲取的值是頁面展示的字符串值
表單對象屬性過濾選擇器：
:enabled 可用
:disabled 不可用
:checked 選中
:selected 下拉選中
<button>標簽默認是submit類型，若只是普通按鈕，請註明type=button或者直接用<input type=button/>
復習日記-HTML+css+js+jquery