柚子快報(bào)邀請(qǐng)碼778899分享：前端 jQuery筆記

http://yzkb.51969.com/

jQuery筆記

1. 安裝

在頁(yè)面中引入 jQuery

2. 語(yǔ)法

開(kāi)始 // 防止文檔在完全加載（就緒）之前運(yùn)行 jQuery 代碼

// jQuery入口函數(shù)

$(document).ready(function(){

// jQ代碼

});

// 簡(jiǎn)潔寫(xiě)法（與以上寫(xiě)法效果相同）

$(function(){

// 開(kāi)始寫(xiě) jQuery 代碼...

});

在頁(yè)面中選取所有 元素獲得所有的節(jié)點(diǎn)對(duì)象 var elements = $("p");

通過(guò) id 選取元素對(duì)象 var elements = $("#test");

通過(guò)指定的 class 查找元素對(duì)象 var elements = $(".test");

語(yǔ)法描述$(“*”)選取所有元素$(this)選取當(dāng)前 HTML 元素$(“p.intro”)選取 class 為 intro 的 元素$(“p:first”)選取第一個(gè) 元素$(“ul li:first”)選取第一個(gè)

元素的第一個(gè)

元素$(“ul li:first-child”)選取每個(gè)

元素的第一個(gè)

元素$(“[href]”)選取帶有 href 屬性的元素$(“a[target=‘_blank’]”)選取所有 target 屬性值等于 “_blank” 的 元素$(“a[target!=‘_blank’]”)選取所有 target 屬性值不等于 “_blank” 的 元素$(“:button”)選取所有 type=“button” 的 元素 和 元素$(“tr:even”)選取偶數(shù)位置的 $(“tr:odd”)選取奇數(shù)位置的 元素 元素

3. jQuery事件

鼠標(biāo)事件鍵盤(pán)事件表單事件文檔/窗口事件click 單擊事件keypresssubmit 提交事件loaddblclick 雙擊事件keydownchangeresizemouseenterkeyupfocusscrollmouseleaveblurunloadhover 鼠標(biāo)懸浮事件

click() 方法是當(dāng)按鈕點(diǎn)擊事件被觸發(fā)時(shí)會(huì)調(diào)用一個(gè)函數(shù) $("p").click(function(){

$(this).hide();

});

當(dāng)雙擊元素時(shí)，會(huì)發(fā)生 dblclick 事件 $("p").dblclick(function(){

$(this).hide();

});

mouseenter() 當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)，會(huì)發(fā)生 mouseenter 事件 $("#p1").mouseenter(function(){

alert('您的鼠標(biāo)移到了 id="p1" 的元素上!');

});

mouseleave() 當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)，會(huì)發(fā)生 mouseleave 事件 $("#p1").mouseleave(function(){

alert("再見(jiàn)，您的鼠標(biāo)離開(kāi)了該段落。");

});

mousedown() 當(dāng)鼠標(biāo)指針移動(dòng)到元素上方，并按下鼠標(biāo)按鍵時(shí)，會(huì)發(fā)生 mousedown 事件 $("#p1").mousedown(function(){

alert("鼠標(biāo)在該段落上按下！");

});

mouseup() 當(dāng)在元素上松開(kāi)鼠標(biāo)按鈕時(shí)，會(huì)發(fā)生 mouseup 事件 $("#p1").mouseup(function(){

alert("鼠標(biāo)在段落上松開(kāi)。");

});

hover() 方法用于模擬光標(biāo)懸停事件 $("#p1").hover(

// 光標(biāo)進(jìn)入時(shí)執(zhí)行第一個(gè)函數(shù)

function(){

alert("你進(jìn)入了 p1!");

},

// 光標(biāo)離開(kāi)時(shí)執(zhí)行性第二個(gè)函數(shù)

function(){

alert("拜拜! 現(xiàn)在你離開(kāi)了 p1!");

}

);

focus() 當(dāng)輸入框獲得焦點(diǎn)時(shí)，發(fā)生 focus 事件 $("input").focus(function(){

$(this).css("background-color","#cccccc");

});

blur() 當(dāng)元素失去焦點(diǎn)時(shí)，發(fā)生 blur 事件 $("input").blur(function(){

$(this).css("background-color","#ffffff");

});

鏈?zhǔn)秸{(diào)用 $("#p1").css("color","red").slideUp(2000).slideDown(2000);

4. 顯示和隱藏方法

通過(guò) jQuery，您可以使用 hide() 和 show() 方法來(lái)隱藏和顯示 HTML 元素 // 獲得元素節(jié)點(diǎn)，并添加單擊事件

$("#hide").click(function(){

// 隱藏并設(shè)置特效 1秒 緩慢隱藏

// 可以設(shè)置一個(gè)回調(diào)函數(shù)，當(dāng)完全隱藏時(shí)調(diào)用

$("p").hide(1000,function(){

alert("Hide() 方法已完成!");

});

});

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

$("p").show();

});

