jquery選中元素使用哪些選擇器

jQuery 的選擇器可謂之強(qiáng)大無(wú)比，這里簡(jiǎn)單地總結(jié)一下常用的元素查找方法

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括潞州網(wǎng)站建設(shè)、潞州網(wǎng)站制作、潞州網(wǎng)頁(yè)制作以及潞州網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，潞州網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到潞州省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

基本選擇器：

$("#myELement")??? 選擇id值等于myElement的元素，id值不能重復(fù)在文檔中只能有一個(gè)id值是myElement所以得到的是唯一的元素

$("div")?????????? 選擇所有的div標(biāo)簽元素，返回div元素?cái)?shù)組

$(".myClass")????? 選擇使用myClass類的css的所有元素

$("*")???????????? 選擇文檔中的所有的元素，可以運(yùn)用多種的選擇方式進(jìn)行聯(lián)合選擇：例如$("#myELement,div,.myclass")

層疊選擇器：

$("form input")???????? 選擇所有的form元素中的input元素

$("#main *")????????? 選擇id值為main的所有的子元素

$("label + input")???? 選擇所有的label元素的下一個(gè)input元素節(jié)點(diǎn)，經(jīng)測(cè)試選擇器返回的是label標(biāo)簽后面直接跟一個(gè)input標(biāo)簽的所有input標(biāo)簽元素

$("#prev ~ div")?????? 同胞選擇器，該選擇器返回的為id為prev的標(biāo)簽元素的所有的屬于同一個(gè)父元素的div標(biāo)簽

3.基本過(guò)濾選擇器：

$("tr:first")?????????????? 選擇所有tr元素的第一個(gè)

$("tr:last")??????????????? 選擇所有tr元素的最后一個(gè)

$("input:not(:checked) + span")

過(guò)濾掉：checked的選擇器的所有的input元素

$("tr:even")?????????????? 選擇所有的tr元素的第0，2，4... ...個(gè)元素（注意：因?yàn)樗x擇的多個(gè)元素時(shí)為數(shù)組，所以序號(hào)是從0開(kāi)始）

$("tr:odd")??????????????? 選擇所有的tr元素的第1，3，5... ...個(gè)元素

$("td:eq(2)")???????????? 選擇所有的td元素中序號(hào)為2的那個(gè)td元素

$("td:gt(4)")???????????? 選擇td元素中序號(hào)大于4的所有td元素

$("td:ll(4)")????????????? 選擇td元素中序號(hào)小于4的所有的td元素

$(":header")

$("div:animated")

4.內(nèi)容過(guò)濾選擇器：

$("div:contains('John')") 選擇所有div中含有John文本的元素

$("td:empty")?????????? 選擇所有的為空（也不包括文本節(jié)點(diǎn)）的td元素的數(shù)組

$("div:has(p)")??????? 選擇所有含有p標(biāo)簽的div元素

$("td:parent")????????? 選擇所有的以td為父節(jié)點(diǎn)的元素?cái)?shù)組

5. ? 可視化過(guò)濾選擇器：

$("div:hidden")??????? 選擇所有的被hidden的div元素

$("div:visible")??????? 選擇所有的可視化的div元素

6.屬性過(guò)濾選擇器：

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

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

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

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

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

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

$("input[id][name$='man']")??? 可以使用多個(gè)屬性進(jìn)行聯(lián)合選擇，該選擇器是得到所有的含有id屬性并且那么屬性以man結(jié)尾的元素

7.子元素過(guò)濾選擇器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child")????????? 返回所有的div元素的第一個(gè)子節(jié)點(diǎn)的數(shù)組

$("div span:last-child")?????????? 返回所有的div元素的最后一個(gè)節(jié)點(diǎn)的數(shù)組

$("div button:only-child")?????? 返回所有的div中只有唯一一個(gè)子節(jié)點(diǎn)的所有子節(jié)點(diǎn)的數(shù)組

8.表單元素選擇器：

$(":input")????????????????? 選擇所有的表單輸入元素，包括input, textarea, select 和 button

$(":text")???????????????????? 選擇所有的text input元素

$(":password")?????????? 選擇所有的password input元素

$(":radio")?????????????????? 選擇所有的radio input元素

$(":checkbox")??????????? 選擇所有的checkbox input元素

$(":submit")?????????????? 選擇所有的submit input元素

$(":image")???????????????? 選擇所有的image input元素

$(":reset")?????????????????? 選擇所有的reset input元素

$(":button")??????????????? 選擇所有的button input元素

$(":file")???????????????????? 選擇所有的file input元素

$(":hidden")?????????????? 選擇所有類型為hidden的input元素或表單的隱藏域

9.表單元素過(guò)濾選擇器：

$(":enabled")???????????? 選擇所有的可操作的表單元素

$(":disabled")??????????? 選擇所有的不可操作的表單元素

$(":checked")??????????? 選擇所有的被checked的表單元素

$("select option:selected") 選擇所有的select 的子元素中被selected的元素

