第 2 章 jQuery 基礎選擇器

id 選擇器

jquery 能使用 CSS 選擇器來操作網(wǎng)頁中的標簽元素。如果你想要通過一個 id 號去查找一個元素,就可以使用如下格式的選擇器:

$("#my_id")

其中#my_id表示根據(jù) id 選擇器獲取頁面中指定的標簽元素,且返回唯一一個元素。

例如:

在瀏覽器中顯示的效果:

從圖中可以看出,通過#id選擇器的方式獲取元素,并在元素中調用 html()方法為id="divtest"<div>元素設置了文字顯示在頁面中。

此外,html() 方法的功能是設置或獲取元素中顯示的內容

element 選擇器

在文具盒中,有鉛筆、鋼筆和水彩筆,類似于頁面中的<div><span>各個元素,雖然同屬于一個容器,但有各自的功能,jQuery 中可以根據(jù)元素名查找元素,格式如下:

$("element")

其中 element 就是元素的名稱,也就是工具盒中的筆的名稱,找到水彩筆,我們就可畫畫了,通過元素名找到元素就可以對它進行操作了。

如下圖所示:在頁面中,根據(jù)元素名找到了一個元素,并將它顯示的字體加粗。

在瀏覽器中顯示的效果:

從上面圖中可以看出,根據(jù)元素的名稱可以查找到該元素,并調用 css() 方法將設置該元素內容中文字顯示的樣式。

此外
css() 方法的功能是設置或獲取元素的某項樣式屬性

attr()方法的功能是設置或獲取元素的某項屬性值

.class 選擇器

我們在上一小節(jié)介紹了通過使用元素名稱查詢元素的方法,其實,還可以通過元素的類別屬性查找元素,就好比在文具盒中要找一個"紅色"鉛筆一樣,根據(jù)元素的某個特征進行查找,它的調用格式如下:

$(".class")

其中.class參數(shù)表示元素的 CSS 類別(類選擇器)名稱。

例如,在頁面中,通過 class 選擇器獲取某個元素,并顯示該元素的 class 類別名稱,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,通過 class 選擇器的方式獲取元素,并調用元素的 attr() 方法獲取元素的類別名稱,并將名稱顯示在頁面中。

* 選擇器

有一個非常"牛"的選擇器,*選擇器,它的功能是獲取頁面中的全部元素,"全部"啊!包括<head>、<body>、<script>這些元素,相當于可以取走你文具盒中的所有鉛筆,格式為:

$("*")

選擇器中的參數(shù)就一個"*",既沒有"#"號,也沒有"."號。 由于該選擇器的特殊性,它常與其他元素組合使用,表示獲取其他元素中的全部子元素。

如下圖所示: 使用*選擇器,獲取 div 中的所有子元素并設置三個子元素顯示相同的內容。

在瀏覽器中顯示的效果:

由于三個元素都包含在<div>元素中,因此,它們都是<div>元素的子元素,那么,就可以使用$("div *")的方式獲取<div>元素中的這三個子元素,并使用 html() 方法來設置它們顯示的內容。

實踐證明,由于使用*選擇器獲取的是全部元素,因此,有些瀏覽器將會比較緩慢,這個選擇器也需要謹慎使用。

sele1, sele2, seleN 選擇器

有時需要精確的選擇任意多個指定的元素,類似于從文具盒中挑選出多根自已喜歡的筆,就需要調用 sele1, sele2, seleN 選擇器,它的調用格式如下:

$("sele1,sele2,seleN")

其中參數(shù) sele1、sele2 到 seleN 為有效選擇器,每個選擇器之間用","號隔開,它們可以是之前提及的各種類型選擇器,如$("#id")$(".class")$("selector")選擇器等。

例如,通過選擇器獲取其中的任意兩個元素,并將它們顯示的內容設為相同,如圖所示:

在瀏覽器中顯示的效果:

雖然頁面中添加了三個元素,但是通過使用$("div,p")選擇器方式獲取了其中的<div><p>元素,并設置它們顯示的內容。

ance desc 選擇器

本節(jié)開始,我們將介紹層次性選擇器。