通過(guò) jQuery，您可以使用 toggle() 方法來(lái)切換 hide() 和 show() 方法 $("button").click(function(){

$("p").toggle(); // 當(dāng)節(jié)點(diǎn)隱藏時(shí) 執(zhí)行 show() 方法，否則反之

});

fadeIn() 用于緩慢顯示已隱藏的元素 和 show() 方法類(lèi)似 $("button").click(function(){

$("#div1").fadeIn();

});

fadeOut() 方法緩慢隱藏可見(jiàn)元素 和 hide() 方法類(lèi)似 $("button").click(function(){

$("#div1").fadeOut(3000);

});

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換 和 toggle() 方法類(lèi)似 $("button").click(function(){

$("#div1").fadeToggle(1000);

});

slideDown() 方法用于向下滑動(dòng)元素 ，和 show() 方法類(lèi)似 $("#flip").click(function(){

$("#panel").slideDown();

});

slideUp() 方法用于向上滑動(dòng)元素 和 hide() 方法類(lèi)似 $("#flip").click(function(){

$("#panel").slideToggle();

});

slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換 和 toggle() 方法類(lèi)似 $("#flip").click(function(){

$("#panel").slideToggle();

});

5. 動(dòng)畫(huà)

animate() 方法用于創(chuàng)建自定義動(dòng)畫(huà)

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

// 字體大小 (樣式) 會(huì)自動(dòng)加上動(dòng)畫(huà)過(guò)渡效果 （從一個(gè)樣式變?yōu)榱硪粋€(gè)樣式的動(dòng)畫(huà)效果）

$("div").animate({fontSize:'250px'});

});

生成動(dòng)畫(huà)的過(guò)程中可同時(shí)使用多個(gè)屬性 $("button").click(function(){

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

});

animate() - 使用相對(duì)值 $("button").click(function(){

$("div").animate({

left:'250px',

height:'+=150px', // 在原來(lái)的基礎(chǔ)上加 150px

width:'+=150px'

});

// animate() - 使用隊(duì)列功能 (按順序執(zhí)行多個(gè)動(dòng)畫(huà))

$("div").animate({

left:'100px'

});

});

animate() - 使用預(yù)定義的值, 可以把屬性的動(dòng)畫(huà)值設(shè)置為 “show”、“hide” 或 “toggle” $("button").click(function(){

$("div").animate({

height:'toggle' // 顯示或隱藏

});

});

stop() 方法用于停止動(dòng)畫(huà)或效果，在它們完成之前 $(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideDown(5000);

});

$("#stop").click(function(){

$("#panel").stop();

});

});

6. jQuery捕獲

text() - 設(shè)置或返回所選元素的文本內(nèi)容 html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)簽） $("#btn1").click(function(){

alert("Text: " + $("#test").text());

});

$("#btn2").click(function(){

alert("HTML: " + $("#test").html());

});

val() - 設(shè)置或返回輸入框的值 $("#btn1").click(function(){

alert("值為: " + $("#test").val());

});

attr() 方法用于獲取標(biāo)簽屬性的值 $("button").click(function(){

alert($("#runoob").attr("href"));

});

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

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

$("#runoob").attr("href","http://www.runoob.com/jquery");

});

// attr() 同時(shí)設(shè)置多個(gè)屬性和值

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

$("#runoob").attr({

"href" : "http://www.runoob.com/jquery",

"class" : "body"

});

});

// 使用回調(diào)函數(shù)對(duì)原來(lái)的值進(jìn)行修改

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

$("#runoob").attr("href", function(i,origValue){

return origValue + "/jquery";

});

});

通過(guò) text()、html() 以及 val() 方法來(lái)設(shè)置內(nèi)容 $("#btn1").click(function(){

$("#test1").text("Hello world!");

});

$("#btn2").click(function(){

$("#test2").html("Hello world!");

});

$("#btn3").click(function(){

$("#test3").val("RUNOOB");

});

7. jQuery添加元素

