jquery选择器案例分享
生活随笔
收集整理的這篇文章主要介紹了
jquery选择器案例分享
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
其中選擇器都已經注釋，需要測試哪個打開注釋即可觀察效果！！
<!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(){//標簽選擇器//$("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("已經賦值");//選擇name屬性的值為text的賦值//$("[name='text']").val("已經賦值");//給name屬性的值不是text的賦值//$("[name!='text']").val("已經賦值");//給name屬性的值以p開頭的//$("[name^='p']").val("已經賦值");//給name屬性的值以e結尾的//$("[name$='e']").val("已經賦值");//給name屬性的值包含e的//$("[name*='e']").val("已經賦值");//給包含type屬性等于password和name=phone的input屬性賦值//$("input[name='password'][type='password']").val("已經賦值");//過濾性選擇器//第一個p元素的字體為紅色//$("p:first").css("color","red");//最后一個p元素的字體為紅色//$("p:last").css("color","red");//p里面class不是p3的字體為紅色//$("p:not(.p3)").css("color","red");//p里面偶數的字體為紅色(從0開始)//$("p:even").css("color","red");//p里面奇數的字體為紅色(從1開始)//$("p:odd").css("color","red");//p里面索引等于3的字體為紅色(從0開始)//$("p:eq(3)").css("color","red");//p里面索引大于2的字體為紅色(從0開始)//$("p:gt(3)").css("color","red");//p里面索引小于2的字體為紅色(從0開始)//$("p:lt(3)").css("color","red");//將網頁中的所有標題顏色//$(":header").css("color","red");//獲取網頁中聚焦點的元素//$("[name='password']").focus();//$(":focus").css("color","red");})</script></head><body><header>這是頭部分</header><div id="box"><p class="p1">第一個p標簽<span>這是p1里面的span標簽</span><p>這是p1里面的p標簽</p></p><p class="p2">第二個p標簽</p><p class="p3">第三個p標簽</p><p class="p4">第四個p標簽</p><p class="p5">第五個p標簽</p><span>這是一個span標簽<p>這是span里面的p標簽</p></span><h2>這是一個h2標簽</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>總結
以上是生活随笔為你收集整理的jquery选择器案例分享的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第二章 变量、数据类型和运算符
- 下一篇： 口袋妖怪极光石攻略 口袋妖怪极光石的通关