学习Jquery选择器之后，可以发现与css的选择器几乎相同，可能也就是最新的css选择器还不能在jquery中实现，但那都很少用。
下面是Jquery中常见的选择器：
一、基本选择器
$("div").css("background-color", "red");//表示对所有的div增加背景颜色--红色。$(".divClass").css("background", "gray");//表示对所有class为‘divClass‘的元素设置背景色--灰色
二、层次选择器
//下面这两个都是表示紧邻的下一个同辈元素。如果.spanclass代表span，则后面同辈元素也必须是span$(".spanclass+span").css("color", "blue").css("font-size", 33);$(".spanclass").next().next().css("color", "blue").css("font-size", 33);//下面这两个表示所有的后面的同辈元素$(".spanclass~span").css("color", "blue").css("font-size", 33);$(".spanclass").nextAll().css("color", "blue").css("font-size", 33); //下面这个表示与其同辈的无论前后的span，不包括本身
$(".spanclass").siblings("span").css("color", "blue").css("font-size", 33);
1 <!DOCTYPE html> 2 <html lang="en"> 3 ?4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 10 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>11 <style>12 div {13 border: 1px solid blue;14 width: 200px;15 height: 250px;16 }17 </style>18 19 </head>20 21 <body>22 23 <h1><span>Jquery Selector Test子代</span></h1>24 <h1>25 <p>aaaaa<span>wo在span中是子代的子代</span></p>26 </h1>27 <div style="float:left">我是div1</div>28 <div class="divClass" style="float:left"><span class="spanclass">我是div2</span><span>紧跟的部分哈哈</span><span>紧跟的部分哈哈</span></div>29 <div style="float:left"><span>我是div3</span></div>30 <div style="float:left"><span>我是div4</span></div>31 <div style="float:right"><span>我是div5</span></div>32 <div style="clear:both"></div>33 <div class="divClass">我是div6</div>34 35 36 37 <script>38 //写法一：dom加载完就执行内部39 $(document).ready(function() {40 //dom加载完就执行的部分41 $("div").css("background-color", "red");42 43 })44 45 //写法二：dom加载完就执行内部简写46 $(function() {47 $("div").css("background-color", "yellow");48 49 })50 //Jquery可以无限次的写dom加载完之后执行的方法，不同于window.onload,只能写一次51 $(function() {52 $(".divClass").css("background", "gray");53 })54 55 /* $(function() {56 $("span,.divClass").css("color", "red").css("font-size", 20);57 }) */58 //$("h1 span").css("color", "blue"); //这个是h1下所有的子代，孙子辈也可以59 //$("h1>span").css("color", "blue"); //这个是h1下第一子代，孙子不可以60 //下面这两个都是表示紧邻的下一个同辈元素。如果.spanclass代表span，则后面同辈元素也必须是span61 //$(".spanclass+span").css("color", "blue").css("font-size", 33);62 // $(".spanclass").next().next().css("color", "blue").css("font-size", 33);63 //下面这两个表示所有的后面的同辈元素64 //$(".spanclass~span").css("color", "blue").css("font-size", 33);65 $(".spanclass").nextAll().css("color", "blue").css("font-size", 33);
//下面这个表示与其同辈的无论前后的span，不包括本身
$(".spanclass").siblings("span").css("color", "blue").css("font-size", 33);
66 </script>67 68 </body>69 70 </html>
Jquery学习----选择器
原文地址：https://www.cnblogs.com/lixianfu5005/p/9074264.html