属性选择器

来源：互联网发布：医学文献王 for mac 编辑：程序博客网时间：2024/06/05 23:02

一、属性选择器：

$("[id ^= 'user']") //匹配属性开头 user

$("[id $= 'list']") //匹配属性结尾 list

$("[id *= 'id']") //通配符 选择属性中任意位置包含指定字符的元素

$("[id |= 'id']") //以id开头或等于id值的元素

二、位置选择器

$("li:even") //匹配集合中的偶数元素

$("li:odd") //匹配集合中的奇数元素

$("li:first") //匹配集合中的第一个元素

$("li:last") //匹配集合中的最后一个元素

$("li:eq(3)") //匹配集合中的第4个元素

$("li:get(3)") //匹配集合中的第4个元素

$("li:gt(2)") //匹配集合中的索引值大于2的所有元素 gt是 greater than缩写

$("li:lt(3)") //匹配集合中的索引值小于3的所有元素 lt是 less than缩写

三、过滤表单元素

$(":button") //过滤所有button元素和类型为button的元素

$(":checked") //匹配所有已被选中的元素

//offsetWidth:0;offsetHeight:0; jquery中元素不可见

$(":text:hidden") //过滤所有text为隐藏的元素

四、内容过滤器

$("p:contains('你好')") //内容包含元素'你好'的元素集合 <p>你好</p>

$("div:has('p').attr("id")") //匹配（div或div下的子元素）包含'p'元素 返回结果:yay

示例：<div id="yay"><ul><li><p>par</p></li></ul></div>

$("p:empty").length //返回所有无子元素或文本的元素 <p></p>返回结果1

$("p:parent").length //返回所有含子元素或文本（包含只含有空格）的元素 <p> </p>返回结果1五、子元素过滤器

:first-child //选择每个父元素的第一个子元素

:last-child //选择每个父元素的最后一个子元素

:nth-child() //选择每个父元素的第几个子元素

:only-child //选择只包含一个子元素的元素

用法：$("div span:first-child")

六、用户自定义选择器

<script>

$(function () {

$.expr[":"].greenbg = function (element) {

return $(element).css("background-color") == "green";

};

var n = $(":greenbg").length;

alert(n); //结果为1

});

</script>

<body>

<div style="width: 10; height: 10; background-color: green;"></div>

<div style="width: 10; height: 10; background-color: black;"></div>

<div style="width: 10; height: 10; background-color: blue;"></div>

</body>

0 0