jQuery选择器

关注

原创最新推荐文章于 2026-01-26 20:15:00 发布 186 阅读 AI 写同款· GEO 优化 ›

jQuery——jQuery选择器 ※ 文章目录jQuery选择器什么是jQuery选择器$符号的实质3种用法jquery如何设置样式基本选择器基本选择器案例层级选择器过滤选择器案例：隔行变色筛选选择器(方法)【案例：下拉菜单】this+children+mouseenter+mouseleave【案例：突出展示】siblings+find【案例：手风琴】next+parent【案例：淘宝精品】index+eq jQuery选择器 什么是jQuery选择器 jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。阅读详情

jQuery选择器

1.1 jQuery基础选择器

名称	用法	描述
ID选择器	$(“#id”)	匹配指定ID的元素
全选选择器	$(“*”)	匹配所有元素
类选择器	$(“.class”)	获取同一类class的元素
标签选择器	$(“div”)	获取同一类class标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

1.2 jQuery层级选择器

名称	用法	描述
子代选择器	$(“ul>li”)	使用>号，代表子代选择器，获取ul下的最近一级子元素li元素，不包括孙子等
后代选择器	$(“ul li”)	使用空格,代表后代选择器，获取ul下的所有li元素，包括孙子等

<body>
    <div>惊喜不，以外不</div>
    <div>惊喜不，以外不</div>
    <div>惊喜不，以外不</div>
    <div>惊喜不，以外不</div>
    <ul>
        <li>相同的操作1</li>
        <li>相同的操作2</li>
        <li>相同的操作3</li>
    </ul>
    <script>
        $(function () {
            // 获取4个div元素
            console.log($('div'));
            // 给四个div设置背景色
            $('div').css('background','pink')
            $('ul li').css('color','red')
            $('ul li').css('font-family','华文行楷')
        })
    </script>
</body>

在这里插入图片描述

1.3 jQuery筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后—个li元素
:eq(index)	$(‘li:eq(2)’)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始.
:odd	$(‘li:odd’)	获取到的li元素中,选择索引号为奇数的元素
:even	$(‘li:even’)	获取到的li元素中，选择索引号为偶数的元素

<body>
    <ul>
        <li>我是第1个ul li</li>
        <li>我是第2个ul li</li>
        <li>我是第3个ul li</li>
        <li>我是第4个ul li</li>
        <li>我是第5个ul li</li>
        <li>我是第6个ul li</li>
    </ul>
    <ol>
        <li>我是第1个ol li</li>
        <li>我是第2个ol li</li>
        <li>我是第3个ol li</li>
        <li>我是第4个ol li</li>
        <li>我是第5个ol li</li>
        <li>我是第6个ol li</li>
        <li>我是第7个ol li</li>
    </ol>
    <script>
        $(function(){
            $('ul li:odd').css('color','aqua')
            $('ul li:even').css('color','skyblue')
            $('ul li:first').css('color','red')
            $('ul li:last').css('color','red')
            $('ol li:odd').css('color','red')
            $('ol li:even').css('color','aqua')
            $('ol li:last').css('color','blue')
            $('ol li:first').css('backgroundColor','red')
            $('ol li:eq(2)').css('color','yellowgreen')
        })
    </script>
</body>

在这里插入图片描述

1.4 jQuery筛选方法

语法	用法	说明
parent()	$(''li").parent();	查找父级
children(selector)	$(“ul”).children(“li”)	查找ul的子集，不包括孙子集等
find(selector)	$(“ul”).find(“li”);	查找ul的子集，包括孙子集等
siblings(selector)	$(“.first”).siblings(“li”);	查找兄弟节点,不包括自己本身
nextAll( [expr])	$(“.first” ).nextAll()	查找当前元素之后所有的同辈元素
prevtAl1([expr])	$(“.last” ).prevAll()	查找当前元素之前所有的同辈元素
hasclass(class)	$( 'div ’ ).hasClass( “protected”)	检查当前的元素是否含有某个特定的类,如果有，则返回true
eq(index)	$(“li”).eq(2);	获取到的li元素中，选择索引号为2的元素,index 从0开始

<body>
    <ul>
        <li>我是第1个ul li</li>
        <li>我是第2个ul li</li>
        <li class="item">我是第3个ul li</li>
        <li>我是第4个ul li</li>
        <li>我是第5个ul li</li>
        <li>我是第6个ul li</li>
    </ul>
    <ol>
        <li>我是第1个ol li</li>
        <li>我是第2个ol li</li>
        <li>我是第3个ol li</li>
        <li>我是第4个ol li</li>
        <li>我是第5个ol li</li>
        <li>我是第6个ol li</li>
        <li>我是第7个ol li</li>
    </ol>
    <dl>
        <dd>我是第1个dl dd</dd>
        <dd>我是第2个dl dd</dd>
        <dd>我是第3个dl dd</dd>
        <dd>我是第4个dl dd</dd>
        <dd>我是第5个dl dd</dd>
        <dd>我是第6个dl dd</dd>
        <dd>我是第7个dl dd</dd>
    </dl>
    <div class="current">我有current</div>
    <div>我没有current</div>
    <script>
        $(function(){
            // 兄弟元素
            $('ul .item').siblings('li').css('backgroundColor','aqua')
            // 第n个元素
            $('ol>li').eq(2).css('font-family','华文行楷')
            $('ol>li').eq(3).css('font-size','40px')
            $('ol>li:eq(4)').css('color','red')
            $('dl>dd').eq(2).nextAll('dd').css('font-size','25px')
            $('dl>dd').eq(2).prevAll('dd').css('font-size','25px')
            $('dl>dd').eq(2).prevAll('dd').css('color','red')
            // 判断是否有某个类名
            console.log($('div:first').hasClass('current'));
            console.log($('div:last').hasClass('current'));
        })
    </script>
</body>