jquery使用css選擇器來(lái)選取元素嗎

是的，jQuery使用 CSS 選擇器來(lái)選取元素。

jQuery 使用 CSS 選擇器來(lái)選取 HTML 元素。例如：

$("p") 選取 p 元素。

$("p.intro") 選取所有 class="intro" 的 p 元素。

$("p#demo") 選取所有 id="demo" 的 p 元素。

jQuery css()選擇器是jquery中的一個(gè)功能。

使用jQuery按name屬性選擇元素

給定一個(gè)HTML文檔，如何使用jQuery按name屬性選擇元素？下面本篇文章就來(lái)給大家介紹一下使用jQuery按name屬性選擇元素的方法，希望對(duì)大家有所幫助。

在jQuery中，可以使用2個(gè)方法通過(guò)name屬性選擇元素；下面就來(lái)通過(guò)示例來(lái)介紹一下。

方法1：使用name屬性選擇器

name屬性選擇器可用于按name屬性選擇元素。此選擇器選擇值與指定值完全相等的元素。

語(yǔ)法：

示例：

輸出：

方法2：使用javascript按名稱獲取元素并將其傳遞給jQuery

可以使用javascript getElementsByName()方法選擇所需的元素，并將其傳遞給jQuery函數(shù)，以進(jìn)一步用作jQuery對(duì)象。

語(yǔ)法：

示例：

輸出：

更多 web開(kāi)發(fā) 相關(guān)知識(shí)，請(qǐng)查閱 HTML中文網(wǎng) ?。?/p>

jquery選擇元素時(shí)可以使用哪些選擇器

可以直接使用類名，比如類名為class的元素：$(".class")

可以直接使用id名，比如ID名為ID的元素：$("#ID")

可以直接使用標(biāo)簽名，如：$("p")

可以混用，如類名為UL的列表：$(".UL

li")

Jquery如何選取元素及其所有子元素？

$("div")//選取div

$("divp")//選取div的子元素p

jQuery 選擇器大全

$("#myELement")????選擇id值等于myElement的元素，id值不能重復(fù)在文檔中只能有一個(gè)id值是myElement所以得到的是唯一的元素?

$("div")???????????選擇所有的div標(biāo)簽元素，返回div元素?cái)?shù)組?

$(".myClass")??????選擇使用myClass類的css的所有元素?

$("*")?????????????選擇文檔中的所有的元素，可以運(yùn)用多種的選擇方式進(jìn)行聯(lián)合選擇：例如$("#myELement,div,.myclass")?

層疊選擇器：?

$("form?input")?????????選擇所有的form元素中的input元素?

$("#main??*")??????????選擇id值為main的所有的子元素?

$("label?+?input")?????選擇所有的label元素的下一個(gè)input元素節(jié)點(diǎn)，經(jīng)測(cè)試選擇器返回的是label標(biāo)簽后面直接跟一個(gè)input標(biāo)簽的所有input標(biāo)簽元素?

$("#prev?~?div")???????同胞選擇器，該選擇器返回的為id為prev的標(biāo)簽元素的所有的屬于同一個(gè)父元素的div標(biāo)簽?

基本過(guò)濾選擇器：?

$("tr:first")???????????????選擇所有tr元素的第一個(gè)?

$("tr:last")????????????????選擇所有tr元素的最后一個(gè)?

$("input:not(:checked)?+?span")???

過(guò)濾掉：checked的選擇器的所有的input元素?

$("tr:even")???????????????選擇所有的tr元素的第0，2，4...?...個(gè)元素（注意：因?yàn)樗x擇的多個(gè)元素時(shí)為數(shù)組，所以序號(hào)是從0開(kāi)始）?

$("tr:odd")????????????????選擇所有的tr元素的第1，3，5...?...個(gè)元素?

$("td:eq(2)")?????????????選擇所有的td元素中序號(hào)為2的那個(gè)td元素?

$("td:gt(4)")?????????????選擇td元素中序號(hào)大于4的所有td元素?

$("td:ll(4)")??????????????選擇td元素中序號(hào)小于4的所有的td元素?

$(":header")?

$("div:animated")?

內(nèi)容過(guò)濾選擇器：?

$("div:contains('John')")?選擇所有div中含有John文本的元素?

$("td:empty")???????????選擇所有的為空（也不包括文本節(jié)點(diǎn)）的td元素的數(shù)組?

$("div:has(p)")????????選擇所有含有p標(biāo)簽的div元素?

$("td:parent")??????????選擇所有的以td為父節(jié)點(diǎn)的元素?cái)?shù)組?

可視化過(guò)濾選擇器：?

$("div:hidden")????????選擇所有的被hidden的div元素?

$("div:visible")????????選擇所有的可視化的div元素?

屬性過(guò)濾選擇器：?

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

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

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

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

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

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

$("input[id][name$='man']")????可以使用多個(gè)屬性進(jìn)行聯(lián)合選擇，該選擇器是得到所有的含有id屬性并且那么屬性以man結(jié)尾的元素?

