jQuery基礎知識之選擇器
阿新 • • 發佈：2019-02-19
前面的部落格中，我簡單的介紹了一些jQuery中的選擇器，現在我介紹更多的選擇器給大家。
一、基礎選擇器
一個有很多格子的盒子裡裝滿不同顏色的球，且有幾種不同的大小，相同大小的球放在同一個格子裡，且每種顏色的球各有多個，並對每個球編號。
1.#id選擇器$(“#id”),選取指定id元素，取出某個編號的球
2.element標籤元素選擇器
3.class選擇器，
4.選擇器，這是個最牛逼的選擇器，
5.sele1,sele2,…seleN,選擇自己喜歡的球，$(“.red,.green”),用”,”，隔開
6.ance desc 選擇器，也叫祖先（ancestor），後輩（descendent）選擇器,是一種層次選擇器，如 $(“div span”).css(“background-color”,”blue”);選取div中的span元素並將其背景色改為bule
7.parent>child選擇器，這個選擇器只有一級，選取父輩的子元素,$如(“div>p”).css(“background-color”,”blue”);
8.prev+next選擇器，遠親不如近鄰選擇器。prev在前面，next是prev後面第一個出現的所選取標籤的元素，如$(“p+span”),選取p後面第一個span標籤
9.prev~siblings選擇器，選擇後面全部相鄰的元素，如$(“p+a”),選取p後面全部的a標籤元素
程式碼如下:(其餘程式碼自己可以嘗試一下)
<html> <head> <title>prev ~ siblings選擇器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> 碼農家族 <label></label> <p></p> <label></label> <label></label> </div> <label></label> <script type="text/javascript"> $("p~label").css("border", "solid 1px red"); $("p~label").html("我們都是p先生的粉絲"); </script> </body> </html>
css
div, p, label
{
float: left;
border: solid 1px #ccc;
margin: 5px;
padding: 5px;
}
p,label
{
width:230px;
height:30px;
}
p
{
border: solid 1px red;
}