面試 jQuery選擇器

2021-06-29 03:05:34 字數 1868 閱讀 4909

jquery選擇器分類:

1,基本選擇器

(1)#id   eg: id=t $("#t") 返回單個元素

(2).class eg:class=t $(".t") 返回class為t的元素集合

(3)elements eg:

$("p") 返回的元素集合

(4)$("*" ) 返回頁面上所有元素集合

(5) $("#t,.t,p") 返回組合元素的集合

2,層次選擇器

(1)$("form select") 返回form表單下的所有select的元素集合

(2)$("#id > *") 返回id元素的所有子元素集合

(3)$("label+input") 返回所有label標籤的後面的第乙個input元素集合

(4)$("$prev ~ div")  返回id=prev的所有同胞div元素集合  

3,過濾選擇器

(1)基本過濾選擇器

$(":first")  $(":last") $(":even") $(":odd") $(":gt(1)") $(":lt(4)") $(":eq(2)")  $(":header")

(2)內容過濾選擇器

$("div:contains('john')")   $("td:empty")  $("div:has(p)") $("td:parent")

(3)視覺化過濾選擇器

$("div:hidden")  $("div:visible")

(4)屬性過濾選擇器   

$("div[id]")              選擇所有含有id屬性的div元素

$("input[name='newsletter']")    選擇所有的name屬性等於'newsletter'的input元素

$("input[name!='newsletter']") 選擇所有的name屬性不等於'newsletter'的input元素

$("input[name^='news']")         選擇所有的name屬性以'news'開頭的input元素

$("input[name$='news']")         選擇所有的name屬性以'news'結尾的input元素

$("input[name*='man']")          選擇所有的name屬性包含'news'的input元素

$("input[id][name$='man']")    可以使用多個屬性進行聯合選擇,該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素

(5)子元素過濾選擇器

4,表單選擇器

選取乙個 name 為」s_03_22″的input text框的上乙個td的text值

$("input[name=s_03_22]").parent().prev().text()

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...

jQuery選擇器之全選擇器( 選擇器)

在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagname 中傳遞 同樣可以獲取到 不難發現...