jQuery 筆記

jQuery教程

  • 向頁面添加jQuery庫
<head>
<script src="jquery.js"></script>
</head>

jQuery庫在I:/project/html/first1中

  • jQuery語法

$(selector).action();

美元符號定義jQuery
選擇符用于查詢和查找HTML元素
action（）執(zhí)行操作

實例

$(this).hide()-隱藏當前元素
$("P").hide()-隱藏所有段落
$(".test").hide() - 隱藏所有 class="test" 的所有元素
$("#test").hide() - 隱藏所有 id="test" 的元素

  • 文檔就緒函數(shù)
$(document).ready(function(){
---jQuery functions go here---
})

所有的jQuery函數(shù)都位于這個函數(shù)中逊抡，防止文檔在完全加載（就緒）之前運行 jQuery 代碼锐极。

  • jQuery 選擇器
    a.jQuery 元素選擇器

$("p")選擇<p>元素
$("p.intro")選取所有 class="intro" 的 <p> 元素
$("p#demo")選取所有 id="demo" 的 <p> 元素

b. jQuery CSS選擇器

$("p").css("background-color","red")

c. 更多選擇器實例

$(this) 當前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每個<\ul>的第一個<\li>元素
$("[href$='.jpg']") 所有帶有以 ".jpg" 結(jié)尾的屬性值的 href 屬性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

  • jQuery 事件

$(selector).click(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點擊事件
$(selector).dblclick(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點事件(?)
$(selector).mouseover(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標懸停事件

jQuery 效果

1.隱藏/顯示

  • hide()和shou() 
$(selector).hide/show(speed,callback);

speed參數(shù)規(guī)定隱藏/顯示的速度委造，可以取以下值："slow"、"fast" （帶引號）或毫秒
callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱蓬蝶。

  • toggle()
 $("button").click(function(){
  $("p").toggle();
  });

用于切換hide()和show()傻工，也有speed和callback兩個參數(shù)谭贪。

2.淡入淡出

  • fadeIn() 從無到有
  • fadeOut() 從有到無
  • fadeToggle() 有-無-有
  • fadeTo() 淡出至原圖的0-1倍
    以上均接受speed和callback參數(shù)，除此之外在兩個參數(shù)中間fadeTo還有個opacity參數(shù)（透明度）植酥。

3.滑動

  • slideDown()向下滑動顯示
  • slideUp()向上滑動消失
  • slideToggle()先向下顯示再向上消失

4.動畫 animate()

默認情況下，所有 HTML 元素的位置都是靜態(tài)的并且無法移動弦牡。如需對位置進行操作友驮，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute驾锰。

  • 方法

$(selector).animate({params},speed,callback);

$("button").click(function(){
   $("div").animate({left:'250px'});
 });

必需的params參數(shù)定義形成動畫的CSS屬性卸留。

  • 操作多個屬性
$("button").click(function(){
 $("div").animate({
   left:'250px',
   opacity:'0.5',
   height:'150px',
   width:'150px'
 });
});

當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名稻据，比如艾猜，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right捻悯，等等匆赃。
如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件今缚。

  • 使用相對值
 $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
  • 使用預定義的值
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});
  • 使用隊列功能
    例一
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
...
<button>開始動畫</button>

例二

$("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });

5. stop()

用于停止動畫或效果算柳，在它們完成之前。適用于所有 jQuery 效果函數(shù)姓言，包括滑動瞬项、淡入淡出和自定義動畫。

$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數(shù)規(guī)定是否應該清除動畫隊列何荚。默認是 false囱淋，即僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行餐塘。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當前動畫妥衣。默認是 false。

6. callback

Callback 函數(shù)在當前動畫 100% 完成之后執(zhí)行。

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

7.chaining

允許在相同的元素上運行多條 jQuery 命令税手，一條接著另一條蜂筹。

 $("#p1").css("color","red").slideUp(2000).slideDown(2000);

折進縮行不影響執(zhí)行。

jQuery HTML

1.獲取

  • 獲取內(nèi)容
  • text() - 設置或返回所選元素的文本內(nèi)容
  • html() - 設置或返回所選元素的內(nèi)容（包括 HTML 標記）
  • val() - 設置或返回表單字段的值
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
...
<input type="text" id="test" value="米老鼠">
  • 獲取屬性 - attr() 
$("button").click(function(){
  alert($("#w3s").attr("href"));
});

2.設置

  • 設置內(nèi)容

  • .text("")

  • .html("")

  • .val("")

  • text()芦倒、html() 以及 val() 的回調(diào)函數(shù)
    a. 兩個參數(shù)：被選元素列表中當前元素的下標艺挪，以及原始（舊的）值
    b. 以函數(shù)新值返回希望使用的字符串

$("#btn1").click(function(){
   $("#test1").text(function(i,origText){
     return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 
   });
 });

 $("#btn2").click(function(){
   $("#test2").html(function(i,origText){
     return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; 
   });
 });
  • 設置屬性 - attr() 
$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

允許同時設置多個屬性

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});
  • attr()的回調(diào)函數(shù)
    a. 兩個參數(shù)：被選元素列表中當前元素的下標，以及原始（舊的）值
    b. 以函數(shù)新值返回希望使用的字符串

