jQuery起點教程之使用選擇器和事件(3)
jQuery起點教程之使用選擇器和事件
jQuery提供兩種方式來選擇html的elements:
- 第一種是用CSS和Xpath選擇器聯合起來形成一個字串來傳送到jQuery的構造器(如:$(“div > ul a”));
- 第二種是用jQuery物件的幾個methods(方法)。這兩種方式還可以聯合起來混合使用。
為了測試這些選擇器,我們來試著在我們starterkit.html中選擇並修改第一個ordered
list.
一開始,我們需要選擇這個list本身,這個list有一個ID叫“orderedlist”,通常的javascript寫法是document.getElementById(“orderedlist”).在jQuery中,我們這樣做:
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
這裡將starterkit中的一個CSS樣式red附加到了orderedlist上(譯者Keel注:參考測試包中的css目錄下的core.css,其中定義了red樣式)。因此,在你重新整理了starterkit.html後,你將會看到第一個有序列表(ordered
list )背景色變成了紅色,而第二個有序列表沒有變化.
現在,讓我們新增一些新的樣式到list的子節點.
$(document).ready(function() {
$("#orderedlist >
li").addClass("blue");
});
這樣,所有orderedlist中的li都附加了樣式”blue”。
現在我們再做個複雜一點的,當把滑鼠放在li物件上面和移開時進行樣式切換,但只在list的最後一個element上生效。
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
還有大量的類似的CSS和XPath例子,更多的例子和列表可以在這裡找到。(譯者Keel注:入門看此文,修行在個人,要想在入門之後懂更多,所以這段話的幾個連結遲早是要必看的!)
每一個onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等價表示方法(譯者Keel注:jQuery不喜歡onXXX,所以都改成了XXX,去掉了on)。其他的一些事件,如ready和hover,也提供了相應的方法。
你可以在Visual
jQuery找到全部的事件列表,在Events欄目下.
用這些選擇器和事件你已經可以做很多的事情了,但這裡有一個更強的好東東!
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
- find() 讓你在已經選擇的element中作條件查詢,因此 $(“#orderedlist).find(“li”) 就像
$(“#orderedlist li”). - each()一樣迭代了所有的li,並可以在此基礎上作更多的處理。 大部分的方法,如addClass(), 都可以用它們自己的 each() 。
- 在這個例子中, html()用來獲取每個li的html文字,
追加一些文字,並將之設定為li的html文字。(譯者Keel注:從這個例子可以看到.html()方法是獲取物件的html程式碼,而.html(`xxx`)是設定`xxx`為物件的html程式碼)
另一個經常碰到的任務是在沒有被jQuery覆蓋的DOM元素上call一些方法,想像一個在你用AJAX方式成功提交後的reset:
$(document).ready(function() {
//
use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
(譯者Keel注:這裡作者將form的id也寫成了form,原始檔有<form
id=”form”>,這是非常不好的寫法,你可以將這個ID改成form1或者testForm,然後用$(“#form1”)或者$(“#testForm”)來表示它,再進行測試。)
這個程式碼選擇了所有ID為”form”的元素,並在其第一個上call了一個reset()。如果你有一個以上的form,你可以這樣做:
$(document).ready(function() {
//
use this to reset several forms at once
$("#reset").click(function()
{
$("form").each(function() {
this.reset();
});
});
});
(譯者Keel注:請注意一定要親自將這些程式碼寫在custom.js中並在starterkit.html上測試效果才能有所體會!必要時要觀察starterkit.html的html程式碼)
這樣你在點選Reset連結後,就選擇了文件中所有的form元素,並對它們都執行了一次reset()。
還有一個你可能要面對的問題是不希望某些特定的元素被選擇。jQuery
提供了filter() 和not() 方法來解決這個問題。 filter()以過濾表示式來減少不符合的被選擇項,
not()則用來取消所有符合過濾表示式的被選擇項. 考慮一個無序的list,你想要選擇所有的沒有ul子元素的li元素。
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid
black");
});
這個程式碼選擇了所有的li元素,然後去除了沒有ul子元素的li元素。重新整理瀏覽器後,所有的li元素都有了一個邊框,只有ul子元素的那個li元素例外。
(譯者Keel注:請注意體會方便之極的css()方法,並再次提醒請務必實際測試觀察效果,比方說換個CSS樣式呢?再加一個CSS樣式呢?像這樣:$(“li”).not(“[ul]”).css(“border”,
“1px solid black”).css(“color”,”red”);)
上面程式碼中的[expression]
語法是從XPath而來,可以在子元素和屬性(elements and attributes)上用作過濾器,比如你可能想選擇所有的帶有name屬性的連結:
$(document).ready(function() {
$("a[@name]").background("#eee");
});
這個程式碼給所有帶有name屬性的連結加了一個背景色。(譯者Keel注:這個顏色太不明顯了,建議寫成$(“a[@name]”).background(“red”);)
更常見的情況是以name來選擇連結,你可能需要選擇一個有特點href屬性的連結,這在不同的瀏覽器下對href的理解可能會不一致,所以我們的部分匹配(“*=”)的方式來代替完全匹配(“=”):
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do
something with all links that point somewhere to /content/gallery
});
});
到現在為止,選擇器都用來選擇子元素或者是過濾元素。另外還有一種情況是選擇上一個或者下一個元素,比如一個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()方法會結束(undone),所以我們可以接著在後面繼續find(`dt`),而不需要再寫$(`#faq`).find(`dt`)。
在點選事件中的,我們用
$(this).next()
來找到dt下面緊接的一個dd元素,這讓我們可以快速地選擇在被點選問題下面的答案。
(譯者Keel注:這個例子真是太酷了,FAQ中的答案可以收縮!從利用next()的思路到實現這些效果都有很多地方需要我們消化,注意
if
(answer.is(`:visible`))用法,注意answer.slideUp();不懂的地方趕緊查我在最開始提到的兩個必看API文件)
除了選擇同級別的元素外,你也可以選擇父級的元素。可能你想在使用者滑鼠移到文章某段的某個連結時,它的父級元素–也就是文章的這一段突出顯示,試試這個:
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
測試效果可以看到,移到文章某段的連結時,它所在的段全用上highlight樣式,移走之後又恢復原樣。
(譯者Keel注:highlight是core.css中定義的樣式,你也可以改變它,注意這裡有第二個function()這是hover方法的特點,請在API文件中查閱hover,上面也有例子說明)
在我們繼續之前我們先來看看這一步:
jQuery會讓程式碼變得更短從而更容易理解和維護,下面是$(document).ready(callback)的縮寫法:
$(function() {
// code to
execute when the DOM is ready
});
應用到我們的Hello world例子中,可以這樣:
$(function() {
$("a").click(function() {
alert("Hello world!");
});
});
現在,我們手上有了這些基礎的知識,我們可以更進一步的探索其它方面的東西,就從AJAX開始!
本章的相關連結:
-
jQuery API
documentation -
Visual jQuery – A
categorized browsable API documentation -
jQuery
Expressions: CSS -
jQuery
Expressions: XPath - jQuery Expressions: Custom
-
jQuery Special
Events -
jQuery DOM
Traversing
相關文章
- jQuery 3教程(二):jQuery選擇器jQuery
- jQuery選擇器——基本選擇器jQuery
- JQuery選擇器——可見性篩選選擇器和屬性篩選選擇器jQuery
- jQuery使用總結-CorejQuerySelectors選擇器二3/4jQuery
- jQuery選擇器——層次選擇器jQuery
- jQuery選擇器jQuery
- jQuery 選擇器jQuery
- jQuery----函式和選擇器jQuery函式
- jQuery選擇器之層次選擇器jQuery
- jQuery選擇器——基本過濾選擇器jQuery
- jQuery選擇器(下)jQuery
- jQuery 選擇器效率jQuery
- Jquery的選擇器jQuery
- jQuery :last選擇器jQueryAST
- jQuery .class選擇器jQuery
- jQuery element選擇器jQuery
- jQuery #id選擇器jQuery
- [JS] jQuery選擇器JSjQuery
- jQuery系列:選擇器jQuery
- jQuery選擇器大全jQuery
- jQuery基礎學習(1)(標籤選擇器,事件)jQuery事件
- jQuery選擇器——內容過濾選擇器jQuery
- jQuery選擇器——子元素過濾選擇器jQuery
- jQuery選擇器——屬性過濾選擇器jQuery
- css中:not()選擇器和jQuery中.not()方法CSSjQuery
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- CSS3簡明教程之徵服CSS3選擇器CSSS3
- jQuery選擇器——表單元素過濾選擇器jQuery
- jQuery選擇器——可見性過濾選擇器jQuery
- 使用json和jquery級聯選擇JSONjQuery
- jQuery子選擇器和後代選擇器區別簡單介紹jQuery
- jquery九大選擇器jQuery
- jquery中的選擇器jQuery
- jQuery 後代選擇器jQuery
- jQuery parent>child選擇器jQuery
- jQuery 分組選擇器jQuery
- jQuery常用的選擇器jQuery
- jQuery - 選擇器詳解jQuery