OM = Document Object Model（文檔對象模型）

一.基礎

1. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

　　<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

　　<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

　　<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">

　　可以減少加載時間，提高加載速度

2. 選擇器

　　$(this)　　$("p:first")　　:even　　:odd

3. 事件

　　鼠標事件　　鍵盤事件　　表單事件　　文檔窗口事件

4. hide() 和 show() 方法來隱藏和顯示 HTML 元素 toggle()切換 hide() 和 show() 方法

5. 淡入淡出效果 fadeIn() fadeOut() fadeToggle() fadeTo()

6. 滑動 slideDown() slideUp() slideToggle()

7. 動畫 animate({left:‘100px‘},"slow") 方法用於創建自定義動畫 使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right

　　也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -= $("div").animate({ left:‘250px‘, height:‘+=150px‘, width:‘+=150px‘ });

　　 stop() 方法用於停止動畫或效果，在它們完成之前

　　stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。

8. $(document).ready(function(){

　　　　$("button").click(function(){

　　　　　　$("p").hide("slow",function(){
　　　　　　　　alert("段落現在被隱藏了");
　　　　　　});
　　　　});
　　}); //回調函數
　　$(document).ready(function(){
　　　　$("button").click(function(){
　　　　　　$("p").hide(1000);
　　　　　　　　alert("現在段落被隱藏了");
　　　　});
　　}); //非回調函數

二.操作 HTML 元素和屬性

• text() - 設置或返回所選元素的文本內容
• html() - 設置或返回所選元素的內容（包括 HTML 標記）
• val() - 設置或返回表單字段的值

　　attr() 方法用於獲取屬性值。 $("#runoob").attr("href")

　　$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); ///回調函數 return

　　append/prepend 是在選擇元素內部嵌入。

　　after/before 是在元素外面追加。

　　刪除元素和內容

• remove() - 刪除被選元素（及其子元素）
• empty() - 從被選元素中刪除子元素

　　remove(".italic"); 對被刪元素進行過濾

三.遍歷 DOM 樹

• parent()
• parents()
• parentsUntil（）方法返回介於兩個給定元素之間的所有祖先元素
• children() 方法返回被選元素的所有直接子元素。
• find（）方法返回被選元素的後代元素，一路向下直到最後一個後代。
• siblings() 方法返回被選元素的所有同胞元素。
• next() 方法返回被選元素的下一個同胞元素。
• nextAll() 方法返回被選元素的所有跟隨的同胞元素。
• nextUntil() 方法返回介於兩個給定參數之間的所有跟隨的同胞元素。
• prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元
• first(), last() 和 eq()，它們允許您基於其在一組元素中的位置來選擇一個特定的元素
• filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。

• not() 方法返回不匹配標準的所有元素。

  提示：not() 方法與 filter() 相反。

四.Ajax

$(document).ready(function(){
　　$("button").click(function(){
　　　　$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
　　　　　　if(statusTxt=="success")
　　　　　　　　alert("外部內容加載成功!");
　　　　　　if(statusTxt=="error")
　　　　　　　　alert("Error: "+xhr.status+": "+xhr.statusText);
　　　　});
　　});
});

jquery 學習 總結