子元素過(guò)濾選擇器：?

$("ul?li:nth-child(2)"),$("ul?li:nth-child(odd)"),$("ul?li:nth-child(3n?+?1)")?

$("div?span:first-child")??????????返回所有的div元素的第一個(gè)子節(jié)點(diǎn)的數(shù)組?

$("div?span:last-child")???????????返回所有的div元素的最后一個(gè)節(jié)點(diǎn)的數(shù)組?

$("div?button:only-child")???????返回所有的div中只有唯一一個(gè)子節(jié)點(diǎn)的所有子節(jié)點(diǎn)的數(shù)組?

表單元素選擇器：?

$(":input")??????????????????選擇所有的表單輸入元素，包括input,?textarea,?select?和?button?

$(":text")?????????????????????選擇所有的text?input元素?

$(":password")???????????選擇所有的password?input元素?

$(":radio")???????????????????選擇所有的radio?input元素?

$(":checkbox")????????????選擇所有的checkbox?input元素?

$(":submit")???????????????選擇所有的submit?input元素?

$(":image")?????????????????選擇所有的image?input元素?

$(":reset")???????????????????選擇所有的reset?input元素?

$(":button")????????????????選擇所有的button?input元素?

$(":file")?????????????????????選擇所有的file?input元素?

$(":hidden")???????????????選擇所有類型為hidden的input元素或表單的隱藏域?

表單元素過(guò)濾選擇器：?

$(":enabled")?????????????選擇所有的可操作的表單元素?

$(":disabled")????????????選擇所有的不可操作的表單元素?

$(":checked")????????????選擇所有的被checked的表單元素?

$("select?option:selected")?選擇所有的select?的子元素中被selected的元素?

選取一個(gè)?name?為”S_03_22″的input?text框的上一個(gè)td的text值

$(”input[@?name?=S_03_22]“).parent().prev().text()?

名字以”S_”開(kāi)始，并且不是以”_R”結(jié)尾的

$(”input[@?name?^='S_']“).not(”[@?name?$='_R']“)?

一個(gè)名為?radio_01的radio所選的值

$(”input[@?name?=radio_01][@checked]“).val();?

$("A?B")?查找A元素下面的所有子節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)

$("AB")?查找A元素下面的直接子節(jié)點(diǎn)

$("A+B")?查找A元素后面的兄弟節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)

$("A~B")?查找A元素后面的兄弟節(jié)點(diǎn)，不包括非直接子節(jié)點(diǎn)?

1.?$("A?B")?查找A元素下面的所有子節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)?

例子：找到表單中所有的?input?元素?

HTML?代碼:?

form

labelName:/label

input?name="name"?/

fieldset

labelNewsletter:/label

input?name="newsletter"?/

/fieldset

/form

input?name="none"?/?

jQuery?代碼:?

$("form?input")?

結(jié)果:?

[?input?name="name"?/,?input?name="newsletter"?/?]?

2.?$("AB")?查找A元素下面的直接子節(jié)點(diǎn)?

例子：匹配表單中所有的子級(jí)input元素。?

HTML?代碼:?

form

labelName:/label

input?name="name"?/

fieldset

labelNewsletter:/label

input?name="newsletter"?/

/fieldset

/form

input?name="none"?/?

jQuery?代碼:?

$("form??input")?

結(jié)果:?

[?input?name="name"?/?]?

3.?$("A+B")?查找A元素后面的兄弟節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)?

例子：匹配所有跟在?label?后面的?input?元素?

HTML?代碼:?

form

labelName:/label

input?name="name"?/

fieldset

labelNewsletter:/label

input?name="newsletter"?/

/fieldset

/form

input?name="none"?/?

jQuery?代碼:?

$("label?+?input")?

結(jié)果:?

[?input?name="name"?/,?input?name="newsletter"?/?]?

4.?$("A~B")?查找A元素后面的兄弟節(jié)點(diǎn)，不包括非直接子節(jié)點(diǎn)?

例子：找到所有與表單同輩的?input?元素?

HTML?代碼:?

form

labelName:/label

input?name="name"?/

fieldset

labelNewsletter:/label

input?name="newsletter"?/

/fieldset

/form

input?name="none"?/?

jQuery?代碼:?

$("form?~?input")?

結(jié)果:?

[?input?name="none"?/?]

jquery怎么選擇某個(gè)div下的某一個(gè)元素

需要準(zhǔn)備的材料分別有：電腦、html編輯器、瀏覽器。

1、首先，打開(kāi)html編輯器，新建html文件，例如：index.html，并引入jquery，編寫(xiě)問(wèn)題基礎(chǔ)代碼。

2、在index.html中的script標(biāo)簽，輸入jquery代碼：

$('#a').html('img src="' + $('#img1 img').attr('src') + '"/');

3、瀏覽器運(yùn)行index.html頁(yè)面，此時(shí)成功選擇到img1中的圖片并顯示在另一個(gè)div中。