Js选择器
<!DOCTYPE html> <html> <head> <title>jquery选择器</title> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> </head> <body>
基本选择器 • id 选择器$('#box') • class 选择器$('.box') • 标记选择器$('p') • * 代表所有标 属性选择器 • [attribute] 匹配包含给定属性的元素 • [attribute=value]匹配给定的属性的元素 • [attribute!=value]匹配给定的属性不是...的元素 • [attribute^=value] 匹配给定的属性以..开头的元素 • [attribute$=value] 配给定的属性以..结尾的元素 • [attribute*=value] 匹配包含给定值的元素 位置选择器 • :first匹配第一个元素 • :last获取最后一个元素 • :not去除所有与给定选择器匹配的元素 • :even匹配所有索引值为偶数的元素 • :odd匹配所有索引值为奇数的元素 • :eq匹配一个给定索引值的元素 • :gt匹配所有大于给定索引值的元素 • :lt匹配所有小于给定索引值的元素
<script> $(".box :first").css("border","1px solid blue"); $(".box :last").css("border","1px solid green"); $(".box :not('.con')").css("background-color","red"); $(".box :even").css("background-color","pink"); $(".box :odd").css("background-color","yellow"); $(".box div:eq(2)").css("font-size","40px"); $(".box div:gt(2)").css("font-size","60px"); $(".box div:lt(2)").css("color","green"); // $(".box div[class^=c]").css("border","1px solid blue"); // $(".box div[class$=n]").css("color","red"); // $(".box div[class*=m]").css("font-size","40px"); // $(".box div[class=con]").css("background-color","yellow"); // $(".box div[class!=con]").css("background-color","orange"); </script> </body> </html>