3.添加

  • append() - 在被選元素的結(jié)尾插入內(nèi)容
  • prepend() - 在被選元素的開頭插入內(nèi)容
  • after() - 在被選元素之后插入內(nèi)容
  • before() - 在被選元素之前插入內(nèi)容

4.刪除

  • remove() - 被選元素及其子元素
    remove() 方法也可接受一個參數(shù)兵扬，允許對被刪元素進行過濾
  • empty() - 刪除被選元素的子元素

5.CSS類

  • addClass() - 添加 class 屬性
    向不同的元素添加 class 屬性
 $("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
 });

規(guī)定多個類

$("button").click(function(){
  $("#div1").addClass("important blue");
});
  • removeClass() - 刪除指定的 class 屬性
  • toggleClass() - 對被選元素進行添加/刪除類的切換操作

6.css()

  • 返回 CSS 屬性

css("propertyname");

  • 設置 CSS 屬性

css("propertyname","value");

  • 設置多個 CSS 屬性

css({"propertyname":"value","propertyname":"value",...});

7.尺寸

  • width()-設置或返回元素的寬度（不包括內(nèi)邊距麻裳、邊框或外邊距）
    height() - 設置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）

  • innerWidth() - 返回元素的寬度（包括內(nèi)邊距）周霉。
    innerHeight() - 返回元素的高度（包括內(nèi)邊距）

  • outerWidth() - 返回元素的寬度（包括內(nèi)邊距和邊框）
    outerHeight() - 返回元素的高度（包括內(nèi)邊距和邊框）

  • outerWidth(true) - 返回元素的寬度（包括內(nèi)邊距掂器、邊框和外邊距）
    outerHeight(true) - 返回元素的高度（包括內(nèi)邊距、邊框和外邊距）

jQuery 遍歷

1.祖先

  • parent()- 返回被選元素的直接父元素
  • parents() - 返回被選元素的所有祖先元素
    可以使用可選參數(shù)來過濾對祖先元素的搜索
  • parentsUntil() - 返回介于兩個給定元素之間的所有祖先元素（兩端均不包括）

2.后代

  • children() - 返回被選元素的所有直接子元素
    使用可選參數(shù)來過濾對子元素的搜索
  • find() - 返回被選元素的后代元素俱箱，一路向下直到最后一個后代

3.同胞

  • siblings() - 返回被選元素的所有同胞元素
    可以使用可選參數(shù)來過濾對同胞元素的搜索
  • next() - 返回被選元素的下一個同胞元素
  • nextAll() - 返回被選元素的所有跟隨的同胞元素
  • nextUntil() - 返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素(兩端均不包含）

4.過濾

  • first() - 返回被選元素的首個元素
$(document).ready(function(){
  $("div p").first();
});

選取首個 div 元素內(nèi)部的第一個 p 元素

  • last() - 返回被選元素的最后一個元素
$(document).ready(function(){
  $("div p").last();
});

選擇最后一個 div 元素中的最后一個 p 元素

  • eq() - 返回被選元素中帶有指定索引號的元素
$(document).ready(function(){
  $("p").eq(1);
});

索引號從 0 開始,選取第二個 p 元素（索引號 1）

  • filter() - 允許規(guī)定一個標準国瓮。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回
  • not() - 返回不匹配標準的所有元素

jQuery AJAX

AJAX教程

1.加載 load()

從服務器加載數(shù)據(jù)狞谱，并把返回的數(shù)據(jù)放入被選元素中

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

必需的 URL 參數(shù)規(guī)定希望加載的 URL
可選的 data 參數(shù)規(guī)定與請求一同發(fā)送的查詢字符串鍵/值對集合
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱

把文件 "demo_test.txt" 的內(nèi)容加載到指定的 <div> 元素中：

$("#div1").load("demo_test.txt");

也可以把 jQuery 選擇器添加到 URL 參數(shù),如把 "demo_test.txt" 文件中 id="p1" 的元素的內(nèi)容乃摹，加載到指定的 <div> 元素中：

$("#div1").load("demo_test.txt #p1");

callback 參數(shù)規(guī)定當 load() 方法完成后所要允許的回調(diào)函數(shù)，接收三個參數(shù)
responseTxt - 包含調(diào)用成功時的結(jié)果內(nèi)容
statusTXT - 包含調(diào)用的狀態(tài)
xhr - 包含 XMLHttpRequest 對象

2.get()和post()

HTTP方法-get post對比

  • $.get()

$.get(URL,callback);

必需的 URL 參數(shù)規(guī)定希望請求的 URL
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名

 $("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

第一個參數(shù)是希望請求的 URL（"demo_test.asp"）跟衅。
第二個參數(shù)是回調(diào)函數(shù)孵睬。第一個回調(diào)參數(shù)存有被請求頁面的內(nèi)容，第二個回調(diào)參數(shù)存有請求的狀態(tài)伶跷。

  • $.post()

$.post(URL,data,callback);

必需的 URL 參數(shù)規(guī)定您希望請求的 URL
可選的 data 參數(shù)規(guī)定連同請求發(fā)送的數(shù)掰读。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

第一個參數(shù)是希望請求的 URL ("demo_test_post.asp")。
然后連同請求（name 和 city）一起發(fā)送數(shù)據(jù)叭莫。
"demo_test_post.asp" 中的 ASP 腳本讀取這些參數(shù)蹈集，對它們進行處理，然后返回結(jié)果雇初。
第三個參數(shù)是回調(diào)函數(shù)拢肆。第一個回調(diào)參數(shù)存有被請求頁面的內(nèi)容，而第二個參數(shù)存有請求的狀態(tài)靖诗。

jQuery 雜項

noConflict()

noConflict() 方法會釋放會 $ 標識符的控制郭怪，這樣其他腳本就可以使用它了。

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在運行刊橘！");
  });
});

