jQuery的选择器及过滤器

最新推荐文章于 2021-02-24 03:24:38 发布

苏颜暄

最新推荐文章于 2021-02-24 03:24:38 发布

阅读量695

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/magic232/article/details/8809827

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基本过滤选择器：

:even和 :odd ：匹配结果集中顺序为偶数（:even）或奇数（:odd）的元素。

:header：匹配标题元素等标签

:not ：不匹配后面选择器的元素

:eq(index)：匹配顺序号等于index的元素

:gt(index)：匹配顺序号大于index的元素

:lt(index)：匹配顺序号小于index的元素

:first或first()：获取第一个元素

:last或last()：获取最后一个元素

:first-child、:last-child、:only-child、nth-child(index)：分别匹配第一个、最后一个、“独生子”元素、第index个元素（这里的index从1开始计数）

:has(p)：匹配包含p元素的元素

:contains(‘this is my text’)：匹配包含this is my text文本的元素

:empty ：匹配无内容的元素

:parent ：匹配拥有子元素的元素

:hidden ：匹配不可见的元素

:visible ：匹配可见的元素

:animated ：匹配正处于动画过程中的元素

属性过滤选择器：

[attribute]：获取包含给定属性的元素

[attribute = value]：获取等于给定的属性是某个特定值的元素

[attribute!=value]：获取不等于给定的属性石某个特定值得元素

[attribute^=value]：获取给定属性是以某些值开始的元素

[attribute$=value]：获取给定属性是以某些值结束的元素

[attribute*=value]：获取给定属性是以包含某些值得元素

[attribute~=value]：目标属性的值包含value中的任意一个子串（value由多个子串组成，子串之间由空格分隔）

[attribute |=value]：目标属性的值等于value或者以value开头且其后紧跟一个连字符（-）

表单对象属性过滤选择器：

:enabled：获取表单中所有属性为可用的元素

:disabled：获取表单中所有属性为不可用的元素

:checked：获取表单中所有被选中的元素

:selected：获取表单中所有被选中的option的元素

表单选择器：

:input：获取所有input、textarea、select

:text：获取所有单行文本框

:password：获取所有密码框

:radio：获取所有单选按钮

:checkbox：获取所有复选框

:submit：获取所有提交按钮

:image：获取所有图像域

:reset：获取所有重置按钮

:button：获取所有按钮

:file：获取所有文件域

过滤器的使用：

利用:even和 :odd 生成条纹表格：

<!doctype html>

<html>

<head>

$(document).ready(function() {

$('tr:even').css('background','#dedede');

$('tr:odd').css('background','#ffffff');

});

</script>

<body>

<table>

<tr>

<th>Product</th>

<th>Description</th>

<th>Price</th>

</tr>

<tr>

<td>Paper Towels</td>

<td>The most absorbent paper towels.</td>

</tr>

<tr>

<td>Paper Napkins</td>

<td>Perfect for your outdoor gathering.</td>

</tr>

<tr>

<td>Paper Plates</td>

<td>The best value.</td>

</tr>

<tr>

<td>Plastic Forks</td>

<td>The essential picnic accessory.</td>

</tr>

</table>

</body>

</html>

表格如图：

为列表或集合中的第一个或最后一个元素设置样式：

<!doctype html>

<html>

<head>

<style>

ul {width:200px;font-family:arial;}

ul li {border-bottom:1px solid #333;}

ul li a {text-decoration:none;}

</style>

$(document).ready(function() {

$('ul li:first').css('border','none');

$('ul li:last').css('border','none');

});

</script>

<body>

<h1>My sidebar</h1>

<ul>

<li><a href='/about'>About Us</a></li>

<li><a href='/customer-service'>Customer Service</a></li>

<li><a href='/contact'>Contact Us</a></li>

<li><a href='/coupons'>Coupons</a></li>

</ul>

</div>

</body>

</html>

页面效果如图：

找出包含特定元素的元素：

有时候，我们需要找出那些包含某个特定元素的元素。在这种情况下，:has过滤器就派上了用场。:has并不要求被包含的元素师父元素的直接子元素，只要是后代元素就行。

下面的这个例子使用:has过滤器找出具有content类并且包含p标签的元素，把他的字号设置成18像素：代码如下：

<!doctype html>

<html>

<head>

$(document).ready(function() {

$('.content:has(p)').css('font-size','18px');

});

</script>

<body>

<p>This is my content</p>

</div>

<p>This is alternate content.</p>

</div>

</body>

</html>

浏览器中的效果如图：

根据元素包含的文本过滤元素：

有时候需要根据元素包含的内容匹配元素，这时可以用:contains过滤器实现这一目标。传递给:contains过滤器的文本可以用引号括起来，也可以不用。

下面的例子使用:contains过滤器找出表格中包含Paper Towels字样的单元格，为其添加1像素的虚线边框。代码如下：

<!doctype html>

<html>

<head>

$(document).ready(function() {

$("tr td:contains('Paper Towels')").css('border','2px dotted red');

});

</script>

<body>

<table>

<tr>

<th>Product</th>

<th>Description</th>

<th>Price</th>

</tr>

<tr>

<td>Paper Towels</td>

<td>The most absorbent paper towels.</td>

</tr>

<tr>

<td>Paper Napkins</th>

<td>Perfect for your outdoor gathering.</th>

</tr>

<tr>

<td>Paper Plates</td>

<td>The best value.</td>

</tr>

<tr>

<td>Plastic Forks</td>

<td>The essential picnic accessory.</td>

</tr>

</table>

</body>

</html>

浏览器中的效果如图：

苏颜暄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的选择器及过滤器

基本过滤选择器： :even和 :odd ：匹配结果集中顺序为偶数（:even）或奇数（:odd）的元素。 :header：匹配标题元素等标签 :not ：不匹配后面选择器的元素 :eq(index)：匹配顺序号等于index的元素 :gt(index)：匹配顺序号大于index的元素
复制链接

扫一扫

专栏目录