JQuery选择器

来源：互联网发布：cnc编程软件排行榜编辑：程序博客网时间：2024/04/28 22:27

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">

</style>
</head>
<body>
<ul>
<li class="first_li">锄禾日当午<span>谁是当午</span></li>

<li id="second_li">窗前明月光</li>
<li>停车坐爱枫林晚</li>
<li>不及汪伦赠我情</li>
</ul>
</body>
<script src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
//jquery设置样式 .css({'样式名':'属性值','样式名':'属性值'})
//获取元素（选择器）
//标签选择器
$('ul').css({'backgroundColor':'yellow','width':'400px'});
//class选择器
$('.first_li').css({'color':'red'});
$('#second_li').css({'color':'green'});
//后代选择器
$('ul li').css({'fontSize':'20px'});
//子代选择器只能选择直接子集
$('.first_li>span').css({'color':'blue'});
//组合选择器
$('li,p').css({'backgroundColor':'cyan'});
//*选择器
$('*').css({'margin':'0','padding':'0'});
//选择下一个同级元素
$('#second_li+li').css({'backgroundColor':'gray'});
//选择后面所有的同级元素
$('.first_li~li').css({'backgroundColor':'pink'});

</script>
</html>

阅读全文

0 0