jQuery选择器

最新推荐文章于 2024-07-19 14:40:55 发布

bsf000000___

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量100

点赞数

文章标签： jquery 前端 javascript 开发语言 css html

本文链接：https://blog.csdn.net/bsf000000___/article/details/132417368

版权

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>

在这里插入图片描述

bsf000000___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery选择器

jQuery选择器
复制链接

扫一扫

jQuery选择器

jQuery选择器

1.1 jQuery基础选择器

1.2 jQuery层级选择器

1.3 jQuery筛选选择器

1.4 jQuery筛选方法

“相关推荐”对你有帮助么？