jquery选择器详解

Posted 2020-09-21

一、基本选择器
#box
.box1
div
$("#box, .box1");

二、层级选择器
$("div p"); //div中的所有p
$("div > p"); //div中的子元素p
$("div + p"); //div后面的第一个p
$("div~p"); //div后面所有的p

三、基本过滤选择器
$("p:first"); //p标签中的第一个
$("p:last"); //最后一个
$("p:not(.p)"); //not class="p"的p标签
$("p:even"); //下标为偶数，下标从0开始，隔行换色
$("p:odd"); //下标为奇数
$("p:eq(5)"); //下标 = 5 标签，eq=equal
$("p:gt(3)"); //下标 > 3
$("p:lt(3)"); //下标 < 3

$(":header"); //:header是h1~h6的缩写，匹配所有的h1~h6

四、内容与可见性选择器
$("p:contains(line)"); //匹配到p标签内容中包含line的所有p标签，做搜索
$("p:empty").html("aaaa"); //内容为空的p
$("p:has(i)"); //p标签里面有i标签的p标签
$("p:parent"); //p本身要是父级，或是有子元素的
$("p:hidden").css("display","block"); //找到隐藏了的p标签, <p style="diplay:none">line3</p>
$("p:visible").css("display","none"); //找到可见的p标签

五、属性选择器和子元素选择器
$("p[class]"); //包含属性class
$("p[class=p2]"); //=等于 !=不等于  ^=以什么头 $=以什么结尾 *= 包含什么
$("p[class!=p2]");
$("p[class][class^=a][class$=2]"); //多层过滤

$("p:nth-child(2)"); //p本身是第二个子元素
$("p:first-child"); //p本身是第一个子元素 :last-child :only-child

六、表单选择器
$("form :text"); //<input type="text">
$("input :text"); //也可以吧
$("input:file"); //