在實際應用開發(fā)中,常常是多個元素嵌套在一起,形成復雜的層次關系,通過層次選擇器,可以快速定位某一層次的一個或多個元素,ance desc選擇器就是其中之一,它的調用格式如下:

$("ance desc")

其中 ance desc 是使用空格隔開的兩個參數(shù)。ance參數(shù)(ancestor 祖先的簡寫)表示父元素;desc 參數(shù)(descendant 后代的簡寫)表示后代元素,即包括子元素、孫元素等等。兩個參數(shù)都可以通過選擇器來獲取。比如家族姓氏"div",家族幾代人里,都有名字里帶"span"的,就可以用這個ance desc選擇器把這幾個人給定位出來。

例如,使用層次選擇器,獲取<div>元素中的全部<span>元素,并設置它們顯示的內容,在如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,使用層次選擇器$("div span")獲取了在<div>元素中的兩個元素,一個是<p>元素中的子元素,另一個是<p>元素外的同級元素,但它們都是在一個<div>元素下,也就是說在一個"家族"下。

parent > child 選擇器

與上一節(jié)介紹的ance desc選擇器相比,parent > child選擇器的范圍要小些,它所選擇的目標是子集元素,相當于一個家庭中的子輩們,但不包括孫輩,它的調用格式如下:

$("parent > child")

child 參數(shù)獲取的元素都是 parent 選擇器的子元素,它們之間通過">"符號來表示一種層次關系。

如圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,使用$("div>span")選擇器代碼,獲取的是<div>"家庭中"全部"子輩"<span>元素,不包括"孫輩"<span>元素和"家庭外"的<span>元素。

prev + next 選擇器

俗話說"遠親不如近鄰",而通過prev + next選擇器就可以查找與"prev"元素緊鄰的下一個"next"元素,格式如下:

$("prev + next")

其中參數(shù)cprevc為任何有效的選擇器,參數(shù)"next"為另外一個有效選擇器,它們之間的"+"表示一種上下的層次關系,也就是說,"prev"元素最緊鄰的下一個元素由"next"選擇器返回的并且只返回唯的一個元素。

例如,使用prev + next選擇器,獲取<p>元素最近鄰的下一個元素,如下圖所示:

在瀏覽器中顯示的效果:

prev ~ siblings 選擇器

與上一節(jié)中介紹的prev + next層次選擇器相同,prev ~ siblings選擇器也是查找 prev 元素之后的相鄰元素,但前者只獲取第一個相鄰的元素,而后者則獲取 prev 元素后面全部相鄰的元素,它的調用格式如下:

$("prev ~ siblings")

其中參數(shù) prev 與 siblings 兩者之間通過"~"符號形成一種層次相鄰的關系,表明 siblings 選擇器獲取的元素都是 prev 元素之后的同輩元素。

例如,使用prev ~ sliblings選擇器,獲取<p>元素后面相鄰的全部元素,并設置它們在頁面中顯示的內容,如下圖所示:

在瀏覽器中顯示的效果:

可以看出,調用$("p~span")選擇器代碼,獲取了<p>元素下面兩個(全部)的<span>元素,該元素不包含<p>元素上面的元素和不屬于同輩范圍的元素。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,923評論 6 535
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,740評論 3 420
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,856評論 0 380
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,175評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,931評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,321評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,383評論 3 443
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,533評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,082評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,891評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,067評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,618評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,319評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,732評論 0 27
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,987評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,794評論 3 394
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,076評論 2 375

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,777評論 1 92
  • 因為要考試的原因,我已經(jīng)連續(xù)不看新聞和信息近2周的時間,今天空閑時間將手機拿起來翻閱的時候,發(fā)現(xiàn)了一則熱帖: 老公...
    悠淺說閱讀 586評論 0 2
  • 很高興遇到一群積極向上的朋友,大家都是為了同一個目的,為了遇到更好的自己。 今天是第一次在簡書上寫文章,心臟碰碰的...
    花甲先生閱讀 267評論 0 4
  • 一歲一枯榮,一度一回首。驀然間,是恍如隔世的滄桑,還是春風依舊的美好? 如果時間忘記了呼吸,那么歲月會不...
    袞小閑閱讀 466評論 10 6