jQuery

//////////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 數據結構數據。

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,367評論 0 2
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,200評論 0 1
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關注...
    前端進階之旅閱讀 16,673評論 18 503
  • 第一章 入門 基本功能:訪問和操作 dom 元素,控制頁面樣式,對頁面的事件處理,與ajax完美結合,有豐富的插件...
    X_Arts閱讀 1,066評論 0 2
  • (續jQuery基礎(1)) 第5章 DOM節點的復制與替換 (1)DOM拷貝clone() 克隆節點是DOM的常...
    凜0_0閱讀 1,360評論 0 8