第1章 WEB前端开发工程师-jQuery框架 1-6：jQuery 过滤选择器

最新推荐文章于 2024-03-18 04:00:16 发布

老张谋

最新推荐文章于 2024-03-18 04:00:16 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： jquery

本文链接：https://blog.youkuaiyun.com/wgf5845201314/article/details/92634288

前端技术专栏收录该内容

111 篇文章

订阅专栏

本文主要介绍了jQuery过滤选择器，其通过特定规则筛选DOM元素，语法类似CSS伪类。列举了如:first、:last等多种过滤选择器的用法，还提到jQuery为常用过滤器提供专用方法以提升性能，同时说明了一些使用注意事项。

jQuery 过滤选择器

本节课所讲内容：

1. jQuery过滤选择器

主讲教师：Head老师

一. jQuery过滤选择器

过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素，和 CSS 中的伪类的语法类似：使用冒号(:)开头。

过滤器名	jQuery 语法	说明	返回
:first	$('li:first')	选取第一个元素	单个元素
:last	$('li:last')	选取最后一个元素	单个元素
:not	$('li:not(.red)')	选取 class 不是 red 的 li 元素	集合元素
:even	$('li：even')	择索引(0 开始)是偶数的所有元素	集合元素
:odd	$('li:odd')	选择索引(0 开始)是奇数的所有元素	集合元素
:eq(index)	$('li:eq(2)')	选择索引(0 开始)等于 index 的元素	单个元素
:gt(index)	$('li:gt(2)')	选择索引(0 开始)大于 index 的元素	集合元素
:lt(index)	$('li：lt(2)')	选择索引(0 开始)小于 index 的元素	集合元素
:header	$(':header')	选择标题元素，h1 ~ h6	集合元素
:animated	$(':animated'	选择正在执行动画的元素	集合元素
:focus	$(':focus')	选择当前被焦点的元素	集合元素

$('li:first').css('background', '#ccc'); //第一个元素

$('li:last).css('background', '#ccc'); //最后一个元素

$('li:not(.red)).css('background', '#ccc'); //非 class 为 red 的元素

$('li:even').css('background', '#ccc'); //索引为偶数的元素

$('li:odd).css('background', '#ccc'); //索引为奇数的元素

$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素

$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素

$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素

$(':header').css('background', '#ccc'); //页面所有 h1 ~ h6 元素

注意：:focus 过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。

而不是鼠标点击或者 Tab 键盘敲击激活的。

$('input').get(0).focus(); //先初始化激活一个元素焦点

$(':focus').css('background', 'red'); //被焦点的元素

jQuery 为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：

$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素，负数从后开始

$('li').first().css('background', '#ccc'); //元素 li 的第一个元素

$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素

$('li').not('.red').css('background', '#ccc'); //元素 li 不含 class 为 red 的元素

注意：:first、:last 和 first()、last()这两组过滤器和方法在出现相同元素的时候，first 会

实现第一个父元素的第一个子元素，last 会实现最后一个父元素的最后一个子元素。所以，

如果需要明确是哪个父元素，需要指明：

$('#box li:last').css('background', '#ccc'); //#box 元素的最后一个 li

//或

$('#box li).last().css('background', '#ccc'); //同上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="q">
    <title>jQuery 过滤选择器</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script>
       $(function(){
  /*
        $('li:first').css('color','red');
        $('li:last').css('color','red');
        $('li:not(.red)').css('color','green');

        $('li:even').css('color','yellow');
        $('li:odd').css('color','blue');
    
        $('li:eq(2)').css('color','blue');
        $('li:gt(2)').css('color','green');
        $('li:lt(2)').css('color','red');
*/
        $(':header').css('color','blue')

       })
       
    </script>
</head>
<body>
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <ul>
        <li class="red">1</li>
        <li class="red">1</li>
        <li>1</li>
        <li class="red">1</li>
        <li class="red">1</li>
    </ul>
</body>
</html>