1. #id : 根据给定的ID匹配一个元素
<p>这是第一个p标签</p> <p>这是第二个p标签</p> <script type="text/javascript"> $(function(){ $("#myId").css("color","red"); }); </script>
结果：
这是第一个p标签
这是第二个p标签
2. element : 根据给定的元素标签名匹配所有元素
<div>这是div标签1</div> <div>这是div标签2</div> <p>这是p标签</p> <script type="text/javascript"> $(function(){ $("div").css("color","red"); }); </script>
结果：
这是div标签1
这是div标签2
这是p标签
3. .class : 根据给定的css类名匹配元素
<p>这是第一个p标签</p> <p>这是第二个p标签</p> <script type="text/javascript"> $(function(){ $(".myClass").css("color","red"); }); </script>
结果：
这是第一个p标签
这是第二个p标签
4. * : 匹配所有元素，多用于结合上下文来搜索
<p>这是p标签</p> <div>这是div标签</div> <script type="text/javascript"> $(function(){ $("*").css("color","red"); }); </script>
结果：
这是p标签
这是div标签
5. 多选择器selector1,selector2,selectorN : 指定任意多个选择器，并将匹配到的元素合并到一个结果内
<p>这是第一个p标签</p> <p>这是第二个p标签</p> <div>这是第一个div标签</div> <div>这是第二个div标签</div> <script type="text/javascript"> $(function(){ $("p.myP,div#myDiv").css("color","red"); }); </script>
结果：
这是第一个p标签
这是第二个p标签
这是第一个div标签
这是第二个div标签
6. ancestor descendant : 在给定的祖先元素下匹配所有的后代元素
<div> <span>这是第一个span标签</span> <p> <span>这是第二个span标签</span> </p> </div> <script type="text/javascript"> $(function(){ $("div span").css("color","red"); }); </script>
结果：
这是第一个span标签
这是第二个span标签
7. parent > child : 在给定的父元素下匹配所有的子元素
<div> <span>这是第一个span标签</span> <p> <span>这是第二个span标签</span> </p> </div> <script type="text/javascript"> $(function(){ $("div > span").css("color","red"); }); </script>
结果：
这是第一个span标签
这是第二个span标签
8. prev + next : 匹配所有紧接在 prev 元素后的 next 元素
<div></div> <p>这是第一个p标签</p> <p>这是第二个p标签</p> <script type="text/javascript"> $(function(){ $("div + p").css("color","red"); }); </script>
结果：
这是第一个p标签
这是第二个p标签
9. prev ~ siblings : 匹配 prev 元素之后的所有 siblings 同辈元素
<p>这是第一个p标签</p> <div> <p>这是第二个p标签</p> </div> <p>这是第三个p标签</p> <script type="text/javascript"> $(function(){ $("div ~ p").css("color","red"); }); </script>
结果：
这是第一个p标签
这是第二个p标签
这是第三个p标签
10. :first : 获取第一个元素
<div> <p>这是第一个p标签</p> <p>这是第二个p标签</p> <p>这是第三个p标签</p> </div> <script type="text/javascript"> $(function(){ $("p:first").css("color","red"); }); </script>
结果：
这是第一个p标签
这是第二个p标签
这是第三个p标签
11. :not(selector) : 去除所有与给定选择器匹配的元素
<p>这是第一个p标签</p> <p>这是第二个p标签</p> <p>这是第三个p标签</p> <script type="text/javascript"> $(function(){ $("p:not(.del)").css("color","red"); }); </script>
结果：
这是第一个p标签
这是第二个p标签
这是第三个p标签
12.:even : 匹配所有索引值为偶数的元素，从 0 开始计数
<p>这是索引值为0的p标签</p> <p>这是索引值为1的p标签</p> <p>这是索引值为2的p标签</p> <p>这是索引值为3的p标签</p> <script type="text/javascript"> $(function(){ $("p:even").css("color","red"); }); </script>
结果：
这是索引值为0的p标签
这是索引值为1的p标签
这是索引值为2的p标签
这是索引值为3的p标签
13. :odd : 匹配所有索引值为奇数的元素，从 0 开始计数