最近学了六种jQuery选择器，我想把学过案例和知识结合起来，给大家分享下！
那么既然学jQuery选择器，肯定要先了解下jQuery是什么吧！jQuery是一个快速、简洁的JavaScript框架，相当于用jQuery能更加高效的创建JS代码,这就是jQuery，选择器是它的一种语法，代码的使用上就不能再用JS语法了，要用jQuery创建的语法。
那么用它，肯定要进行下载吧！下面附上链接和官网图片jQuery
https://jquery.com/
1.基本选择器
这种选择器学起来简单好理解，但也很重要，因为后面的选择器是依托它的！所以这个必须学牢固
下面是基本选择器的代码：
<html>
<head>
<title>Title</title>
<script src="js/jquery-3.2.1.js"></script>
(这是调用jQuery包，只有调用后才能使用以下的jQuery语句)
</head>
<body>
<div id="one" style="width: 500px;height: 150px;border: 1px dashed;"></div>
<div id="two" style="width: 500px;height: 150px;border: 1px dashed;"></div>
<div id="three" style="width: 500px;height: 150px;border: 1px dashed;"></div>
<div class="four" style="width: 500px;height: 150px;border: 1px dashed;"></div>
<script>
//(以下是基本选择器)
//id选择器
console.log($("#one"));
//标签名选择器
console.log($("div"));
//class选择器
console.log($(".four"));
//*选择器
console.log($("*"));
//联合选择器
$(function (){
console.log($("#one,#two,.four"));
})
</script>
</body>
</html>
结合代码看控制台，对应的个数分别是1、4、1、10、3，通过这些条件能进行快速、准确的查询。很方便！
<html>
<head>
<title>Title</title>
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<div id="dv" style="width: 300px;height: 300px;border: 2px solid;">
<input id="a" type="button" value="按钮1"/>
<div style="width: 100px;height: 100px;border: 1px solid;padding: 10px;">
<input id="c" type="button" value="按钮2"/>
</div>
<input class="b" type="button" value="按钮3"/>
<input type="button" value="按钮4"/>
</div>
<button type="button" οnclick="text1()">验证后代元素选择器</button>
<button type="button" οnclick="text2()">验证子元素选择器</button>
<button type="button" οnclick="text3()">验证紧邻同辈元素选择器</button>
<button type="button" οnclick="text4()">验证同辈元素选择器</button>
<script>
function text1(){
console.log($("#dv input"));
}
function text2(){
console.log($("#dv>input"));
}
function text3(){
console.log($(".b+input"));
}
function text4(){
console.log($("#a~input"));
}
</script>
</body>
</html>
1.选择器之间是空格的作用是验证后代元素
2.选择器之间是‘>’的作用是验证子元素，就是只查看自己的儿子
3.选择器之间是‘+’的作用是验证紧邻的同辈元素（不能是大哥）
4.选择器之间是‘~’的作用是验证相邻的同辈元素（不能是大哥）
