JQuery，如何清除，除了點(diǎn)擊的元素以外，其他所有元素

思路：獲取被點(diǎn)擊元素之外的元素，使用remove()方法刪除節(jié)點(diǎn)。

創(chuàng)新互聯(lián)致力于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過(guò)標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。 選擇創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

下面進(jìn)行實(shí)例演示——點(diǎn)擊某個(gè)div后，刪除同級(jí)的其余div元素：

1、HTML結(jié)構(gòu)

1

2

3

2、jquery代碼

$(function(){

$(".test").click(function()

{

$(this).siblings().remove();

//

使用siblings獲取被點(diǎn)擊元素之外的同級(jí)元素，然后使用remove()刪除

});

});

3、效果演示

jQuery怎么獲取一個(gè)DIV下所有元素的值

可以使用jQuery的children方法來(lái)獲取某個(gè)元素下的所有子元素。

工具原料：編輯器、瀏覽器

1、使用children方法可以獲得選擇器下的所有子元素，代碼實(shí)例如下：

!DOCTYPE?html

html

head

script?type="text/javascript"?src="/jquery/jquery.js"/script

style

body?{?font-size:16px;?font-weight:bolder;?}

p?{?margin:5px?0;?}

/style

/head

body

div

spanHello/span

p?class="selected"Hello?Again/p

div?class="selected"And?Again/div

pAnd?One?Last?Time/p

/div

script$("div").children(".selected").css("color",?"blue");/script

/body

/html

2、運(yùn)行的結(jié)果是找到類名為 "selected" 的所有 div 的子元素，并將其設(shè)置為藍(lán)色，結(jié)果如下：

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è)元素外的所有元素？

可以使用jQuery 遍歷中的 not() 方法來(lái)排除某些元素，例如根據(jù)元素的id，class等排除，示例代碼

$("div.content?*").not(".keep");?//?表示content類的div下除keep類以外的所有元素；另外，注意*表示所有元素

下面給出實(shí)例演示：刪除content類的div下除keep類以外的所有元素

創(chuàng)建Html元素

div?class="box"

span點(diǎn)擊按鈕刪除下面綠色框中所有不是keep類的元素，keep類的元素用紅色區(qū)分。/spanbr

div?class="content"

input?type="checkbox"?name="item"span蘿卜/span

input?type="checkbox"?name="item"span青菜/span

input?type="checkbox"?name="item"?class="keep"span?class="keep"小蔥/spanbr

input?type="checkbox"?name="item"?class="keep"span?class="keep"豆腐/span

input?type="checkbox"?name="item"span土豆/span

input?type="checkbox"?name="item"span茄子/spanbr

input?type="text"?value="我也不是keep類的"

/div

input?type="button"?value="刪除"

/div

設(shè)置css樣式

div.box{width:300px;height:200px;padding:10px?20px;border:4px?dashed?#ccc;}

div.boxspan{color:#999;font-style:italic;}

.keep{color:red;}

div.content{width:250px;height:100px;margin:10px?0;border:1px?solid?green;}

input{margin:10px;}

input[type='button']{width:200px;height:35px;margin:10px;border:2px?solid?#ebbcbe;}

編寫(xiě)jquery代碼

$(function(){

$("input:button").click(function()?{

$("div.content?*").not(".keep").each(function()?{?//?"*"表示div.content下的所有元素

$(this).remove();

});

});

})

觀察顯示效果

刪除前

刪除后

當(dāng)前名稱：jquery所有元素,jquery所有元素的同輩元素
文章URL：http://chinadenli.net/article43/dsihies.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、ChatGPT、軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)