-
基础选择器
- 标签选择器
$(div) - id选择器
$(#box) - 类选择器
$(.box) - 通用选择器
$('*')
- 标签选择器
-
层级选择器（组合选择器）
- 后代选择器
$('div p') - 子代选择器
$('div>p') - 毗邻选择器
$(div+li) - 兄弟选择器
$(div~li)
- 后代选择器
-
基本过滤选择器
// 1.:eq(index) 等于index值的元素 $('ul li:eq(0)') $('ul li:eq(1)').css('color','red'); // 2.:gt(index) 大于index值的元素(不含index) $('ul li:gt(5)').css('color','red'); // 3.:lt(index) 小于index值的元素(不含index) $('ul li:lt(4)').css('color','yellow'); // 4.:odd 选取的偶数 $('ul li:odd').css('color','black'); // 5.:even 选取的奇数 $('ul li:even').css('color','green'); // 6.:first :last $('ul li:first').css('color','blue'); $('ul li:last').css('color','gray'); -
属性选择器
$('input[type="text"]').css('background','red'); $('input[type="password"]').css('background','yellow'); -
筛选选择器
//获取第n个元素 数值从0开始 $('span').eq(0).css('font-size','30px') //first()获取第一个元素 $('span').first().css('background','red') //last()获取最后一个元素 这里好像是$('span:last').css(...) //.parent() 选择父亲元素 $('span').parent('.p1').css({'300px',height:'300px',background:'yellow'}) //.siblings()选择所有的兄弟元素 $('.list').siblings('li').css('color','red') //.find() //查找所有的后代元素 $('div').find('button').css('background','#313131')-
siblings()应用：选项卡
<!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="ie=edge"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ 400px; height: 100px; overflow: hidden; } ul li{ list-style: none; float: left; 90px; height: 100px; line-height: 100px; text-align: center; background-color: red; margin-right: 10px; } ul li a{ padding: 20px; /* background-color: green; */ color: #ffffff; } p{ display: none; } p.active{ display: block; } </style> </head> <body> <ul> <li> <a href="javascript:void(0)">q1ang</a> </li> <li> <a href="javascript:void(0)">q2ang</a> </li> <li> <a href="javascript:void(0)">q3ang</a> </li> <li> <a href="javascript:void(0)">q4ang</a> </li> </ul> <p>q1ang</p> <p>q2ang</p> <p>q3ang</p> <p>q4ang</p> <script src="jquery-3.3.1.js"></script> <script> $(function(){ $('ul li a').click(function(){ $(this).css('background','green').parent('li').siblings('li').children('a').css('background','transparent'); var i = $(this).parent('li').index(); $('p').eq(i).addClass('active').siblings('p').removeClass('active'); }); }); </script> </body> </html>
-
