當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

jquery选择器案例分享

發(fā)布時(shí)間：2023/12/3 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery选择器案例分享小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

其中選擇器都已經(jīng)注釋，需要測(cè)試哪個(gè)打開(kāi)注釋即可觀察效果！！

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript">$(function(){//標(biāo)簽選擇器//$("p").css("color","red");//類選擇器//$(".p1").css("background","red");//ID選擇器//$("#box").css("border","1px solid black").css("height","400px");//并集選擇器//$("p,span").css("color","blue");//全局選擇器//$("*").css("color","pink");//后代選擇器//$("#box p").css("color","red");//子選擇器：//$("#box>p").css("color","red");//相鄰元素選擇器//$(".p2+p").css("color","red");//同輩元素選擇器//$(".p2~p").css("color","red");//屬性選擇器//給包含name的元素表單里面賦值//$("[name]").val("已經(jīng)賦值");//選擇name屬性的值為text的賦值//$("[name='text']").val("已經(jīng)賦值");//給name屬性的值不是text的賦值//$("[name!='text']").val("已經(jīng)賦值");//給name屬性的值以p開(kāi)頭的//$("[name^='p']").val("已經(jīng)賦值");//給name屬性的值以e結(jié)尾的//$("[name$='e']").val("已經(jīng)賦值");//給name屬性的值包含e的//$("[name*='e']").val("已經(jīng)賦值");//給包含type屬性等于password和name=phone的input屬性賦值//$("input[name='password'][type='password']").val("已經(jīng)賦值");//過(guò)濾性選擇器//第一個(gè)p元素的字體為紅色//$("p:first").css("color","red");//最后一個(gè)p元素的字體為紅色//$("p:last").css("color","red");//p里面class不是p3的字體為紅色//$("p:not(.p3)").css("color","red");//p里面偶數(shù)的字體為紅色(從0開(kāi)始)//$("p:even").css("color","red");//p里面奇數(shù)的字體為紅色(從1開(kāi)始)//$("p:odd").css("color","red");//p里面索引等于3的字體為紅色(從0開(kāi)始)//$("p:eq(3)").css("color","red");//p里面索引大于2的字體為紅色(從0開(kāi)始)//$("p:gt(3)").css("color","red");//p里面索引小于2的字體為紅色(從0開(kāi)始)//$("p:lt(3)").css("color","red");//將網(wǎng)頁(yè)中的所有標(biāo)題顏色//$(":header").css("color","red");//獲取網(wǎng)頁(yè)中聚焦點(diǎn)的元素//$("[name='password']").focus();//$(":focus").css("color","red");})</script></head><body><header>這是頭部分</header><div id="box"><p class="p1">第一個(gè)p標(biāo)簽<span>這是p1里面的span標(biāo)簽</span><p>這是p1里面的p標(biāo)簽</p></p><p class="p2">第二個(gè)p標(biāo)簽</p><p class="p3">第三個(gè)p標(biāo)簽</p><p class="p4">第四個(gè)p標(biāo)簽</p><p class="p5">第五個(gè)p標(biāo)簽</p><span>這是一個(gè)span標(biāo)簽<p>這是span里面的p標(biāo)簽</p></span><h2>這是一個(gè)h2標(biāo)簽</h2>屬性選擇器：用戶名：<input type="text" name="text" value="" />密碼：<input type="password" name="password" value="" />電話：<input type="text" name="phone" value="" />電子郵件：<input type="text" name="email" value="" /></div></body> </html>

總結(jié)

以上是生活随笔為你收集整理的jquery选择器案例分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。