jquery选择器

1. 基本选择器

1. id选择器

   $(“#age”).css(“background”,”red”); //效果id为age的标签背景改红色

2. div标签选择器

   $(“div”).css(“background”,”red”); //效果div标签背景改红色

3. .class类选择器

   $(“.age”).css(“background”,”red”); //效果类为age的标签背景改红色

4. *选择所有

   $(“*”).css(“background”,”red”); //效果全页面变红色

5. ，或者

   $(“#age,.age”).css(“background”,”red”); //效果id为age或者类为age的标签背景改红色

2. 层次选择器

1. ( ) div span 在给定的祖先元素下匹配所有的后代元素

   $(“div span”).css(“background”,”red”); //效果所有div中的span标签背景变红色

2. (>) div > span 在给定的父元素下匹配所有的子元素

   $(“div > span”).css(“background”,”red”); //效果父类元素(div)下的所有子元素(span)背景变红色

3. (+) div + span 匹配所有紧接在div标签后的span标签

   $(“div + span”).css(“background”,”red”); //效果div的下一个span标签背景改红色

4. (~) div ~ span 匹配 div标签之后的所有span标签

   $(“div + span”).css(“background”,”red”); //效果div之后的span标签所有背景改为红色

3. 基本过滤选择器

1. :first 匹配找到的第一个元素

   $(“div:first”).css(“background”,”red”);//效果所有div中的第一个div背景改为红色

2. :last 匹配找到的最后一个元素

   $(“div:first”).css(“background”,”red”);//效果所有div中的第一个div背景改为红色

3. :not 去除所有与给定选择器匹配的元素

   $(“div:not”).css(“background”,”red”);//效果只要不是div标签的背景都给为红色

4. :even 匹配所有索引值为偶数的元素，从 0 开始计数

   $(“div:even”).css(“background”,”red”);//效果所有div从0开始只要是偶数的背景就改为红色

5. :odd 匹配所有索引值为奇数的元素，从 0 开始计数

   $(“div:odd”).css(“background”,”red”);//效果所有div从0开始只要是奇数的背景就改为红色

6. :eq 匹配一个给定索引值的元素

   $(“div:eq(1)”).css(“background”,”red”);//效果第一个div的背景就改为红色

7. :gt 匹配所有大于给定索引值的元素

   $(“div:gt(3)”).css(“background”,”red”);//效果所有索引值大于3的div的背景就改为红色

8. :lt 匹配所有小于给定索引值的元素

   $(“div:lt(3)”).css(“background”,”red”);//效果所有索引值小于3的div的背景就改为红色

9. :header 匹配如 h1, h2, h3之类的标题元素

   $(“div:header”).css(“background”,”red”);//效果所有标题标签(h1-h6)的背景颜色改为红色

10. :animated 匹配所有正在执行动画效果的元素

    $(“：animated”).css(“background”,”red”);//正在执行动画的所有标签背影颜色改为红色

4. 内容过滤选择器

1. :contains 匹配包含给定文本的元素

   $(“div:contains(‘str’)”).css(“background”,”red”);//效果div的内容中包含“str”的所有div标签的背景颜色都改为红色

2. :empty 匹配所有不包含子元素或者文本的空元素

   $(“div:empty”).css(“background”,”red”);//效果所有div中的内容中为空或者没有子元素的div背景改为红色

3. :has 匹配含有选择器所匹配的元素的元素

   $(“div:has(.class)”).css(“background”,”red”);//效果div中类为class的所有div背景颜色改为红色

4. parent 匹配含有子元素或者文本的元素

   $(“div:parent”).css(“background”,”red”);//效果div中有内容或者有子元素的有div背景改为红色

5. 可见性过滤选择器

1. :hidden 匹配不可见的元素或者type为hidden的元素

   $(“div:hidden”).css(“background”,”red”);//效果div中所有不可见的元素或者type为hidden的元素的标签背景为红色

2. :visible 匹配所有可见的元素

   $(“div:visible”).css(“background”,”red”);//效果div中所有可见的元素的背景改为红色

6. 属性选择器

1. [attribute] 匹配包含给定属性的元素

   $(“div[id]”).css(“background”,”red”);//效果所有div标签中定义了id的所有标签背景改为红色

2. [attribute=value] 匹配给定的属性是某个特定值的元素

   $(“div[class=’1’]”).css(“background”,”red”);//效果所有div中class等于1的div背景改为红色

3. [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素

   $(“div[class!=’1’]”).css(“background”,”red”);//效果所有div中class不等于1的所有div的背景颜色改为红色

4. [attribute^=value] 匹配给定的属性是以某些值开始的元素

   $(“div[class^=’1’]”).css(“background”,”red”);//效果所有div中class中的值以1开头的所有div背景颜色改为红色

5. [attribute$=value] 匹配给定的属性是以某些值结尾的元素

   $("div[class$=’1’]”).css(“background”,”red”);//效果所有div中class中的值以1结尾的所有div背景颜色改为红色

6. [attribute*=value] 匹配给定的属性是以包含某些值的元素

   $(“div[class*=’1’]”).css(“background”,”red”);//效果所有div中class中的值只要是包含1的div背景就改为红色

7. [attribute1][attribute2][..] 匹配更加详细

   $("div[name^='1'][id$=’2’]”).css(“background”,”red”);//效果div中name以1开头并且id以2结尾的div标签背景颜色改为红色

7. 子元素过滤选择器
8. 表单对象属性过滤选择器
9. 表单选择器