（一）基本选择器
基本：ID，class,标签选择器
组合：并列，后代，子级
（二）过滤选择器
1.基本过滤：按照冒号前面的元素在HTML文档中的原始位置来过滤
:first,:last,:eq(n)，not(选择器)，:lt(n)，:gt(n)，odd，even
2.属性过滤：根据元素的属性进行筛选
[属性名],[属性名=值],[属性名!=值],[属性名*=值],[属性名^=值]，[属性名$=值]
3.内容过滤
:has(选择器) 找出带有某种选择器的子元素的外部元素
:contains(文字)
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript" src="JS/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //***********内容过滤选择器************* //$("div:has(span)").css("background-color","green");找包含span标签的div //$("div:has(*)").css("background-color","green");*是找带有子元素的div //$("div:contains(ve)").css("background-color","green");找内容包含ve的div //***********属性过滤选择器************* //$("div[title]").css("background-color","green");找有title属性的div //$("div[title=love]").css("background-color","green");找title是love的div //$("div[title!=love]").css("background-color","green");找title不是love的div //$("div[title*=ve]").css("background-color","green");*=包含 //$("div[title^=ve]").css("background-color","green");^=以什么开头 //$("div[title$=ve]").css("background-color","green");$=以什么结尾 //***********基本过滤选择器************* //$("div:first").css("background-color","green");第一个div //$("div:last").css("background-color","green");最后一个div //$("div:eq(1)").css("background-color","green");根据索引号找，索引号从0开始 //$("div:lt(2)").css("background-color","green");找索引号2之前的 //$("div:gt(2)").css("background-color","green");找索引号2之后的 //$("div:not(div:eq(1))").css("background-color","green");not(过滤器)是排除掉哪一个 //$("div:odd").css("background-color","green");奇数 //$("div:even").css("background-color","green");偶数 //***********基本选择器************* //$("div").css("background-color","green"); 找所有的div //$(".tt").css("background-color","green"); 根据Class名找 //$("#d5").css("background-color","green"); 根据ID名找 //$("div,p").css("background-color","green"); 找所有的div和p,并列关系 //$("div p").css("background-color","green"); 找div里面的p，后代关系 //$("div.tt").css("background-color","green");找class是tt的div //$("div>p").css("background-color","green"); 找是div子级的p }); </script> <style type="text/css"> div{ width:100px; height:100px; background-color: yellow; border: 5px solid red; margin: 10px; float: left; } span{ width:80px; height:80px; background-color: blue; border: 1px solid red; margin: 10px; float: left; } p{ width:50px; height:50px; background-color: aqua; border: 1px solid red; margin: 10px; float: left; } </style> </head> <body> <div id="d1" class="tt" title="love">title="love"</div> <div id="d2"> <span> <p></p> </span> </div> <div id="d3"> <p></p> </div> <div id="d4" class="tt"></div> <div id="d5" title="very">title="very"</div> </body> </html>