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，并且属性值为attrVal的元素
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>,<button>元素。
    注意：
    $(":input")是选择可以让用户输入的标签元素;而$("input")是选择名字为input的所有标签元素
:text    
    选取所有的单行文本框（<input type="text">）
:password    
    选取所有的密码框
:ra@L_618_75@    
    选取所有的单选框
:checkBox    
    选取所有的多选框        
:submit    
    选取所有的提交按钮【有提交功能的按钮】
:reset    
    选取所有input类型为reset的表单元素     
:image    
    选取所有input类型为image的表单元素       
:button    
    选取所有input类型为button的表单元素    
:file           选取所有input类型为file的表单元素