jQuery的选择器（三）

来源：互联网发布：单片机gnd是什么意思编辑：程序博客网时间：2024/06/04 18:54

三、过滤选择器

3.可见性过滤选择器

:visible：取可见的元素

:hidden：取不可见的元素

使用可见性过滤选择择器过滤元素

4.属性过滤选择器

[attribute]：取拥有attribute属性的元素

[attribute = value]：取attribute属性值等于value

[attribute != value]：取attribute属性值不等于value

[attribute ^= value]：attribute属性值以value开始

[attribute $= value]：attribute属性值以value结尾

[attribute *= value]：attribute属性值包含value

[selector1][selector2]：复合型属性过滤器，同时满足多个条件

布局如下：

<body>

<h1>属性过滤选择器</h1>

<ul>

<li><a href="#" title="认识jquery" class="a1">认识jquery</a></li>

<li><a href="#" title="jquery选择器" class="a1">jquery选择器</a></li>

<li><a href="#" title="jquery事件">jquery事件</a></li>

</ul>

</body>

使用属性过滤选择择器过滤元素

$(document).ready(function(){

// [属性]

$("a[title]").css("color","red");

// [属性=value]

$("a[class=a1]").css("font-size","30px");

// [属性!=value]

$("a[class!=a1]").css("font-size","10px");

// [属性^=value]

$("a[title^=jquery]").css("background","green");

// [属性$=value]

$("a[title$=jquery]").css("background","yellow");

// [属性*=value]

$("a[title*=jquery]").css("font-size","20px");

// 多属性选择器

$("a[title^=jquery],a[class=a1]").hide();

});

</script>

0 0