jQuery學習筆記

jquery 語法是為 html 元素的選取編制的，可以對元素執行某些操作。

基礎語法是：$(selector).action()

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏所有段落

$(".test").hide() - 隱藏所有 class="test" 的所有元素

$("#test").hide() - 隱藏所有 id="test" 的元素

$(document).ready(function());

防止文件在完全載入（就緒）之前執行 jquery **。

$("p.intro") 選取所有 class="intro" 的 元素。

$("p#demo") 選取所有 id="demo" 的 元素。

jquery 使用 xpath 表示式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。

$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。

$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。

$(document).ready(function)將函式繫結到文件的就緒事件（當文件完成載入時）

$(selector).click(function) 觸發或將函式繫結到被選元素的點選事件

$(selector).dblclick(function)觸發或將函式繫結到被選元素的雙擊事件

$(selector).focus(function)觸發或將函式繫結到被選元素的獲得焦點事件

$(selector).mouseover(function)觸發或將函式繫結到被選元素的滑鼠懸停事件

$("#hide").click(function

());
$("#show").click(function
());

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

通過 jquery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：

$(selector).toggle(speed,callback);

可選的 callback 引數是 toggle() 方法完成後所執行的函式名稱。

jquery 擁有下面四種 fade 方法：

fadein()
fadeout()
fadetoggle()
fadeto()

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

淡入方式
淡出，切換的方式相同
jquery fadeto() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。

$(selector).fadeto(speed,opacity,callback);

fadeto() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。

$(selector).slidedown(speed,callback); //滑動向下

$(selector).slideup(speed,callback);
$(selector).slidetoggle(speed,callback);

$(selector).animate(,speed,callback);

可選的 speed 引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 引數是動畫完成後所執行的函式名稱。

$("button").click(function(),"slow");

div.animate(,"slow");
div.animate(,"slow");
div.animate(,"slow");
});佇列功能

$(selector).stop(stopall,gotoend);

可選的 stopall 引數規定是否應該清除動畫佇列。預設是 
false
，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。
可選的 gotoend 引數規定是否立即完成當前動畫。預設是 
false。

三個簡單實用的用於 dom 操作的 jquery 方法：

jquery attr() 用於設定/改變屬性值。

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

可以改變標籤值

新增新的 html 內容

prepend() - 在被選元素的開頭插入內容

after() - 在被選元素之後插入內容

before() - 在被選元素之前插入內容

刪除元素/內容

remove() -刪除被選元素（及其子元素）
empty() -從被選元素中刪除子元素
$("#div1").remove();
$("#div1").empty();

jquery 擁有若干進行 css 操作的方法

width()

height()
innerwidth()
innerheight()
outerwidth()
outerheight()

$("#div1").width() 返回元素寬度

$("#div1").height() 返回元素高度

向上遍歷 dom 樹

parent()  
//直接父
parents()  //
所有祖先（或者內建引數，規定返回祖先型別）
parentsuntil()  
$(document).ready(
function
()); 
//返回「span」與「div」之間的型別

向下遍歷 dom 樹

都能夠像parentsuntil()一樣設定引數

在 dom 樹中水平遍歷

first(), last() 和 eq()，它們允許您基於其在一組元素中的位置來選擇乙個特定的元素。

filter(「.ooo」)  //所有類為ooo的元素

not(".ooo")  //所有類不為ooo的元素

$(document).ready(function

());  
//第乙個標籤
$(document).ready(
function
());  
//最後乙個標籤
$(document).ready(
function
());  
//索引標籤，從0開始
$(document).ready(
function
());  
//返回所有class="intro"的元素
$(document).ready(
function
());  
//返回所有class不為"intro"的元素

使用者按繼續載入時，才會從伺服器呼叫剩餘內容。

jquery load() 方法是簡單但強大的 ajax 方法。

load() 方法從伺服器載入資料，並把返回的資料放入被選元素中。

$(selector).load(url,data,callback);

必需的 url 引數規定您希望載入的 url。
可選的 data 引數規定與請求一同傳送的查詢字串鍵/值對集合。
可選的 callback 引數是 load() 方法完成後所執行的函式名稱。

}) //獲得外部內容

兩種在客戶端和伺服器端進行請求-響應的常用方法是：get 和 post。

$("button").click(function

());
});

詳見：

jquery學習筆記

判斷checkbox是否被選中if attr checked true 檢查元素是否存在 if tt length 0 if tt 0 檢查元素是否隱藏 alert dvtest is visible 判斷元素顯示或隱藏狀態 多選框操作 獲取一組radio被選中項的值 var item input ...

Jquery 學習筆記

text 和 val 的區別 text 方法是取得所有匹配元素的內容。結果是由所有匹配元素包含的文字內容組合起來的文字。這個方法對html和xml文件都有效。獲取span,div p之類才用text 或html 方法。例子 b a p text 將得到 ba 單行文字不能用text 方法獲得值，必須...

Jquery學習筆記

1.給一組相同的css加事件，要使用bind，live在新的版本已經過期。testcss bind click function e else 未選中 3.改變checkbox選中狀態 mycheckbox prop checked true mycheckbox prop checked fals...