jQuery选择器 | 易学教程

jQuery选择器可分为基本选择器、层次选择器、过滤选择器和表单选择器（这里不介绍），各种选择器还蛮多的，挑常用的介绍了

一、基本选择器

基本选择器有标签选择器、id选择器、类选择器、组合选择器、通配符选择器

html代码

<ul>
    <li class="demo1">1</li>
    <li id="content1">2</li>
    <li class='demo2'>3</li>
    <li id="content2">4</li>
</ul>

引入jQuery库，使用各选择器获取并修改元素的样式

$('ul').css({listStyle: 'none'});   //标签选择器
$('*').css({borderRadius: '5px'});   //通配符选择器
$('li').css({float: 'left', margin:'5px', width: '50', height: '50', color :'#fff', textAlign: 'center',lineHeight: '50px'});
$('.demo1').css({backgroundColor: 'steelblue'});   //类签选择器
$('#content1').css({backgroundColor: 'teal'});   //id选择器
$('.demo2,#content2').css({backgroundColor: ' #424242'});   //组合选择器

效果

二、层次选择器

层次选择器有后代选择器（可选择所有后代），父子选择器（只可选择直接子元素），

html代码

<div>
    <ul>
        <li class="demo1">1</li>
        <li class="demo2">2</li>
    </ul>
</div>

js代码

$('ul').css({listStyle: 'none'});
$('li').css({float: 'left', margin:'5px', width: '50', height: '50', color :'#fff', textAlign: 'center',lineHeight: '50px'});
$('div .demo1').css({backgroundColor: ' #424242'});   //后代选择器
$('ul> .demo2').css({backgroundColor: 'steelblue'});   //父子选择器

效果

三、过滤选择器

html代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

匹配到某一元素

$('ul').css({listStyle: 'none', margin: '20'});
$('li').css({float: 'left', margin: '5px',color: '#fff', textAlign: 'center', lineHeight: '50px',width: '50', height: '50', backgroundColor: 'black'});
$('li:first').css({width: '50', height: '50', backgroundColor: 'teal'});      //匹配到第一个子元素
$('li:last').css({width: '50', height: '50', backgroundColor: 'steelblue'});      //匹配到最后一个子元素
$('li:eq(5)').css({width: '50', height: '50', backgroundColor: 'cornflowerblue'});    //按索引匹配指定元素

效果

匹配索引值为奇数/偶数的元素

$('ul').css({listStyle: 'none', margin: '20'});
$('li').css({float: 'left', margin: '5px',color: '#fff', textAlign: 'center', lineHeight: '50px'});
$('li:odd').css({width: '50', height: '50', backgroundColor: 'steelblue'});    //匹配索引为奇数的元素
$('li:even').css({width: '50', height: '50', backgroundColor: '#424242'});    //匹配索引为偶数的元素

效果

来源：CSDN

作者：做一条抹香鲸

链接：https://blog.csdn.net/weixin_44584442/article/details/104602387

标签

jquery选择器

jquery

css