關於JQ選擇器的介紹

2021-09-21 13:12:24 字數 3023 閱讀 2351

今天來跟大家講一下jq選器的問題。這個在編寫**的時候很重要。因為你要對

具體的元素進行編寫。

文字1文字4 姓名

select option_1 option_2

radio

password

file

< button type="reset">重置表單type="reset" < button type="submit">指定type="submit" - form 中的button如果不指定type預設就是 type="submit" -- button>沒有指定type

一、基本選擇器是jquery中最常用也是最簡單的選擇器,它通過元素的id、class和標籤名等來查詢dom元素。

1. $("#p1") id選擇器,匹配id中唯一的乙個元素,記住id是唯一的 不可重複

2. $(".a") 類選擇器,div 的** class=「pt1」

3. $(「input」); 元素選擇器,可以看作是乙個標籤密名。

4. $("*"); 全部選擇器,這個的選擇和類的則差不多只是這裡運用的是jq的方法

這種我們一般進行宣告賦值在輸出。看下面

$(function () ' at position 32: …sole.log(sid); }̲ 效果圖 ![在這裡插入…(".div1 .a"); 後代選擇器 選取div 1 後面所有的pt2 這個類

2、$(".div1>.b"); 子選擇器

3. $(".a+.b");同輩選擇器

var a= $(".div1 .b");

var b = $(".div1>.b");

var a= $(".pt1+.b");

三.過濾選擇器

基本過濾選擇器

1.first 選取ul 標籤 li 裡的第乙個元素。

2、last 選取 ul 標籤 li 裡的最後乙個元素。

//var first = $(「ul li:first」);

//var last = $(「ul li:last」);

3、even 匹配所有索引值為偶數的元素,從 0 開始計數

4、odd 匹配所有索引值為奇數的元素,從 0 開始計數

//even odd

//var even = $(".div1>p:even");

//var odd = $(".div1>p:odd");

內容過濾選擇器:

:empty

$(":input");匹配不包含子元素或者文字元素的空元素,返回元素集合

var sinput = $(":input");

可見性過濾選擇器

hidden

選取所有不可見的元素,返回元素集合 ,或者type為hidden的元素

屬性過濾選擇器(返回元素集合)

6、[attribute*=value]

(「input[name*=text]」) 選取擁有name屬性含有text的input元素

表單物件屬性過濾選擇器(返回元素集合)

:checked

$(":checkbox")選取所有被選中的元素(單選框,核取方塊)

var scheckbox = (":

chec

kbox

");4

、:se

lect

ed選取

所有被選

中的選項

元素(下

拉列表)

vars

sele

cted

=(":checkbox"); 4、:selected選取所有被選中的選項元素(下拉列表) var sselected=

(":che

ckbo

x");

4、:s

elec

ted選

取所有被

選中的選

項元素(

下拉列表

)var

ssel

ecte

d=(":selected");

表單 :input 匹配所有 input, textarea, select 和 button 元素

:text 匹配所有的單行文字框

:radio 匹配所有單選按鈕

:checkbox 匹配所有核取方塊

:submit 匹配所有提交按鈕

:reset 匹配所有重置按鈕

這裡有乙個過載的功能在表單中經常運用到。這個很重要。

這部分擷取來自於老師的文件擷取

//獲取部分

var sinput = $(":input");

var stext = $(":text");

var spassword = (":

pass

word

");表

單物件屬

性:di

sabl

ed匹配

所有禁用

元素:s

elec

ted只

匹配有s

elec

ted屬

性的op

tion

標籤va

rsa=

(":password"); 表單對 象屬性 :disabled 匹配所有禁用元素 :selected 只匹配有selected屬性的option標籤 var sa=

(":pas

swor

d");

表單物件

屬性:d

isab

led匹

配所有禁

用元素:

sele

cted

只匹配有

sele

cted

屬性的o

ptio

n標籤v

arsa

=(":disabled");

var ck=$(":checked");

其實大部分的獲取都是差不多的 我就不乙個個寫了

關於jq的選擇器還有很多在這裡我只列幾個常用的。內容頁比較簡單。有興趣的可以看一下下,

這些內容並不要求大家死死的記住,大家看的會運用就可以了。寫多了用法也好像差不。

jq常用選擇器

jquery 使用 css 選擇器來選取 html 元素。div 選取 元素。p.intro 選取所有 class intro 的 元素。p demo 選取所有 id demo 的 元素。jquery 使用 xpath 表示式來選擇帶有給定屬性的元素。href 選取所有帶有 href 屬性的元素。h...

jq選擇器總結

js選擇 var test document.getelementbyid test var parent test.parentnode 父節點 var chils test.childnodes 全部子節點 var first test.firstchild 第乙個子節點 var last te...

JQ常用選擇器總結

1 常用選擇器 myelement 選擇id為myelement的元素,唯一元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用myclass類的css的所有元素 選擇文件中的所有的元素,可用多種的選擇方式聯合選擇 例如 myelement,div,myclass 2...