jquery选择器也就是使用jquery方法简单快速的查找元素。
1.)jquery基本选择器:
- id选择器:用#号 + 标签名称来表示。
- 类选择器:用.(点) + 标签名称来表示。
- 标签选择器:用标签名称来表示。
- 子元素选择器:用>符号来表示。
- 后代选择器:用空格来表示。
- 组合选择器:多元素选择器。
几个基本选择器的代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<style type="text/css">
#box1,.box2{
height: 100px;
width: 100px;
border: 1px solid red;
margin: 20px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div class="box2"></div>
<p>12155</p>
<p>13215</p>
<div id="box3">
<div class="box3">
<p>22222</p>
<p>22222</p>
</div>
</div>
<script>
$('#box1').css('background','green');
//id选择器:选择id为box1的元素,设置它的css样式背景颜色为green。
//css()方法:用来设置或者获取css样式。
$('.box2').css('background','gray');
//类选择器:选择类为box的元素,设置它的css样式背景颜色为gray。
$('p').css('color','red');
//标签选择器:选择标签名称为p的元素,设置它的css样式背景颜色为red。
$('#box3 .box3').css('background','gray');
//后代选择器:选择id为box3的后代元素,这个后代元素的类名称为box3,
// 再将这个后代元素css样式背景颜色为gray。
$('.box3 > p').css('color','red');
//子元素选择器:选择类名称为box3下所有名称为p的子元素。
$('#box1,.box2,#box3,.box3').css('background','red');
//组合选择器:选择id为box1、类名称为box2,id为box3,类名称为box3这几个元素。
//设置它的css样式背景颜色为red。
</script>
</body>
</html>