也可以創(chuàng)建自己的簡寫鄙才。noConflict() 可返回對 jQuery 的引用，可以把它存入變量促绵，以供稍后使用攒庵。

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在運行据途！");
  });
});

如果jQuery 代碼塊使用 $ 簡寫，并且不愿意改變這個快捷方式叙甸，那么可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內(nèi)使用 $ 符號了 - 而在函數(shù)外位衩，依舊不得不使用 jQuery裆蒸。

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在運行！");
  });
});

jQuery 參考手冊

參考手冊
選擇器
事件
效果
文檔操作
屬性操作
CSS操作
AJAX
遍歷
數(shù)據(jù)
DOM元素方法
核心
屬性

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末糖驴，一起剝皮案震驚了整個濱河市僚祷，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌贮缕，老刑警劉巖辙谜，帶你破解...
    沈念sama閱讀 211,265評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異感昼，居然都是意外死亡装哆，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門定嗓，熙熙樓的掌柜王于貴愁眉苦臉地迎上來蜕琴，“玉大人，你說我怎么就攤上這事宵溅×杓颍” “怎么了？”我有些...
    開封第一講書人閱讀 156,852評論 0贊 347
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵恃逻，是天一觀的道長雏搂。 經(jīng)常有香客問我，道長寇损，這世上最難降的妖魔是什么凸郑？ 我笑而不...
    開封第一講書人閱讀 56,408評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮润绵，結(jié)果婚禮上线椰，老公的妹妹穿的比我還像新娘。我一直安慰自己尘盼，他們只是感情好憨愉，可當我...
    茶點故事閱讀 65,445評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著卿捎，像睡著了一般配紫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上午阵，一...
    開封第一講書人閱讀 49,772評論 1贊 290
  • 城市分裂傳說
    那天躺孝，我揣著相機與錄音享扔，去河邊找鬼。 笑死植袍，一個胖子當著我的面吹牛惧眠，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播于个，決...
    沈念sama閱讀 38,921評論 3贊 406
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼氛魁，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了厅篓？” 一聲冷哼從身側(cè)響起秀存，我...
    開封第一講書人閱讀 37,688評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎羽氮，沒想到半個月后或链，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,130評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡档押，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年澳盐，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片令宿。...
    茶點故事閱讀 38,617評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡洞就，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出掀淘，到底是詐尸還是另有隱情旬蟋，我是刑警寧澤，帶...
    沈念sama閱讀 34,276評論 4贊 329
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布革娄，位于F島的核電站倾贰，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏拦惋。R本人自食惡果不足惜匆浙，卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望厕妖。 院中可真熱鬧首尼，春花似錦、人聲如沸言秸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽举畸。三九已至查排，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間抄沮，已是汗流浹背跋核。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1贊 265
  • 情欲美人皮
    我被黑心中介騙來泰國打工岖瑰， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人砂代。 一個月前我還...
    沈念sama閱讀 46,315評論 2贊 360
  • 代替公主和親
    正文 我出身青樓蹋订，卻偏偏與公主長得像，于是被迫代替她去往敵國和親刻伊。 傳聞我的和親對象是個殘疾皇子辅辩，可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2贊 348