jQuery笔记---选择器
生活随笔
收集整理的這篇文章主要介紹了
jQuery笔记---选择器
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
查找API，jQuery選擇器，定位標(biāo)簽
1.基本選擇器
- id定位標(biāo)簽
- class屬性定位標(biāo)簽
- 標(biāo)簽名定位標(biāo)簽
2.舉例
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.8.2.js"></script></head><body><div id="div1ID">div1</div><div id="div2ID">div2</div><span class="myClass">span</span><p>p</p><script type="text/javascript">//1)查找ID為"div1ID"的元素個(gè)數(shù) $(“#divID”.size())//2)查找DIV元素的個(gè)數(shù) $(“div”).size();//3)查找所有樣式是"myClass"的元素的個(gè)數(shù) $(“.myClass”).size();//4)查找所有DIV,SPAN,P元素的個(gè)數(shù) ,多個(gè)屬性定位的時(shí)候，可以使用逗號(hào)隔開(kāi)3 $(“div,span,p”).zize();//5)查找所有ID為div1ID,CLASS為myClass,P元素的個(gè)數(shù)$(“#div,.class,p”)</script></body> </html> 多個(gè)是可以使用，將他們隔開(kāi)2.層次選擇器
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.8.2.js"></script></head><body><form><input type="text" value="a"/> <table><tr><td><input type="checkbox" value="b"/></td></tr> </table></form><input type="radio" value="c"/><input type="radio" value="d"/><input type="radio" value="e"/><script type="text/javascript"> //1)找到表單form下所有的input元素的個(gè)數(shù) $(“form input”).size();//2)找到表單form下所有的子級(jí)input元素個(gè)數(shù)$(“form> input”).size();第一個(gè)和第二個(gè)是區(qū)別：第一個(gè)是所有的input標(biāo)簽。第二個(gè)是form的子一代，子二代不包括在內(nèi)。//3)找到表單form同級(jí)第一個(gè)input元素的value屬性值$(“form+input ”).val();//4)找到所有與表單form同級(jí)的input元素個(gè)數(shù)
alert( $("form ~ input").size() )
</script> </body> </html>
總結(jié)：form標(biāo)簽下的標(biāo)簽
? ? ? ? ? $("form input"）.size();
? ? ? ? ?form標(biāo)簽下子一代的標(biāo)簽
? $("form > input").size()
? ? ? ? form標(biāo)簽的同一級(jí)的第一個(gè)標(biāo)簽
? ? ? ? $("form +input"）
? ? ? ? form標(biāo)簽同一級(jí)的標(biāo)簽
$("form ~ input")
3.增強(qiáng)基本選擇器
格式：$("ul li ：XX").text();
$(":header"),css("XX","XX").css("XX","XX")……當(dāng)有很多的css樣式的時(shí)候，可以使用一直，的方式向下添加。
//1)查找UL中第一個(gè)元素的內(nèi)容 alert( $("ul li:first").text() ); //2)查找UL中最后個(gè)元素的內(nèi)容 alert( $("ul li:last").text() ); //4)查找表格的索引號(hào)為1、3、5...奇數(shù)行個(gè)數(shù)，索引號(hào)從0開(kāi)始 alert( $("table tr:odd").size() ); //5)查找表格的索引號(hào)為2、4、6...偶數(shù)行個(gè)數(shù)，索引號(hào)從0開(kāi)始 alert( $("table tr:even").size() ); //6)查找表格中第二行的內(nèi)容，從索引號(hào)0開(kāi)始，這是一種祖先 后代 的變化形式 alert( $("table tr td:eq(1)").text() ); //7)查找表格中第二第三行的個(gè)數(shù)，即索引值是1和2，也就是比0大 alert( $("table tr:gt(0)").size() ); //8)查找表格中第一第二行的個(gè)數(shù)，即索引值是0和1，也就是比2小 alert( $("table tr:lt(2)").size() ); //9)給頁(yè)面內(nèi)所有標(biāo)題<h1><h2><h3>加上紅色背景色，且文字加藍(lán)色 $(":header").css("background-color","red").css("color","blue"); //3)查找所有未選中的input為checkbox的元素個(gè)數(shù) alert( $(":checkbox:NOT(:checked)").size() );5.內(nèi)容選擇器
//1)查找所有包含文本"John"的div元素的個(gè)數(shù)alert( $("div:contains('John')").size() ); //2)查找所有p元素為空的元素個(gè)數(shù)alert( $("p:empty").size() ); //3)給所有包含p元素的div元素添加一個(gè)myClass樣式$("div:has(p)").addClass("myClass"); //4)查找所有含有子元素或者文本的p元素個(gè)數(shù),即p為父元素alert( $("p:parent").size() );7.使用jQuery的作用是，可以方便的操作web頁(yè)面的標(biāo)簽和樣式參數(shù)。
- val()：獲取標(biāo)簽的value屬性值【假定有value屬性】
- html（）：獲取標(biāo)簽之間的內(nèi)容，不用于xml文件。
- text():獲取標(biāo)簽之間的內(nèi)容，用于任何格式的參數(shù)（推薦）
- css（）：使用key-value的方式，給標(biāo)簽添加樣式。
- addClass():加已經(jīng)定義好的樣式。
- size（）獲取到屬性的個(gè)數(shù)。
- length:獲取對(duì)象和數(shù)組中的對(duì)象個(gè)數(shù)。
?
轉(zhuǎn)載于:https://www.cnblogs.com/kw28188151/p/8296135.html
總結(jié)
以上是生活随笔為你收集整理的jQuery笔记---选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JavaScript学习笔记系列2:Do
- 下一篇： 网络互连