选择器

$(“div”) 标签名选择器
$(\”#div1\”) id选择器
$(\”.div0\”) class选择器
$(\”*\”) 通配符选择器
$(“div .div1”) 后代选择器
$(“div>.div1”) 子代选择器
$(\”.div1+div\”) 下一个兄弟选择器
$(\”.div1~div\”) 下面所有的兄弟选择器

$(“div.div1”) div中类名是div1的div
$(“div .div1”) div后代中类名是div1的元素

$(\”.div1>\”) 类名是div1所有的子元素
$(\”.div1>\”).length div1下所有子元素的数量
$(\”.div1>\”).length div1下所有子元素的数量

$(\”.div1+*\”) div1下一个任意兄弟元素
$(\”.div1+\”) div1下一个任意兄弟元素

(\”.div1\”).next();等于(\”.div1\”).next(); 等于(\”.div1\”).next();等于(\”.div1+\”);
(\”.div1\”).nextAll();等于(\”.div1\”).nextAll(); 等于(\”.div1\”).nextAll();等于(\”.div1~\”);
$(\”.div1\”).nextUntil(\”.div2\”).css(“color”,“red”); div1到div2之间的兄弟元素

$(\”.div1\”).prev(); 向上的一个兄弟元素
$(\”.div1\”).prevAll(); 向上的所有兄弟元素
$(\”.div1\”).prevUntil(\”.div2\”); 向上到div2之间的兄弟元素

(\”.div1\”).find(\”span\”);等于(\”.div1\”).find(\”span\”); 等于(\”.div1\”).find(\”span\”);等于(\”.div1 span\”);
(\”.div1\”).children();等于(\”.div1\”).children(); 等于(\”.div1\”).children();等于(\”.div>\”);

属性选择器

console.log((\”div[a]\”));[a]表示是否具备标签属性aconsole.log((\”div[a]\”)); [a] 表示是否具备标签属性aconsole.log((\”div[a]\”));[a]表示是否具备标签属性aconsole.log((\”[a]\”));//[a] 表示是否具备标签属性a
console.log((\”[a=1]\”));//标签必须有a属性，并且属性值是1console.log((\”[a=1]\”));//标签必须有a属性，并且属性值是1console.log((\”[a=1]\”));//标签必须有a属性，并且属性值是1console.log((\”[a^=1]\”));//属性值的开头是1的元素
$(\”[b|=ab]\”).css(“color”,“red”);//值是ab或者以ab起头后面使用—来连接的

$(\”[b~=ab]\”).css(“color”,“red”);//值是ab或者值是以空格分隔的多个值，并且其中包含ab的
一般用于class中的多个样式选择
(\”[b(\”[b(\”[b=b]\”);以b结尾的值
$(\”[b!=ab]\”);值不是ab的
$(\”[b*=c]\”);值中包含有c这个字符的
$(\”[a][b]\”);//有a属性和b属性的元素

过滤器

过滤第一个和最后一个的三种语句

$(“li:first”).css(“color”,“red”);
$(“li”).first();
$(“li:last”)
$(“li”).last();
将所有li放在一个列表中，筛选出第一个(最后一个)元素

$(“li:first-child”).css(“color”,“red”);
$(“li:last-child”)
查看每个li父元素中的第一个(最后一个)子元素，如果是li的筛选出来

$(“li:first-of-type”).css(“color”,“red”);
$(“li:last-of-type”)
将每个li的父元素中第一个(最后一个)类型是li的子元素筛选出来

过滤奇偶的两种情况

console.log($(“ul>:not(li)”)); ul所有子元素中不是li元素的
$(“ul>”).not(“li”)
$(“li:even”).css(“color”,“red”); 偶数项 列表是从0开始计数
$(“li:odd”).css(“color”,“red”); 奇数项 列表是从0开始计数

$(“li:nth-child(2)”).css(“color”,“red”); 选中一个li，该li是其父元素容器中第二个元素，包括所有类型的子元素
$(“li:nth-of-type(2)”).css(“color”,“red”); 选中一个li，该li是其父元素容器中所有li子元素组成的列表中的第二个li元素。
$(“li:nth-child(even)”).css(“color”,“red”); 偶数，列表是从1开始计数，计数包含所有类型的子元素
$(“li:nth-of-type(even)”).css(“color”,“red”); 偶数，列表是从1开始计数，计数只包含li类型的子元素

$(“li:nth-child(odd)”).css(“color”,“red”); //奇数，列表是从1开始计数，计数包含所有类型的子元素
$(“li:nth-of-type(odd)”).css(“color”,“red”); //奇数，列表是从1开始计数，计数只包含li类型的子元素

$(“li:nth-child(2n)”);//偶数
$(“li:nth-child(2n-1)”)//奇数
$(“li:nth-child(3n)”)//奇数

筛选固定序号、下标大小于、h1-h6、聚焦、应用动画

$(“li:eq(2)”).css(“color”,“red”); li列表中序号为2的li元素
$(“li”).eq(2)

$(“li:gt(2)”).css(“color”,“red”); 列表中下标大于2的所有元素
$(“li:lt(2)”).css(“color”,“red”); 列表中下标小于2的所有元素

$(\”:header\”); 所有h1-h6的元素
$(\”:animated\”); 所有使用aniamte动画的元素
$(\”:focus\”); 聚焦元素

筛选父子元素相关

$(\”:empty\”)//没有内容或者子元素的元素
$(“div:empty”)

console.log((\”.div1:has(.div2)\”));含有div2的内容的div1元素console.log((\”.div1:has(.div2)\”)); 含有div2的内容的div1元素console.log((\”.div1:has(.div2)\”));含有div2的内容的div1元素console.log((\”.div1\”).has(\”.div2\”))
console.log($(\”.div2:parent\”)); 判断div2有子元素的或者有内容的

console.log((\”.div2\”).parent());获取div2的父元素console.log((\”.div2\”).parent()); 获取div2的父元素console.log((\”.div2\”).parent());获取div2的父元素console.log((\”.div2\”).parents()); 获取div2的所有父元素
console.log($(\”.div2\”).parentsUntil(“html”)); 获取div2的所有父元素中到某个子元素之前的

console.log( (\”.div2:contains(1)\”));console.log((\”.div2:contains(1)\”));console.log((\”.div2:contains(1)\”));console.log((\”.div1:contains(1)\”));//判断元素的后代中有1这个内容的元素，包括孩子孙子之类的所有子代。

$(\”:only-child\”) 只有一个子元素的元素

筛选显示与隐藏

console.log((\”.div4:hidden\”));隐藏元素，针对display:none或者是不显示的元素visibility:hidden;不是隐藏，因为它占位了，所以不会筛选出它console.log((\”.div4:hidden\”)); 隐藏元素，针对display:none或者是不显示的元素visibility: hidden;不是隐藏，因为它占位了，所以不会筛选出它console.log((\”.div4:hidden\”));隐藏元素，针对display:none或者是不显示的元素visibility:hidden;不是隐藏，因为它占位了，所以不会筛选出它console.log((\”:hidden\”)); 筛选所有的隐藏元素

console.log($(\”:visible\”)) 筛选所有的显示元素

筛选返回一个布尔值、slice

console.log((\”div\”).is(\”.div1\”))这个方法得到一个布尔值，是否在div中有类名是div1的元素console.log((\”div\”).is(\”.div1\”)) 这个方法得到一个布尔值，是否在div中有类名是div1的元素console.log((\”div\”).is(\”.div1\”))这个方法得到一个布尔值，是否在div中有类名是div1的元素console.log((“div”).is(\”[a]\”)) 是否在div中有属性名是a的元素
console.log($(“div”).hasClass(“div1”));//这个方法得到一个布尔值，是否在div中类名是div1的元素

console.log($(“li”).slice(2,4));//div列表中选择第2个到第4个之间的元素

input相关的

$(\”:input\”)
$(\”:text\”); type=text的input
$(\”:password\”);

$(\”:disabled\”); 不可用
$(\”:enabled\”); 可用
$(\”:checked\”); 用于input中checkbox和radio
$(\”:selected\”); 用于下拉菜单的元素