JQuery初探
一、JQuery是什么？
JQuery 是一套JavaScript庫， 使用它，可以很方便的進行 JavaScript的編程。比如： 獲取頁面元素， 修改頁面元素的CSS樣式等等都可以以很簡單的語法完成。節省代碼行數和減少開發的時間。
物理上來看就是一份.js的文件。?
二、如何獲取和使用？
1.導入庫 JQuery ?的官方網址是：?http://jquery.com/??。 從這里可以獲取JQuery的最新版本.(目前最新版是 V1.9.1)。 使用的話，就是導入這份js文件。導入方式是在頁面的head部分通過<script>標簽導入
[html]?view plain?copy
2.初始化 因為JQuery 其實就是一些js 的函數來操作HTML的元素， 所以JQuery就需要在頁面完全加載之后運行。(l類似于HTML body的onload 這樣的處理方式 ) JQuery的文檔就緒函數是：
[html]?view plain?copy
三、JQuery選擇器
1.JavaScript 語言中獲取頁面元素： document.getElmentById(""); document.getElmentsByName("");
document.getElmentsByTagName("");
2.在JQuery 中獲取頁面元素： (1) 元素選擇器 $("span") 選取 <span> 元素
$("p.intro") 選取所有 class="intro" 的 <p> 元素
$("p#demo") 選取 id="demo" 的第一個 <p> 元素。
(2)屬性選擇器? $("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
(3) CSS選擇器
$("p").css("background-color","red"); 把所有 p 元素的背景顏色更改為紅色：
| $(this) | 當前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的第一個元素 |
| $("ul li:first") | 每個 <ul> 的第一個 <li> 元素 |
| $("[href$='.jpg']") | 所有帶有以 ".jpg" 結尾的 href 屬性的屬性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
| $("#intro? #subintro") | id="intro" 的第一個元素 下的 id="subintro"的第一個元素 |
四、JQuery 事件函數
事件函數就是當 HTML的元素發生某些事件時觸發執行函數。比如：| $(document).ready(function) | 文檔的就緒事件 （當 HTML 文檔就緒可用） |
| $(selector).click(function) | 被選元素的點擊事件 |
| $(selector).dblclick(function) | 被選元素的雙擊事件 |
| $(selector).focus(function) | 被選元素的獲得焦點事件 |
| $(selector).mouseover(function) | 被選元素的鼠標懸停事件 |
五、JQuery 效果
| $(selector).hide() | 隱藏被選元素 |
| $(selector).show() | 顯示被選元素 |
| $(selector).toggle() | 切換（在隱藏與顯示之間）被選元素 |
| $(selector).slideDown() | 向下滑動（顯示）被選元素 |
| $(selector).slideUp() | 向上滑動（隱藏）被選元素 |
| $(selector).slideToggle() | 對被選元素切換向上滑動和向下滑動 |
| $(selector).fadeIn() | 淡入被選元素 |
| $(selector).fadeOut() | 淡出被選元素 |
| $(selector).fadeTo() | 把被選元素淡出為給定的不透明度 |
| $(selector).animate() | 對被選元素執行自定義動畫 |
六、jQuery 頁面效果操作
| $(selector).html(content) | 改變被選元素的（內部）HTML |
| $(selector).append(content) | 向被選元素的（內部）HTML 追加內容 |
| $(selector).prepend(content) | 向被選元素的（內部）HTML “預置”（Prepend）內容 |
| $(selector).after(content) | 在被選元素之后添加 HTML |
| $(selector).before(content) | 在被選元素之前添加 HTML |
| $(selector).css(name,value) | 為匹配元素設置樣式屬性的值 |
| $(selector).css({properties}) | 為匹配元素設置多個樣式屬性 |
| $(selector).css(name) | 獲得第一個匹配元素的樣式屬性值 |
| $(selector).height(value) | 設置匹配元素的高度 |
| $(selector).width(value) | 設置匹配元素的寬度 |
七、jQuery AJAX 請求
| $(selector).load(url,data,callback) | 把遠程數據加載到被選的元素中 |
| $.ajax(options) | 把遠程數據加載到 XMLHttpRequest 對象中 |
| $.get(url,data,callback,type) | 使用 HTTP GET 來加載遠程數據 |
| $.post(url,data,callback,type) | 使用 HTTP POST 來加載遠程數據 |
| $.getJSON(url,data,callback) | 使用 HTTP GET 來加載遠程 JSON 數據 |
| $.getScript(url,callback) | 加載并執行遠程的 JavaScript 文件 |
完整的API參照：http://www.w3school.com.cn/jquery/
總結
- 上一篇： 用户自定义排序的几种实现思路
- 下一篇： 错误记录：expected single