日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery详细教程,基础内容罗列

發布時間:2023/12/20 编程问答 22 豆豆
生活随笔 收集整理的這篇文章主要介紹了 jQuery详细教程,基础内容罗列 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery技術準備

一 . jquery 語法

jQuery 語法是通過選取 HTML 元素,并對選取的元素執行某些操作。

基礎語法: $(selector).action()

  • 美元符號定義 jQuery
  • 選擇符(selector)“查詢"和"查找” HTML 元素
  • jQuery 的 action() 執行對元素的操作

實例:

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

  • $(“p”).hide() - 隱藏所有

    元素

  • $(“p.test”).hide() - 隱藏所有 class=“test” 的

    元素

  • $(“#test”).hide() - 隱藏 id=“test” 的元素

jQuery 入口函數:

$(document).ready(function(){// 執行代碼 }); //或者 $(function(){// 執行代碼 }); //以上兩種方式你可以選擇你喜歡的方式實現文檔就緒后執行 jQuery 方法。

二 . jquery 選擇器

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"(或選擇)HTML 元素。 它基于已經存在的 CSS 選擇器,除此之外,它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號開頭:$()。

tag元素選擇器

//jQuery 元素選擇器基于元素名選取元素。 $("p")

#id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的,所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。

$("#test")

.class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。

$(".test")

更多

語法描述
$(“*”)選取所有元素
$(this)選取當前HTML元素
$(“p.intro”)選取class為intro的<p>元素
$(“p:first”)選取第一個 <p> 元素
$(“ul li:first”)選取第一個 <ul> 元素的第一個 <li> 元素
$(“ul li:first-child”)選取每個 <ul> 元素的第一個 <li> 元素
$(“[href]”)選取帶有 href 屬性的元素
$(“a[target=‘_blank’]”)選取所有 target 屬性值等于 “_blank” 的 <a> 元素
$(“a[target!=‘_blank’]”)選取所有 target 屬性值不等于 “_blank” 的 元素
$(“:button”)選取所有 type=“button” 的 <input> 元素 和 <button> 元素
$(“tr:even”)選取偶數位置的 <tr> 元素
$(“tr:odd”)選取奇數位置的 <tr> 元素

三. jquery 事件

頁面對不同訪問者的響應叫做事件。
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
jQuery 中,大多數 DOM 事件都有一個等效的 jQuery 方法。

鼠標事件

click() 元素點擊后觸發事件
$("p").click(function(){// 動作觸發后執行的代碼!! });
dbclick() 元素雙擊后觸發事件
$("p").dbclick(function(){// 動作觸發后執行的代碼!! });
mouseenter() 鼠標移入元素后觸發事件
$("p").mouseenter(function(){alert('您的鼠標移到了 id="p1" 的元素上!'); });
mouseleave() 鼠標移出元素后觸發事件
$("p").mouseleave(function(){// 動作觸發后執行的代碼!! });
mousedown() 鼠標在該元素上按下按鍵時觸發事件
$("#p1").mousedown(function(){alert("鼠標在該段落上按下!"); });
mouseup() 鼠標在該元素上松開按鍵時觸發事件
$("#p1").mouseup(function(){alert("鼠標在該段落上松開!"); });
hover()方法用于模擬光標懸停事件。

當鼠標移動到元素上時,會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時,會觸發指定的第二個函數(mouseleave)。

$("#p1").hover(function(){alert("你進入了 p1!");},function(){alert("拜拜! 現在你離開了 p1!");} );

表單事件

focus() 表單元素獲取焦點觸發事件
/*當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時,該元素就會獲得焦 點。focus() 方法觸發 focus 事件,或規定當發生 focus 事件時運行的函數:*/ $("input").focus(function(){$(this).css("background-color","#cccccc"); });
blur() 表單元素失去焦點觸發事件
/*當元素失去焦點時,發生 blur 事件。 blur() 方法觸發 blur 事件,或規定當發生 blur 事件時運行的函數:*/ $("input").blur(function(){$(this).css("background-color","#ffffff"); });
submit() 提交表單時觸發的事件
/*該事件只適用于 <form> 元素。 submit() 方法觸發 submit 事件,或規定當發生 submit 事件時運行的函數。*/ $("form").submit(function(){alert("提交"); });
change() 當元素值改變時觸發的事件

change() 方法觸發 change 事件,或規定當發生 change 事件時運行的函數。
注意:當用于 select 元素時,change 事件會在選擇某個選項時發生。當用于 text field 或 text area 時,change 事件會在元素失去焦點時發生。

$("input").change(function(){alert("文本已被修改"); });

鍵盤事件

keydown() - 鍵按下的過程
$("input").keydown(function(){$("input").css("background-color","yellow"); });
keypress() - 鍵被按下
$("input").keypress(function(){$("span").text(i+=1); });
keyup() - 鍵被松開
$("input").keyup(function(){$("input").css("background-color","pink"); });

文檔/窗口事件

loag() 元素加載時觸發的事件
//當圖像全部加載時警報文本: $("img").load(function(){alert("圖片已載入"); });

load() 方法在 jQuery 版本 1.8 中已廢棄。

reaize() 調整瀏覽器窗口大小時觸發的事件

resize() 方法觸發 resize 事件,或規定當發生 resize 事件時運行的函數。

$(selector).resize(); //或 $(window).resize(function(){$('span').text(x+=1); });

scroll() 當用戶滾動指定的元素時觸發的事件

當用戶滾動指定的元素時,會發生 scroll 事件。
scroll 事件適用于所有可滾動的元素和 window 對象(瀏覽器窗口)。
scroll() 方法觸發 scroll 事件,或規定當發生 scroll 事件時運行的函數。

$("div").scroll(function(){$("span").text(x+=1); });

unload() 當用戶離開當前頁面時觸發

/* 當發生以下情況下,會觸發 unload 事件: 點擊某個離開頁面的鏈接 在地址欄中鍵入了新的 URL 使用前進或后退按鈕 關閉瀏覽器窗口 重新加載頁面 */ $(window).unload(function(){alert("Goodbye!"); }); unload() 方法在 jQuery 版本 1.8 中被廢棄,在 3.0 版本被移除。 Firefox 與 Chrome 會阻止彈窗,所以沒辦法看到效果。

四. jQuery效果(隱藏、顯示、切換、滑動、淡入淡出、動畫)

1. 顯示/隱藏

hide()和show()
通過hide()和show()方法來隱藏和顯示HTNL元素 $("#hide").click(function(){$("p").hide(); });$("#show").click(function(){$("p").show(); });

語法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度,可以取以下值:“slow”、“fast” 或毫秒。

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

//帶有 speed 參數的 hide() 方法: $("button").click(function(){$("p").hide(1000); }); //帶有 speed 參數的 hide() 方法,并使用回調函數: $(document).ready(function(){$(".hidebtn").click(function(){$("div").hide(1000,"linear",function(){alert("Hide() 方法已完成!");});}); });

第二個參數是一個字符串,表示過渡使用哪種緩動函數。(jQuery自身提供 “linear” 和 “swing”,其他可以使用相關的插件)。

toggle()

使用 toggle() 方法來切換 hide() 和 show() 方法

//顯示被隱藏的元素,并隱藏已顯示的元素: $("button").click(function(){$("p").toggle(); });

語法:

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

可選的 speed 參數規定隱藏/顯示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。

1.$(selector)選中的元素的個數為n個,則callback函數會執行n次;

2.callback函數名后加括號,會立刻執行函數體,而不是等到顯示/隱藏完成后才執行;

3.callback既可以是函數名,也可以是匿名函數;

對于這里,當 callback 函數加上括號時,函數立即執行,只會調用一次, 如果不加括號,元素顯示或隱藏后調用函數,才會調用多次。

$(document).ready(function(){$(".hidebtn").click(function(){// popalert 不加括號() $("div").hide(1000,"linear",popalert)}); }); function popalert(){alert("Hide() 方法已完成!"); }

2.淡入淡出

fadeIn() 用于淡入已隱藏的元素。

語法:
$(selector).fadeIn(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值:“slow”、“fast” 或毫秒。
可選的 callback 參數是 fading 完成后所執行的函數名稱。

$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000); });
fadeOut() 方法用于淡出可見元素。

語法:
$(selector).fadeOut(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值:“slow”、“fast” 或毫秒。
可選的 callback 參數是 fading 完成后所執行的函數名稱。

$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000); });
fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

如果元素已淡出,則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入,則 fadeToggle() 會向元素添加淡出效果。
語法:
$(selector).fadeToggle(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值:“slow”、“fast” 或毫秒。
可選的 callback 參數是 fading 完成后所執行的函數名稱。

$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000); });
fadeTo() 方法允許漸變為給定的不透明度(值介于 0 與 1 之間)。

語法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 參數規定效果的時長。它可以取以下值:“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度(值介于 0 與 1 之間)。
可選的 callback 參數是該函數完成后所執行的函數名稱。

$("button").click(function(){$("#div1").fadeTo("slow",0.15);$("#div2").fadeTo("slow",0.4);$("#div3").fadeTo("slow",0.7); });

fadeTo() 沒有默認參數,必須加上 slow/fast/Time

3.滑動

slideDown() 方法用于向下滑動元素。

語法:
$(selector).slideDown(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值:“slow”、“fast” 或毫秒。
可選的 callback 參數是滑動完成后所執行的函數名稱。
callback為函數名,加括號觸發slideDown()立即執行,不加括號slideDown()完成后執行

$("#flip").click(function(){$("#panel").slideDown(); });
slideUp() 方法用于向上滑動元素。

語法:
$(selector).slideUp(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值:“slow”、“fast” 或毫秒。
可選的 callback 參數是滑動完成后所執行的函數名稱。
callback為函數名,加括號觸發slideUp()立即執行,不加括號slideUp()完成后執行

$("#flip").click(function(){$("#panel").slideUp(); });
slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

如果元素向下滑動,則 slideToggle() 可向上滑動它們。
如果元素向上滑動,則 slideToggle() 可向下滑動它們。
$(selector).slideToggle(speed,callback);
可選的 speed 參數規定效果的時長。它可以取以下值:“slow”、“fast” 或毫秒。
callback為函數名,加括號觸發slideToggle()立即執行,不加括號slideToggle()完成后執行

$("#flip").click(function(){$("#panel").slideToggle(); });

4. 動畫

animate() 方法用于創建自定義動畫。

語法:
$(selector).animate({params},speed,callback);
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值:“slow”、“fast” 或毫秒。
callback為函數名,加括號觸發animate()立即執行,不加括號animate()完成后執行

$("button").click(function(){$("div").animate({left:'250px'}); }); //操作多個屬性 $("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px'}); }); //使用相對值 $("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'+=150px'}); }); /*使用預定義的值 默認情況下,所有的 HTML 元素有一個靜態的位置,且是不可移動的。 如果需要改變為,我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!*/ $("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"); });

5. stop() 方法用于停止動畫或效果,在它們完成之前。


stop() 方法適用于所有 jQuery 效果函數,包括滑動、淡入淡出和自定義動畫。
語法:
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向后執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
因此,默認地,stop() 會清除在被選元素上指定的當前動畫。

$("#stop").click(function(){$("#panel").stop(); }); //動畫隊列停止動畫測試,只停止當前正在進行的動畫,停止當前動畫后,隊列中的下一個動畫開始進行 $(document).ready(function(){$("#flip").click(function(){$("#panel").slideDown(5000);$("#panel").slideUp(5000);});$("#stop").click(function(){$("#panel").stop();}); }); //可以在 stop() 中設置 stopAll 的參數為 true,這樣就可以停止所有動畫效果而不是只停止當前動畫: $(document).ready(function(){$("#flip").click(function(){$("#panel").slideDown(5000);$("#panel").slideUp(5000);});$("#stop").click(function(){$("#panel").stop(true);}); });

5. 方法鏈接

直到現在,我們都是一次寫一條 jQuery 語句(一條接著另一條)。
不過,有一種名為鏈接(chaining)的技術,允許我們在相同的元素上運行多條 jQuery 命令,一條接著另一條。
提示: 這樣的話,瀏覽器就不必多次查找相同的元素。
如需鏈接一個動作,您只需簡單地把該動作追加到之前的動作上。
下面的例子把 css()、slideUp() 和 slideDown() 鏈接在一起。“p1” 元素首先會變為紅色,然后向上滑動,再然后向下滑動:

$("#p1").css("color","red").slideUp(2000).slideDown(2000); //當進行鏈接時,代碼行會變得很長。不過,jQuery 語法不是很嚴格;您可以按照希望的格式來寫,包含換行和縮進。 $("#p1").css("color","red").slideUp(2000).slideDown(2000); //jQuery 會拋掉多余的空格,并當成一行長代碼來執行上面的代碼行。

五. jQuery html

1. 獲取內容和屬性

獲取內容

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

//通過 jQuery text() 和 html() 方法來獲得內容: $("#btn1").click(function(){alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){alert("HTML: " + $("#test").html()); }); //通過 jQuery val() 方法獲得輸入字段的值: $("#btn1").click(function(){alert("值為: " + $("#test").val()); });
獲取屬性

attr() 方法用于獲取屬性值。

$("button").click(function(){alert($("#run").attr("href")); });

對于 HTML 元素本身就帶有的固有屬性,在處理時,使用 prop 方法。
對于 HTML 元素我們自己自定義的 DOM 屬性,在處理時,使用 attr 方法。
prop()函數的結果:
1.如果有相應的屬性,返回指定屬性值。
2.如果沒有相應的屬性,返回值是空字符串。
attr()函數的結果:
1.如果有相應的屬性,返回指定屬性值。
2.如果沒有相應的屬性,返回值是 undefined。

2. 設置內容和屬性

設置內容

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

$("#btn1").click(function(){$("#test1").text("Hello world!"); }); $("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){$("#test3").val("run"); });

text()、html() 以及 val(),同樣擁有回調函數。回調函數有兩個參數:被選元素列表中當前元素的下標,以及原始(舊的)值。然后以函數新值返回您希望使用的字符串。

$("#btn1").click(function(){$("#test1").text(function(i,origText){return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); });$("#btn2").click(function(){$("#test2").html(function(i,origText){return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; }); });
設置屬性

attr() 方法也用于設置/改變屬性值。

$("button").click(function(){$("a").attr("href","http://www.xxxxx.com"); }); //attr() 方法也允許您同時設置多個屬性。 $("button").click(function(){$("#run").attr({"href" : "http://www.xxx.com","title" : "jQuery 教程"}); });

jQuery 方法 attr(),也提供回調函數。回調函數有兩個參數:被選元素列表中當前元素的下標,以及原始(舊的)值。然后以函數新值返回您希望使用的字符串。

$("button").click(function(){$("#run").attr("href", function(i,origValue){return origValue + "/jquery"; }); });

3.添加元素

在選中元素內添加

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

//jQuery append() 方法在被選元素的結尾插入內容(仍然在該元素的內部) $("p").append("追加文本"); //jQuery prepend() 方法在被選元素的開頭插入內容。 $("p").prepend("在開頭追加文本"); //append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。可以通過 jQuery 來生成文本/HTML(就像上面的例子那樣),或者通過 JavaScript 代碼和 DOM 元素。 function appendText(){var txt1="<p>文本-1。</p>"; // 使用 HTML 標簽創建文本var txt2=$("<p></p>").text("文本-2。"); // 使用 jQuery 創建文本var txt3=document.createElement("p");txt3.innerHTML="文本-3。"; // 使用 DOM 創建文本 text with DOM$("body").append(txt1,txt2,txt3); // 追加新元素 }
在選中元素外添加

after() 和 before() 方法
jQuery after() 方法在被選元素之后插入內容。
jQuery before() 方法在被選元素之前插入內容。
after() 和 before() 方法能夠通過參數接收無限數量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素

function afterText() {var txt1="<b>I </b>"; // 使用 HTML 創建元素var txt2=$("<i></i>").text("love "); // 使用 jQuery 創建元素var txt3=document.createElement("big"); // 使用 DOM 創建元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3); // 在圖片后添加文本 }

4. 刪除元素/或內容

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

// remove() 方法刪除被選元素及其子元素。 $("#div1").remove(); //empty() 方法刪除被選元素的子元素。 $("#div1").empty();
過濾被刪除的元素

remove() 方法也可接受一個參數,允許您對被刪元素進行過濾。
該參數可以是任何 jQuery 選擇器的語法。

//刪除 class="italic" 的所有 <p> 元素 $("p").remove(".italic");

5. 獲取并設置 Class 類

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作

addClass()
//向不同的元素添加 class 屬性。當然,在添加類時,您也可以選取多個元素 $("button").click(function(){$("h1,h2,p").addClass("blue");$("div").addClass("important"); }); //在 addClass() 方法中規定多個類 $("button").click(function(){$("body div:first").addClass("important blue"); });
removeClass()
//在不同的元素中刪除指定的 class 屬性 $("button").click(function(){$("h1,h2,p").removeClass("blue"); });
toggleClass()
//使用 jQuery toggleClass() 方法。該方法對被選元素進行添加/刪除類的切換操作 $("button").click(function(){$("h1,h2,p").toggleClass("blue"); });

5. css()方法

css() 方法設置或返回被選元素的一個或多個樣式屬性。
返回css屬性
//返回首個匹配元素的 background-color 值: $("p").css("background-color"); //獲取更多元素的值 $(function() {$("button").click(function() {for(var i = 0; i < $("p").length; i++){alert($("p").eq(i).css("background-color"));//.eq()根據索引獲取}}); });
設置單個css屬性
$("p").css("background-color","yellow");
設置多個css屬性
//使用對象形式傳入數據 $("p").css({"background-color":"yellow","font-size":"200%"});

六. 遍歷dom

1. 祖先

parent()返回被選元素的直接父元素。
$(document).ready(function(){$("span").parent(); });
parents() 方法返回被選元素的所有祖先元素,它一路向上直到文檔的根元素 (<html>)
$(document).ready(function(){$("span").parents(); }); //使用可選參數來過濾對祖先元素的搜索 $(document).ready(function(){$("span").parents("ul"); });
parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。
$(document).ready(function(){$("span").parentsUntil("div"); });

2.后代

children() 方法返回被選元素的所有直接子元素,該方法只會向下一級對 DOM 樹進行遍歷。
$(document).ready(function(){$("div").children(); }); //使用可選參數來過濾對子元素的搜索 //下面的例子返回類名為 "1" 的所有 <p> 元素,并且它們是 <div> 的直接子元素: $(document).ready(function(){$("div").children("p.1"); });
find() 方法返回被選元素的后代元素,一路向下直到最后一個后代
//返回屬于 <div> 后代的所有 <span> 元素 $(document).ready(function(){$("div").find("span"); }); //返回 <div> 的所有后代 $(document).ready(function(){$("div").find("*"); });

3. 同胞

siblings() 方法返回被選元素的所有同胞元素。
//返回 <h2> 的所有同胞元素 $(document).ready(function(){$("h2").siblings(); }); //也可以使用可選參數來過濾對同胞元素的搜索。 //下面的例子返回屬于 <h2> 的同胞元素的所有 <p> 元素: $(document).ready(function(){$("h2").siblings("p"); });
next() 方法返回被選元素的下一個同胞元素。
//返回 <h2> 的下一個同胞元素 $(document).ready(function(){$("h2").next(); });
nextAll() 方法返回被選元素的所有跟隨的同胞元素。
//返回 <h2> 的所有跟隨的同胞元素 $(document).ready(function(){$("h2").nextUntil("h6"); });
nextUntil() 方法返回介于兩個給定參數之間的所有跟隨的同胞元素。
$(document).ready(function(){$("h2").nextUntil("h6"); });
prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似,只不過方向相反而已:它們返回的是前面的同胞元素(在 DOM 樹中沿著同胞之前元素遍歷,而不是之后元素遍歷)

4. 過濾

first()、last()、eq()、filter()、not()

first() 方法返回被選元素的首個元素。
$(document).ready(function(){$("div p").first(); });
last() 方法返回被選元素的最后一個元素。
$(document).ready(function(){$("div p").last(); });
eq() 方法返回被選元素中帶有指定索引號的元素。
$(document).ready(function(){$("p").eq(1); });
filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回。
//返回帶有類名 "url" 的所有 <p> 元素 $(document).ready(function(){$("p").filter(".url"); });
not() 方法返回不匹配標準的所有元素。
//返回不帶有類名 "url" 的所有 <p> 元素 $(document).ready(function(){$("p").not(".url"); });
擴展

not 和 eq 可以實現反選的效果。
選取索引值不為 1 的 p 元素,并把背景顏色設置為黃色:

$("p").not(":eq(1)").css("background-color","yellow"); $("p").filter(".url").css("background-color","yellow"); //和 $("p.url").css("background-color","yellow"); //效果一樣。 $("p").last().css("background-color","yellow"); //和 $("p:last").css("background-color","yellow"); //效果一樣。 $("p").first().css("background-color","yellow"); //和 $("p:first").ss("background-color","yellow"); //效果一樣。 $("p").not(".url"); //和 $("p:not(.url)");

七. jQuery ajax

1. load()

load() 方法從服務器加載數據,并把返回的數據放入被選元素中。
語法:

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

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

//把文件 "demo_test.txt" 的內容加載到指定的 <div> 元素中 $("#div1").load("demo_test.txt"); //把 "demo_test.txt" 文件中 id="p1" 的元素的內容,加載到指定的 <div> 元素中 $("#div1").load("demo_test.txt #p1");

可選的 callback 參數規定當 load() 方法完成后所要允許的回調函數。回調函數可以設置不同的參數:
responseTxt - 包含調用成功時的結果內容
statusTXT - 包含調用的狀態
xhr - 包含 XMLHttpRequest 對象

//下面代碼會在 load() 方法完成后顯示一個提示框。如果 load() 方法已成功,則顯示"外部內容加載成功!",而如果失敗,則顯示錯誤消息: $("button").click(function(){$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){if(statusTxt=="success")alert("外部內容加載成功!");if(statusTxt=="error")alert("Error: "+xhr.status+": "+xhr.statusText);}); });

2. get()和post()

$.get() 方法通過 HTTP GET 請求從服務器上請求數據

語法:
$.get(URL,callback);

$.get( URL, data , callback, dataType )

URL發送請求的 URL字符串。
data可選的,發送給服務器的字符串或 key/value 鍵值對。
callback可選的,請求成功后執行的回調函數。
dataType可選的,從服務器返回的數據類型。默認:智能猜測(可以是
//使用 $.get() 方法從服務器上的一個文件中取回數據 $("button").click(function(){$.get("demo_test.php",function(data,status){alert("數據: " + data + "\n狀態: " + status);}); });
$.post() 方法通過 HTTP POST 請求向服務器提交數據。

語法:
$.post(URL,callback);

$.post( URL , data , callback , dataType )

URL發送請求的 URL字符串。
data可選的,發送給服務器的字符串或 key/value 鍵值對。
callback可選的,請求成功后執行的回調函數。
dataType可選的,從服務器返回的數據類型。默認:智能猜測(可以是xml, json, script, 或 html)。

GET 和 POST 方法的區別:
1、發送的數據數量
在 GET 中,只能發送有限數量的數據,因為數據是在 URL 中發送的。
在 POST 中,可以發送大量的數據,因為數據是在正文主體中發送的。
2、安全性
GET 方法發送的數據不受保護,因為數據在 URL 欄中公開,這增加了漏洞和黑客攻擊的風險。
POST 方法發送的數據是安全的,因為數據未在 URL 欄中公開,還可以在其中使用多種編碼技術,這使其具有彈性。
3、加入書簽中
GET 查詢的結果可以加入書簽中,因為它以 URL 的形式存在;而 POST 查詢的結果無法加入書簽中。
4、編碼
在表單中使用 GET 方法時,數據類型中只接受 ASCII 字符。
在表單提交時,POST 方法不綁定表單數據類型,并允許二進制和 ASCII 字符。
5、可變大小
GET 方法中的可變大小約為 2000 個字符。
POST 方法最多允許 8 Mb 的可變大小。
6、緩存
GET 方法的數據是可緩存的,而 POST 方法的數據是無法緩存的。
7、主要作用
GET 方法主要用于獲取信息。而 POST 方法主要用于更新數據。

八.其他

1. noConflict() ,釋放jQuery對$符號的控制

jQuery 使用 $ 符號作為 jQuery 的簡寫。
其他一些 JavaScript 框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符號作為簡寫(就像 jQuery),如果您在用的兩種不同的框架正在使用相同的簡寫符號,有可能導致腳本停止運行。
jQuery 的團隊考慮到了這個問題,并實現了 noConflict() 方法。

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

//通過全名替代簡寫的方式來使用 jQuery $.noConflict(); jQuery(document).ready(function(){jQuery("button").click(function(){jQuery("p").text("jQuery 仍然在工作!");}); }); //也可以創建自己的簡寫。noConflict() 可返回對 jQuery 的引用,您可以把它存入變量,以供稍后使用。 var jq = $.noConflict(); jq(document).ready(function(){jq("button").click(function(){jq("p").text("jQuery 仍然在工作!");}); }); //如果你的 jQuery 代碼塊使用 $ 簡寫,并且您不愿意改變這個快捷方式,那么您可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數內使用 $ 符號了 - 而在函數外,依舊不得不使用 "jQuery": $.noConflict(); jQuery(document).ready(function($){$("button").click(function(){$("p").text("jQuery 仍然在工作!");}); });

總結

以上是生活随笔為你收集整理的jQuery详细教程,基础内容罗列的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。