element（标签、元素）选择器：$("div")
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>element选择器</title>
5 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
6 </head>
7
8 <body>
9 <button id="btntest">点我</button>
10 <script type="text/javascript">
11 $("button").attr("disabled","true");
12 </script>
13 </body>
14 </html>
id选择器：$("#id")
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>#id选择器</title>
5 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
6 </head>
7
8 <body>
9 <div id="divtest">div的内容</div>
10 <div id="default"></div>
11 <script type="text/javascript">
12 $("#default").html($("#divtest").html());
13 </script>
14 </body>
15 </html>
类选择器：$(".class")
<!DOCTYPE html>
<html>
<head>
<title>.class选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="red">立正，向我这边看齐</div>
<div class="green">我先歇歇脚</div>
<script type="text/javascript">
var $redHTML = $(".red").html();
$(".green").html($redHTML);
</script>
</body>
</html>
*选择器：$("*")
<!DOCTYPE html>
<html>
<head>
<title>*选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<form action="#">
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />
<input id="Radio1" type="radio" />
<input id="Checkbox1" type="checkbox" />
</form>
<script type="text/javascript">
$("form *").attr("disabled", "true");
</script>
</body>
</html>
sele1、sele2、seleN选择器：$(".div,#span1,p")
<!DOCTYPE html>
<html>
<head>
<title>sele1,sele2,seleN选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="red">选我吧！我是red</div>
<div class="green">选我吧！我是green</div>
<div class="blue">选我吧！我是blue</div>
<script type="text/javascript">
$(".red,.green").html("hi,我们的样子很美哦!");
</script>
</body>
</html>
ance desc选择器：$("父类标签 子孙类标签")
<!DOCTYPE html>
<html>
<head>
<title>ance desc选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>码农家族
<p>
<label></label>
</p>
<label></label>
</div>
<script type="text/javascript">
$("div label").css("background-color","blue");
</script>
</body>
</html>
parent>child选择器：$("父类标签>子类标签")
<!DOCTYPE html>
<html>
<head>
<title>parent > child选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
码农家族
<p>
<label></label>
</p>
<label></label>
<label></label>
</div>
<label></label>
<script type="text/javascript">
$("div>label").css("border", "solid 5px red");
</script>
</body>
</html>
prev+next选择器：$("首标签+紧邻标签")
<!DOCTYPE html>
<html>
<head>
<title>prev + next选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
码农家族
<label></label>
<p></p>
<label></label>
<label></label>
</div>
<label></label>
<script type="text/javascript">
$("p+label").css("background-color","red");
</script>
</body>
</html>
prev~siblings：$("首标签~相邻标签")
<!DOCTYPE html>
<html>
<head>
<title>prev ~ siblings选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
码农家族
<label></label>
<p></p>
<label></label>
<label></label>
</div>
<label></label>
<script type="text/javascript">
$("p~label").css("border", "solid 1px red");
$("p~label").html("我们都是p先生的粉丝");
</script>
</body>
</html>
来源：https://www.cnblogs.com/Harold-Hua/p/4648018.html