這篇文章主要介紹“jQuery入門知識點有哪些”，在日常操作中，相信很多人在jQuery入門知識點有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jQuery入門知識點有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),寧德企業(yè)網(wǎng)站建設(shè),寧德品牌網(wǎng)站建設(shè),網(wǎng)站定制,寧德網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,寧德網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

jQuery提供兩種方式來選擇html的elements，第一種是用CSS和Xpath選擇器聯(lián)合起來形成一個字符串來傳送到j(luò)Query的構(gòu)造器（如：$("div > ul a")）；第二種是用jQuery對象的幾個methods(方法)。這兩種方式還可以聯(lián)合起來混合使用。

為了測試一下這些選擇器，我們來試著在我們starterkit.html中選擇并修改第一個ordered list.

一開始，我們需要選擇這個list本身，這個list有一個ID叫“orderedlist”，通常的javascript寫法是document.getElementById("orderedlist").在jQuery中，我們這樣做：

$(document).ready(function() {

$("#orderedlist").addClass("red");

});

這里將starterkit中的一個CSS樣式red附加到了orderedlist上。因此，在你刷新了starterkit.html后，你將會看到第一個有序列表(ordered list )背景色變成了紅色，而第二個有序列表沒有變化.

現(xiàn)在，讓我們添加一些新的樣式到list的子節(jié)點.

$(document).ready(function() {

$("#orderedlist > li").addClass("blue");

});

這樣，所有orderedlist中的li都附加了樣式"blue"。

現(xiàn)在我們再做個復雜一點的，當把鼠標放在li對象上面和移開時進行樣式切換，但只在list的最后一個element上生效。

$(document).ready(function() {

$("#orderedlist li:last").hover(function() {

$(this).addClass("green");

}, function() {

$(this).removeClass("green");

});

});

還有大量的類似的CSS和XPath例子，更多的例子和列表可以在這里找到。

每一個onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等價表示方法。其他的一些事件，如ready和hover,也提供了相應(yīng)的方法。

你可以在Visual jQuery找到全部的事件列表，在Events欄目下.

用這些選擇器和事件你已經(jīng)可以做很多的事情了，但這里有一個更強的好東東！

$(document).ready(function() {

$("#orderedlist").find("li").each(function(i) {

$(this).html( $(this).html() + " BAM! " + i );

});

});

find() 讓你在已經(jīng)選擇的element中作條件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一樣。each()方法迭代了所有的li，并可以在此基礎(chǔ)上作更多的處理。 大部分的方法,如addClass(), 都可以用它們自己的 each() 。在這個例子中, html()用來獲取每個li的html文本, 追加一些文字，并將之設(shè)置為li的html文本。

另一個經(jīng)常碰到的任務(wù)是在沒有被jQuery覆蓋的DOM元素上call一些方法，想像一個在你用AJAX方式成功提交后的reset：

$(document).ready(function() {

// use this to reset a single form

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

$("#form")[0].reset();

});

});

這個代碼選擇了所有ID為"form"的元素，并在其第一個上call了一個reset()。如果你有一個以上的form，你可以這樣做：

$(document).ready(function() {

// use this to reset several forms at once

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

$("form").each(function() {

this.reset();

});

});

});

這樣你在點擊Reset鏈接后，就選擇了文檔中所有的form元素，并對它們都執(zhí)行了一次reset()。

還有一個你可能要面對的問題是不希望某些特定的元素被選擇。jQuery 提供了filter() 和not() 方法來解決這個問題。 filter()以過濾表達式來減少不符合的被選擇項, not()則用來取消所有符合過濾表達式的被選擇項. 考慮一個無序的list，你想要選擇所有的沒有ul子元素的li元素。

$(document).ready(function() {

$("li").not(":has(ul)").css("border", "1px solid black");//原文為$("li").not("[ul]").css("border", "1px solid black");

});

這個代碼選擇了所有的li元素，然后去除了有ul子元素的li元素。刷新瀏覽器后，所有的li元素都有了一個邊框，只有ul子元素的那個li元素例外。

上面代碼中的[expression] 語法是從XPath而來，可以在子元素和屬性(elements and attributes)上用作過濾器，比如你可能想選擇所有的帶有name屬性的鏈接:

$(document).ready(function() {

$("a[name]").css("background-color","#eee"); //原文為“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符號應(yīng)該去除,background方法被css方法取代

});

這個代碼給所有帶有name屬性的鏈接加了一個背景色。

更常見的情況是以name來選擇鏈接，你可能需要選擇一個有特點href屬性的鏈接，這在不同的瀏覽器下對href的理解可能會不一致，所以我們的部分匹配("*=")的方式來代替完全匹配("=")：

$(document).ready(function() {

$("a[href*=/content/gallery]").click(function() {

// do something with all links that point somewhere to /content/gallery

});

});

到現(xiàn)在為止，選擇器都用來選擇子元素或者是過濾元素。另外還有一種情況是選擇上一個或者下一個元素，比如一個FAQ的頁面，答案首先會隱藏，當問題點擊時，答案顯示出來，jQuery代碼如下：

$(document).ready(function() {

$('#faq').find('dd').hide().end().find('dt').click(function() {

var answer=$(this).next();

if (answer.is(':visible')) {

answer.slideUp();

} else {

answer.slideDown();

}

});

});

這里我們用了一些鏈式表達法來減少代碼量，而且看上去更直觀更容易理解。像'#faq' 只選擇了一次，利用end()方法，第一次find()方法會結(jié)束(undone)，所以我們可以接著在后面繼續(xù)find('dt')，而不需要再寫$('#faq').find('dt')。

在點擊事件中的，我們用 $(this).next() 來找到dt下面緊接的一個dd元素，這讓我們可以快速地選擇在被點擊問題下面的答案。

除了選擇同級別的元素外，你也可以選擇父級的元素?？赡苣阆朐谟脩羰髽艘频轿恼履扯蔚哪硞€鏈接時，它的父級元素--也就是文章的這一段突出顯示，試試這個：

$(document).ready(function() {

$("a").hover(function() {

$(this).parents("p").addClass("highlight");

}, function() {

$(this).parents("p").removeClass("highlight");

});

});

測試效果可以看到，移到文章某段的鏈接時，它所在的段全用上highlight樣式，移走之后又恢復原樣。

在我們繼續(xù)之前我們先來看看這一步： jQuery會讓代碼變得更短從而更容易理解和維護，下面是$(document).ready(callback)的縮寫法：

$(function() {

// code to execute when the DOM is ready

});

應(yīng)用到我們的Hello world例子中，可以這樣:

$(function() {

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

alert("Hello world!");

});

});

到此，關(guān)于“jQuery入門知識點有哪些”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當前題目：jQuery入門知識點有哪些
路徑分享：http://weahome.cn/article/poogho.html