append() 方法在被選元素的結(jié)尾插入 html文本 （標(biāo)簽會(huì)被解析）（標(biāo)簽內(nèi)部） $("p").append("

文本

");

// 添加多個(gè) html文本

var txt1="

文本-1。

var txt2=$("").text("文本-2。"); // 使用 jQuery 創(chuàng)建文本

var txt3=document.createElement("p");

txt3.innerHTML="文本-3。"; // 使用 DOM 創(chuàng)建文本 text with DOM

$("body").append(txt1,txt2,txt3);

prepend() 方法在被選元素的開(kāi)頭插入 html文本 （標(biāo)簽會(huì)被解析）（標(biāo)簽內(nèi)部） $("p").prepend("在開(kāi)頭追加文本");

after() 方法在被選元素之后插入內(nèi)容 （標(biāo)簽外部） before() 方法在被選元素之前插入內(nèi)容 （標(biāo)簽外部） // 標(biāo)簽的后面天新的標(biāo)簽

$("img").after("在后面添加文本");

$("img").before("在前面添加文本");

8. 刪除元素

remove() 方法刪除被選元素及其子元素 $("#div1").remove();

empty() 方法刪除被選元素的子元素 $("#div1").empty();

remove() 方法 刪除指定標(biāo)簽調(diào)用了指定選擇器的元素節(jié)點(diǎn) $("p").remove(".italic");

9. CSS類(lèi)

addClass() - 向被選元素添加一個(gè)或多個(gè)類(lèi) // 為指定的元素對(duì)象添加類(lèi)

$("h1,h2,p").addClass("blue");

removeClass() - 從被選元素刪除一個(gè)或多個(gè)類(lèi) // 為指定的元素對(duì)象移除指定的類(lèi)

$("h1,h2,p").removeClass("blue");

toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類(lèi)的切換操作 $("button").click(function(){

// 如果沒(méi)有這個(gè)類(lèi)則添加上， 如果有這個(gè)類(lèi)則刪除它

$("h1,h2,p").toggleClass("blue");

});

css() - 設(shè)置或返回樣式屬性 var value = $("p").css("background-color"); // 獲得樣式的值

$("p").css("background-color","yellow"); // 設(shè)置樣式的值

// 一次性設(shè)置多個(gè)CSS屬性

$("p").css({"background-color":"yellow","font-size":"200%"});

10. 尺寸

width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距） height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距 $("button").click(function(){

var txt="";

txt+="div 的寬度是: " + $("#div1").width() + "
";

txt+="div 的高度是: " + $("#div1").height();

$("#div1").html(txt);

});

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

11. 元素節(jié)點(diǎn)

parent() 方法返回被選元素的直接父元素 parents() 方法返回被選元素的所有祖先元素 children() 方法返回被選元素的所有直接子元素 find() 方法返回被選元素的后代元素，一路向下直到最后一個(gè)后代 $(document).ready(function(){

$("div").find("span");

});

$(document).ready(function(){

// div下的所有后代

$("div").find("*");

});

siblings() 方法返回被選元素的所有同級(jí)元素 next() 方法返回被選元素的下一個(gè)同胞元素 nextAll() 方法返回被選元素的所有跟隨的同胞元素 first() 方法返回被選元素的首個(gè)元素 $(document).ready(function(){

$("div p").first();

});

last() 方法返回被選元素的最后一個(gè)元素 eq() 方法返回被選元素中帶有指定索引號(hào)的元素 $(document).ready(function(){

$("p").eq(1);

});

filter() 方法允許您規(guī)定一個(gè)標(biāo)準(zhǔn), 匹配的元素會(huì)被選中 $(document).ready(function(){

$("p").filter(".url");

});

not() 方法返回不匹配標(biāo)準(zhǔn)的所有元素

12. AJAX

概念

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）在不重載整個(gè)網(wǎng)頁(yè)的情況下，AJAX 通過(guò)后臺(tái)加載數(shù)據(jù)，并在網(wǎng)頁(yè)上進(jìn)行顯示

方法

load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中 // 語(yǔ)法

// 必需的 URL 參數(shù)規(guī)定您希望加載的 URL。

// 可選的 data 參數(shù)規(guī)定與請(qǐng)求一同發(fā)送的查詢(xún)字符串鍵/值對(duì)集合。

// 可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱(chēng)。

$(selector).load(URL,data,callback); // 將請(qǐng)求的數(shù)據(jù)加載到元素標(biāo)簽中顯示

// 示例

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

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

var res = responseTxt;

alert("外部?jī)?nèi)容加載成功!");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);

});

});

$.get() 方法通過(guò) HTTP GET 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù) $("button").click(function(){

$.get("demo_test.php",function(data,status){

alert("數(shù)據(jù): " + data + "\n狀態(tài): " + status);

});

});

$.post() 方法通過(guò) HTTP POST 請(qǐng)求向服務(wù)器提交數(shù)據(jù) $("button").click(function(){

$.post("/try/ajax/demo_test_post.php",

{

name:"菜鳥(niǎo)教程",

url:"http://www.runoob.com"

},

function(data,status){

alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status);

});

});

ajax() 方法用于執(zhí)行 AJAX（異步 HTTP）請(qǐng)求 $("button").click(function(){

$.ajax({

url:"demo_test.txt",

success:function(result){

$("#div1").html(result);

}

});

});

柚子快報(bào)邀請(qǐng)碼778899分享：前端 jQuery筆記

http://yzkb.51969.com/

相關(guān)文章