jQuery 过滤学习笔记

前言

jQuery 是目前最流行的 JavaScript 库之一，拥有着强大的选择器和过滤器功能。通过使用过滤器，可以从一系列元素中筛选出需要的元素，方便我们对网页进行操作。

本文将介绍 jQuery 中常用的过滤器，并举出实例。

基本过滤器

:first

选择第一个元素。

javascriptCopy Code
$('li:first').css('color', 'red');

:last

选择最后一个元素。

javascriptCopy Code
$('li:last').css('color', 'blue');

:even

选择偶数位置的元素。

javascriptCopy Code
$('li:even').css('background-color', 'yellow');

:odd

选择奇数位置的元素。

javascriptCopy Code
$('li:odd').css('background-color', 'pink');

:eq

选择特定索引位置的元素。

javascriptCopy Code
$('li:eq(2)').css('font-size', '20px');

:gt

选择大于特定索引位置的元素。

javascriptCopy Code
$('li:gt(2)').css('font-weight', 'bold');

:lt

选择小于特定索引位置的元素。

javascriptCopy Code
$('li:lt(2)').css('font-style', 'italic');

内容过滤器

:contains

选择包含指定文本的元素。

javascriptCopy Code
$('li:contains("JavaScript")').css('color', 'green');

:empty

选择没有子元素或者没有文本内容的元素。

javascriptCopy Code
$('li:empty').text('这是空元素');

:parent

选择有子元素的元素。

javascriptCopy Code
$('li:parent').addClass('parent');

可见性过滤器

:visible

选择可见的元素。

javascriptCopy Code
$('li:visible').css('border', '1px solid red');

:hidden

选择隐藏的元素。

javascriptCopy Code
$('li:hidden').css('display', 'none');

属性过滤器

[attribute]

选择具有指定属性的元素。

javascriptCopy Code
$('input[type="text"]').css('background-color', 'gray');

[attribute=value]

选择具有指定属性和值的元素。

javascriptCopy Code
$('a[href="http://www.jquery.com"]').addClass('selected');

[attribute!=value]

选择不具有指定属性或者不具有指定属性值的元素。

javascriptCopy Code
$('input[type!="checkbox"]').css('border-color', 'blue');

[attribute^=value]

选择具有以指定值开头的属性值的元素。

javascriptCopy Code
$('input[name^="user"]').css('background-color', 'green');

[attribute$=value]

选择具有以指定值结尾的属性值的元素。

javascriptCopy Code
$('input[name$="password"]').css('background-color', 'yellow');

[attribute*=value]

选择具有包含指定值的属性值的元素。

javascriptCopy Code
$('input[name*="search"]').css('background-color', 'orange');

结语

本文介绍了 jQuery 中常用的过滤器，希望能对读者有所帮助。在实际开发中，选择合适的过滤器可以大大提高代码效率，减少代码量。