文章目录
- jQuery 过滤方法
- hasClass() 类名过滤
- eq() 下标过滤
- is() 判断过滤
- not() 反向过滤
- filter() 表达式过滤
- has() 表达式过滤后代元素
jQuery 过滤方法
| 过滤方法 | 说明 |
|---|---|
| hasClass() | 类名过滤 |
| eq() | 下标过滤 |
| is() | 判断过滤 |
| not() | 反向过滤 |
| filter() | 表达式过滤 |
| has() | 表达式过滤后代元素 |
hasClass() 类名过滤
语法
$(元素).hasClass("了类名")
说明
判断元素是否包含指定类名。
使用
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.12.4.min.js"></script><script>$(function() {$("li").each(function(index) {var b = $(this).hasClass("select");if (b) {$(this).css("color", "red");}})})</script></head><body><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li class="select">jQuery</li></ul></body>
</html>
eq() 下标过滤
语法
$(元素).eq(n)
说明
n是一个整数。当n取值为0或正整数时，eq(0)获取的是第1个元素，eq(1)获取的是第2个元素，……，以此类推。当n取值为负整数时，eq(-1)获取的是倒数第1个元素，eq(-2)获取的是倒数第2个元素，……，以此类推。
使用
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.12.4.min.js"></script><script>$(function() {$("li").eq(3).css("color", "red");})</script></head><body><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>jQuery</li></ul></body>
</html>
is() 判断过滤
语法
$(元素).is(选择器)
说明
判断元素集合是否存在符合条件的元素。
is()方法非常好用，能不能用好也直接决定你的代码是否高效。使用jQuery进行开发，没有做不到的，只有想不到的。下面列出的是is()方法的常用功能代码。
举例
//元素是否可见
$().is(":visible")//元素是否在动画中
$().is(":animated")//单选框或复选框是否被选中
$().is(":checked")//元素是否为第一个子元素
$(this).is(":first-child")//文本是否包含指定内容
$().is(":contains('hello')")//元素是否包含类名
$().is(".select")
复选框选中
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.12.4.min.js"></script><script>$(function() {$("#selectAll").change(function() {var b = $(this).is(":checked");if (b) {$(".fruit").prop("checked", true);} else {$(".fruit").prop("checked", false);}});})</script></head><body><p><label><input id="selectAll" type="checkbox">全选/反选</label></p><label><input class="fruit" type="checkbox" value="苹果">苹果</label><label><input class="fruit" type="checkbox" value="香蕉">香蕉</label><label><input class="fruit" type="checkbox" value="西瓜">西瓜</label></body>
</html>
是否包含类名
判断元素是否存在某个类名，我们有两种方法：一种是hasClass()方法，另一种是is()方法。在实际开发中，建议优先使用hasClass()方法。主要是从查找速度来看，hasClass()方法远远优于is()方法。造成二者查找速度存在差异的原因很简单，is()方法封装的东西比hasClass()方法封装的多得多，运行速度肯定也慢得多。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.12.4.min.js"></script><script>$(function() {$("li").each(function(index, e) {var b = $(this).is(".select");if (b) {$(this).css("color", "red");}});})</script></head><body><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li class="select">jQuery</li></ul></body>
</html>
not() 反向过滤
语法
$(元素).not(选择器或函数)
说明
当not()方法参的数是一个选择器时，表示使用选择器来过滤不符合条件的元素，然后选取其余元素。
当not()方法的参数是一个函数时，表示使用函数来过滤不符合条件的元素，然后选取其余元素。
选择器使用
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.12.4.min.js"></script><script>$(function() {$("li").not(".select").css("color", "red");})</script></head><body><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li class="select">jQuery</li></ul></body>
</html>
函数使用
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.12.4.min.js"></script><script>$(function() {$("li").not(function() {return $(this).text() == "jQuery"}).css("color", "red");})</script></head><body><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>jQuery</li></ul></body>
</html>
filter() 表达式过滤
语法
$(元素).filter(选择器或函数)
选择器使用
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.12.4.min.js"></script><script>$(function() {$("li").filter(".select").css("color", "red");})</script></head><body><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li class="select">jQuery</li></ul></body>
</html>
函数使用
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.12.4.min.js"></script><script>$(function() {$("li").filter(function() {return $(this).text() == "jQuery";}).css("color", "red");})</script></head><body><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li class="select">jQuery</li></ul></body>
</html>
has() 表达式过滤后代元素
语法
$(元素).has(选择器)
说明
has()方法与filter()方法功能相似，不过has()方法只能使用选择器来过滤，不能使用函数来过滤。因此我们可以把has()方法看成是filter()方法的精简版。
has()方法虽然没有filter()方法那么强大，但是它的运行速度更快。
使用
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.12.4.min.js"></script><script>$(function() {$("li").has("span").css("color", "red");})</script></head><body><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li><span>jQuery</span></li></ul></body>
</html>
