jQuery选择器与过滤器(二)

一、jQuery选择器
1、基本选择器：
所有选择器    *
标签选择器    标签名
ID选择器    #ID
类选择器    .className
组合选择器    selector1,selector2
    多个选择器使用逗号分割，多个选择器选择的元素均选中
嵌套选择器    selector1 selector2    
    多个选择器共同使用，在select1中再选择selector2元素
    
2、层次选择器
a、后代选择器  selector1 selector2    【选择后代元素】
两个选择器使用空格隔开，表示选择selector1所有后代selector2的元素
b、子代选择器  selector1>selector2    【选择子代元素】
两个选择器使用>隔开，表示选择所有后代元素中符合selector2的元素
    
3、兄弟选择器    
a、下一个兄弟选择器     selector1+selector2    【选择下一个兄弟元素】
两个选择器使用+隔开，表示可以获取selector1的下一个兄弟元素且该兄弟元素要符合selector2选择器
b、之后所有兄弟选择器  selector1~selector2    【选择后面所有的兄弟元素】
两个选择器使用~隔开，表示可以获取selector1元素之后的所有兄弟元素中符合selector2的元素
    
二、jQuery过滤器
对jQuery选择器选择到的内容的再进行过滤　　【建立在前面选择器已经选择到元素的基础之上】
 
1、基本过滤器
语法：  selector:过滤器
selector:first           获取所有已选择到的元素中的第一个元素
selector:last           获取所有已选择到的元素中的最后一个元素
selector:even         获取所有已选择到的元素中的索引为偶数元素
selector:odd           获取所有已选择到的元素中的索引为奇数元素
selector:eq(index)     获取所有已选择到的元素中的索引为index的元素
selector:lt(index)       获取所有已选择到的元素中索引值小于index的元素
selector:gt(index)      获取所有已选择到的元素中索引值大于index的元素
selector1:not(selector2)  获取所有已选择到的元素中不为selector2的元素
selector:header                获取所有已选择到的元素中的标题元素【标题h1~h6】

2、内容过滤器
语法：  selector:过滤器            
selector:contains(text)    获取所有已选择到的元素中文本包含text的元素
selector:empty                获取所有已选择到的元素中没有子节点的元素
selector:parent                获取所有已选择到的元素中有子节点的元素
selector:has(selector2)  获取所有已选择到的元素中包含selector2的元素
                    
3、可见性过滤器
语法：  selector:过滤器
隐藏类型分2种：
a、不占据屏幕空间

    display:none;    //显示为none
    <input type="hidden">    //隐藏input标签

b、占据屏幕空间

    visibility:hidden;    // 可见度为隐藏
    opacity:0;    //透明度为0

使用：    
        :visible    选择所有占据屏幕空间的元素
        :hidden        选择所有不占据屏幕空间的元素
        
4、属性过滤器
语法：  selector[属性过滤器]
selector[attr]        
    获取所有已选择到的元素中具有属性attr的元素
selector[attr=Val]    
    获取所有已选择到的元素中具有属性attr，并且属性值为Val的元素
selector[attr^=Val]    
    获取所有已选择到的元素中具有属性attr，并且属性值为以Val开头的元素
selector[attr$=Val]    
    获取所有已选择到的元素中具有属性attr，并且属性值为以Val结尾的元素
selector[attr*=Val]    
    获取所有已选择到的元素中具有属性attr，并且属性值中包含Val的元素
selector[attr!=Val]    
    获取所有已选择到的元素中具有属性attr，并且属性值不为Val的元素或者没有该属性attr的元素

5、后代过滤器
选择器一定要先选择到后代元素，是对选择到的后代元素的过滤
注意：
选择所有符合selector的后代中的相应元素【批处理】
空格是表示所有后代
>是表示所有子代

下面示例使用的是空格【可能存在多个层级关系】
selector :nth-child(n)    
    获取每个selector元素中所有后代且后代中作为别人的第n个孩子的元素
selector :first-child    
    获取每个selector元素中所有后代且后代中作为别人的第一个子元素【可能选择到一个或多个元素】
    注意与selector :first的区别，获取所有selector元素的所有后代元素中的第一个【只选择到一个元素】
selector :last-child        
    获取每个selector元素中所有后代且后代中作为别人的最后一个子元素【每个父元素的最后一个子元素】
selector :only-child        
    获取每个selector元素中所有后代且后代中作为别人的作为别人的父元素且只有一个子元素【每个父元素如果只有一个孩子元素，获取该元素】
selector :first-of-type    
    获取每个selector元素中所有后代且后代中作为别人的每种类型子元素中的第一个
Selector :last-of-type    
    获取每个selector元素中所有后代且后代中作为别人的每种类型子元素中的最后一个    
    
6、表单过滤器    【对选择的表单元素进行过滤】
:enabled    
    选取所有可用元素该选择器仅可用于选择支持disabled属性(attribute)的HTML    元素【<button>, <input>,<optgroup>,<option>,<select>,<textarea>】
:disabled    
    选取所有不可用的元素该选择器也是仅可用于支持disabled属性的HTML元素
:checked    
    选取所有被选中的元素，用于复选框和单选框、下拉框
:selected    
    选取所有被选中的选项元素，该选择器只适用于<option>
:focus    
    选择当前获取焦点的元素
:input    
    选取所有的<input>,<textarea>,<select>,<button>元素。
    注意：
    $(":input")是选择可以让用户输入的标签元素; 而$("input")是选择名字为input的所有标签元素
:text    
    选取所有的单行文本框（<input type="text">）
:password    
    选取所有的密码框
:radio    
    选取所有的单选框
:checkbox    
    选取所有的多选框        
:submit    
    选取所有的提交按钮【有提交功能的按钮】
:reset    
    选取所有input类型为reset的表单元素     
:image    
    选取所有input类型为image的表单元素       
:button    
    选取所有input类型为button的表单元素    
:file        
    选取所有input类型为file的表单元素