寻找web页面元素大全(Jquery选择器)

最近写了比较多的前台代码,每次找页面元素的时候真的头大,现在整理一番,方便以后使用:

$("*") 所有元素
$("#lastname") id=“lastname” 的元素
$(".intro") 所有 class=“intro” 的元素
$(“p”) 所有 段落 元素
$(".intro.demo") 所有 class=“intro” 且 class=“demo” 的元素

$(“p:first”) 第一个段落 元素
$(“p:last”) 最后一个段落 元素
$(“tr:even”) 所有偶数 元素
$(“tr:odd”) 所有奇数 元素

$(“ul li:eq(3)”) 列表中的第四个元素(index 从 0 开始)
$(“ul li:gt(3)”) 列出 index 大于 3 的元素
$(“ul li:lt(3)”) 列出 index 小于 3 的元素
$(“input:not(:empty)”) 所有不为空的 input 元素

$(":header") 所有标题元素
:animated 所有动画元素

$(":contains(‘W3School’)") 包含指定字符串的所有元素
$(":empty") 无子(元素)节点的所有元素
$(“p:hidden”) 所有隐藏的段落元素
$(“table:visible”) 所有可见的表格

案例:
$(“div:contains(‘John’)”) 选择所有div中含有John文本的元素
$(“td:empty”) 选择所有的为空(也不包括文本节点)的td元素的数组
$(“div:has(p)”) 选择所有含有p标签的div元素
$(“td:parent”) 选择所有的以td为父节点的元素数组
$(“th,td,.intro”) 所有带有匹配选择的元素

$(":input") 所有 元素
$(":text") 所有 type=“text” 的 元素
$(":password") 所有 type=“password” 的 元素
$(":radio") 所有 type=“radio” 的 元素
$(":checkbox") 所有 type=“checkbox” 的 元素
$(":submit") 所有 type=“submit” 的 元素
$(":reset") 所有 type=“reset” 的 元素
$(":button") 所有 type=“button” 的 元素
$(":image") 所有 type=“image” 的 元素
$(":file") 所有 type=“file” 的 元素

$(":enabled") 所有激活的 input 元素
$(":disabled") 所有禁用的 input 元素
$(":selected") 所有被选取的 input 元素
$(":checked") 所有被选中的 input 元素
$(“select option:selected”) 选择所有的select 的子元素中被selected的元素
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
层叠选择器:
$(“form input”) 选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素
$(“label + input”) 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器:
$(“tr:first”) 选择所有tr元素的第一个
$(“tr:last”) 选择所有tr元素的最后一个
$(“input:not(:checked) + span”) 过滤掉:checked的选择器的所有的input元素

$(“A B”) 查找A元素下面的所有子节点,包括非直接子节点
$(“A>B”) 查找A元素下面的直接子节点
$(“A+B”) 查找A元素后面的兄弟节点,包括非直接子节点
$(“A~B”) 查找A元素后面的兄弟节点,不包括非直接子节点

猜你喜欢

转载自blog.csdn.net/weixin_44465068/article/details/89356412