//////////2017-1-16 ~ 2017-1-19///////////
int study_data(){
CSS(Cascading Style Sheets)
層疊樣式表使用方法:
1.外聯式Linking(也叫外部樣式):將網頁鏈接到外部樣式表。
2.嵌入式Embedding(也叫內頁樣式):在網頁上創建嵌入的樣式表。
3.內聯式Lnline(也叫行內樣式):應用內嵌樣式到各個網頁元素。
優先級:內聯式 > 嵌入式 >?外聯式CSS語法:
主要由2個部分構成:選擇器,以及一條或多條聲明構成
selector {declaration1;declaration2;...}id選擇器:
id選擇其前面有一個#號,稱為棋盤號或井號
#intro {font-weight:bold;}類選擇器:
允許以一種獨立于文檔元素的方式來指定樣式,可以單獨使用,也可以與其他元素結合使用
<h1 class="important">
? ? this heading is important
</h1>
.important {color:red}元素選擇器:
最常見的選擇器,可以將某個樣式從一個元素切換到另一個元素
html{color:black;}p {color:gray;}屬性選擇器:
根據元素的屬性以及屬性值來選擇元素
把包含標題的所有元素變為紅色:
[title] {color:red;}
對同時有href和title的錨元素應用樣式:
a[href][title] {color:red;}后代選擇器:
只對h1元素中的em元素應用樣式:
h1 em {color:red;}子元素選擇器:
當不希望選擇任意的后代元素,而是希望縮小范圍,只選擇某個元素的子元素時使用。
只對h1元素的子元素的strong元素應用樣式:
h1 > strong {color:red;}?多個選擇器可以用","來同時使用
<selector1>,<selector2>,<selector3>
選擇器派生,用空格分隔,前選擇器內繼續選擇
<selector1> <selector2> <selector3>CSS樣式:
CSS 允許應用純色作為背景,也允許使用背景圖像創建相當復雜的效果。
CSS 在這方面的能力遠遠在 HTML 之上。background-color ? ? ? ? ? ? - ?背景色
background-image ? ? ? ? ? - ?背景圖片
background-repeat ? ? ? ? ? - ?背景重復
background-position ? ? ? ? - ?背景位置
background-attachment ? ?- ?背景關聯(位置是否固定)
text-indent ? ? ? ? ? ? ? ? ? ? ? ? - ?文本縮進
text-align ? ? ? ? ? ? ? ? ? ? ? ? ? - ?文本行對齊方式
word-spacing ? ? ? ? ? ? ? ? ? ?- ?單詞間距
letter-spacing ? ? ? ? ? ? ? ? ? ?- ?字符間距
text-transform ? ? ? ? ? ? ? ? ? ?- ?字符轉換(大小寫)
text-decoration ? ? ? ? ? ? ? ? ? - ?文本裝飾
white-space ? ? ? ? ? ? ? ? ? ? ? - ?設置空白符
direction ? ? ? ? ? ? ? ? ? ? ? ? ? ? - ?文本方向
font-family ? ? ? ? ? ? ? ? ? ? ? ? ?- ?字體系列
font-style ? ? ? ? ? ? ? ? ? ? ? ? ? ?- ?字體風格
font-variant ? ? ? ? ? ? ? ? ? ? ? ? - ?字體變形
font-weight ? ? ? ? ? ? ? ? ? ? ? ? - ?字體加粗
font-size ? ? ? ? ? ? ? ? ? ? ? ? ? ? - ?字體大小
a:link ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-? 未被訪問的鏈接
a:visited ? ? ? ? ? ? ? ? ? ? ? ? ? ? - ?已訪問的鏈接
a:hover ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?-? 鼠標位于鏈接的上方(a:hover 必須位于 a:link 和 a:visited 之后)
a:active ? ? ? ? ? ? ? ? ? ? ? ? ? ? -? 鏈接被點擊的時刻(a:active 必須位于 a:hover 之后)
text-decoration ? ? ? ? ? ? ? ? ?- ?文本修飾
list-style-type ? ? ? ? ? ? ? ? ? ? - ?列表類型
list-style-image ? ? ? ? ? ? ? ? ?- ?列表項圖像
list-style-position ? ? ? ? ? ? ? - ?列表標志位置
list-style ? ? ? ? ? ? ? ? ? ? ? ? ? ? - ?列表樣式
border ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- ?邊框
border-collapse ? ? ? ? ? ? ? ? ?- ?折疊邊框
width ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- ?寬度
height ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - ?高度
vertical-align ? ? ? ? ? ? ? ? ? ? ? - ?垂直對齊方式
padding ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- ?內邊距
margin ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- ?外邊距
outline ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- ?所有的輪廓屬性
outline-color ? ? ? ? ? ? ? ? ? ? ? - ?輪廓顏色
outline-style ? ? ? ? ? ? ? ? ? ? ? - ?輪廓樣式
outline-width ? ? ? ? ? ? ? ? ? ? ?- ?輪廓寬度
jQuery
jQuery事件處理
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件“觸發”(或“激發”)經常會被使用。
通常會把 jQuery 代碼放到 部分的事件處理方法中
實例:<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
? ? $("button").click(function(){
? ? ? ? $("p").hide();
? ? });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>jQuery 名稱沖突
jQuery 使用 $ 符號作為 jQuery 的簡介方式。
某些其他 JavaScript 庫中的函數(比如 Prototype)同樣使用 $ 符號。
jQuery 使用名為 noConflict() 的方法來解決該問題。
var jq=jQuery.noConflict(),幫助您使用自己的名稱(比如 jq)來代替 $ 符號。jQuery 事件函數
bind() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 向匹配元素附加一個或更多事件處理器
blur() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 blur 事件
change() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 change 事件
click() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 觸發、或將函數綁定到指定元素的 click 事件
dblclick() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 double click 事件
delegate() ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 向匹配元素的當前或未來的子元素附加一個或多個事件處理器
die() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 移除所有通過 live() 函數添加的事件處理程序。
error() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 error 事件
event.isDefaultPrevented() - 返回 event 對象上是否調用了 event.preventDefault()。
event.pageX ? ? ? ? ? ? ? ? ? ? ? - 相對于文檔左邊緣的鼠標位置。
event.pageY ? ? ? ? ? ? ? ? ? ? ? - 相對于文檔上邊緣的鼠標位置。
event.preventDefault() ? ? ? ?- 阻止事件的默認動作。
event.result ? ? ? ? ? ? ? ? ? ? ? ? - 包含由被指定事件觸發的事件處理器返回的最后一個值。
event.target ? ? ? ? ? ? ? ? ? ? ? ? - 觸發該事件的 DOM 元素。
event.timeStamp ? ? ? ? ? ? ? ? - 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。
event.type ? ? ? ? ? ? ? ? ? ? ? ? ? - 描述事件的類型。
event.which ? ? ? ? ? ? ? ? ? ? ? ? - 指示按了哪個鍵或按鈕。
focus() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 觸發、或將函數綁定到指定元素的 focus 事件
keydown() ? ? ? ? ? ? ? ? ? ? ? ? ? - 觸發、或將函數綁定到指定元素的 key down 事件
keypress() ? ? ? ? ? ? ? ? ? ? ? ? ? - 觸發、或將函數綁定到指定元素的 key press 事件
keyup() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 key up 事件
live() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 為當前或未來的匹配元素添加一個或多個事件處理器
load() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 觸發、或將函數綁定到指定元素的 load 事件
mousedown() ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 mouse down 事件
mouseenter() ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 mouse enter 事件
mouseleave() ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 mouse leave 事件
mousemove() ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 mouse move 事件
mouseout() ? ? ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 mouse out 事件
mouseover() ? ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 mouse over 事件
mouseup() ? ? ? ? ? ? ? ? ? ? ? ? ? - 觸發、或將函數綁定到指定元素的 mouse up 事件
one() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。
ready() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 文檔就緒事件(當 HTML 文檔就緒可用時)
resize() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 resize 事件
scroll() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 觸發、或將函數綁定到指定元素的 scroll 事件
select() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 觸發、或將函數綁定到指定元素的 select 事件
submit() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 觸發、或將函數綁定到指定元素的 submit 事件
toggle() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 綁定兩個或多個事件處理器函數,當發生輪流的 click 事件時執行。
trigger() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 所有匹配元素的指定事件
triggerHandler() ? ? ? ? ? ? ? ? ? - 第一個被匹配元素的指定事件
unbind() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 從匹配元素移除一個被添加的事件處理器
undelegate() ? ? ? ? ? ? ? ? ? ? ? ?- 從匹配元素移除一個被添加的事件處理器,現在或將來
unload() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 觸發、或將函數綁定到指定元素的 unload 事件jQuery 屬性操作
addClass() ? ? ? ? ? ? ? ? ? ? ? ? ? - 向匹配的元素添加指定的類名。
attr() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 設置或返回匹配元素的屬性和值。
hasClass() ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 檢查匹配的元素是否擁有指定的類。
html() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 設置或返回匹配的元素集合中的 HTML 內容。
removeAttr() ? ? ? ? ? ? ? ? ? ? ? ? - 從所有匹配的元素中移除指定的屬性。
removeClass() ? ? ? ? ? ? ? ? ? ? ?- 從所有匹配的元素中刪除全部或者指定的類。
toggleClass() ? ? ? ? ? ? ? ? ? ? ? ?- 從匹配的元素中添加或刪除一個類。
val() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 設置或返回匹配元素的值。jQuery 效果函數
animate() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 對被選元素應用“自定義”的動畫
clearQueue() ? ? ? ? ? ? ? ? ? ? ? ?- 對被選元素移除所有排隊的函數(仍未運行的)
delay() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 對被選元素的所有排隊函數(仍未運行)設置延遲
dequeue() ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 運行被選元素的下一個排隊函數
fadeIn() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 逐漸改變被選元素的不透明度,從隱藏到可見
fadeOut() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 逐漸改變被選元素的不透明度,從可見到隱藏
fadeTo() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 把被選元素逐漸改變至給定的不透明度
hide() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 隱藏被選的元素
queue() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 顯示被選元素的排隊函數
show() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 顯示被選的元素
slideDown() ? ? ? ? ? ? ? ? ? ? ? ? ? - 通過調整高度來滑動顯示被選元素
slideToggle() ? ? ? ? ? ? ? ? ? ? ? ? ?- 對被選元素進行滑動隱藏和滑動顯示的切換
slideUp() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 通過調整高度來滑動隱藏被選元素
stop() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 停止在被選元素上運行動畫
toggle() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 對被選元素進行隱藏和顯示的切換jQuery 文檔操作
addClass() ? ? ? ? ? ? ? ? ? ? ? ? ? - 向匹配的元素添加指定的類名。
after() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 在匹配的元素之后插入內容。
append() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 向匹配元素集合中的每個元素結尾插入由參數指定的內容。
appendTo() ? ? ? ? ? ? ? ? ? ? ? ? ?- 向目標結尾插入匹配元素集合中的每個元素。
attr() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 設置或返回匹配元素的屬性和值。
before() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 在每個匹配的元素之前插入內容。
clone() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 創建匹配元素集合的副本。
detach() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 從 DOM 中移除匹配元素集合。
empty() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 刪除匹配的元素集合中所有的子節點。
hasClass() ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 檢查匹配的元素是否擁有指定的類。
html() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 設置或返回匹配的元素集合中的 HTML 內容。
insertAfter() ? ? ? ? ? ? ? ? ? ? ? ? ?- 把匹配的元素插入到另一個指定的元素集合的后面。
insertBefore() ? ? ? ? ? ? ? ? ? ? ? - 把匹配的元素插入到另一個指定的元素集合的前面。
prepend() ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 向匹配元素集合中的每個元素開頭插入由參數指定的內容。
prependTo() ? ? ? ? ? ? ? ? ? ? ? ? ?- 向目標開頭插入匹配元素集合中的每個元素。
remove() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 移除所有匹配的元素。
removeAttr() ? ? ? ? ? ? ? ? ? ? ? ? ?- 從所有匹配的元素中移除指定的屬性。
removeClass() ? ? ? ? ? ? ? ? ? ? ? - 從所有匹配的元素中刪除全部或者指定的類。
replaceAll() ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 用匹配的元素替換所有匹配到的元素。
replaceWith() ? ? ? ? ? ? ? ? ? ? ? ? - 用新內容替換匹配的元素。
text() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 設置或返回匹配元素的內容。
toggleClass() ? ? ? ? ? ? ? ? ? ? ? ? ?- 從匹配的元素中添加或刪除一個類。
unwrap() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 移除并替換指定元素的父元素。
val() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 設置或返回匹配元素的值。
wrap() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 把匹配的元素用指定的內容或元素包裹起來。
wrapAll() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? - 把所有匹配的元素用指定的內容或元素包裹起來。
wrapinner() ? ? ? ? ? ? ? ? ? ? ? ? ? ?- 將每一個匹配的元素的子內容用指定的內容或元素包裹起來。jQuery Ajax 操作函數
jQuery.ajax() ? ? ? ? ? ?- 執行異步 HTTP (Ajax) 請求。
.ajaxComplete() ? ? ? - 當 Ajax 請求完成時注冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxError() ? ? ? ? ? ? ?- 當 Ajax 請求完成且出現錯誤時注冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxSend() ? ? ? ? ? ? ?- 在 Ajax 請求發送之前顯示一條消息。
jQuery.ajaxSetup() ? - 設置將來的 Ajax 請求的默認值。
.ajaxStart() ? ? ? ? ? ? ? - 當首個 Ajax 請求完成開始時注冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxStop() ? ? ? ? ? ? ? - 當所有 Ajax 請求完成時注冊要調用的處理程序。這是一個 Ajax 事件。
.ajaxSuccess() ? ? ? ? - 當 Ajax 請求成功完成時顯示一條消息。
jQuery.get() ? ? ? ? ? ? ?- 使用 HTTP GET 請求從服務器加載數據。
jQuery.getJSON() ? ? - 使用 HTTP GET 請求從服務器加載 JSON 編碼數據。
jQuery.getScript() ? ? - 使用 HTTP GET 請求從服務器加載 JavaScript 文件,然后執行該文件。
.load() ? ? ? ? ? ? ? ? ? ? ?- 從服務器加載數據,然后把返回到 HTML 放入匹配元素。
jQuery.param() ? ? ? ?- 創建數組或對象的序列化表示,適合在 URL 查詢字符串或 Ajax 請求中使用。
jQuery.post() ? ? ? ? ? - 使用 HTTP POST 請求從服務器加載數據。
.serialize() ? ? ? ? ? ? ? - 將表單內容序列化為字符串。
.serializeArray() ? ? ?- 序列化表單元素,返回 JSON 數據結構數據。
}