jQuery——选择器

1、jQuery介绍
   (1)jQuery是什么?
       是一个js框架，其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成一个jQuery对象。封装成jQuery对象的目的有两个：
   一是为了兼容不同的浏览器，另外，也简化了代码。
   (2)编程的基本步骤  first.html
       step1, 利用选择器查找节点。选择器类似与css选择器。
       step2, 调用jQuery对象的方法或者属性。
   (3) jQuery对象与dom对象之间的相互转换 first.html。
       a,  dom对象 ---> jQuery对象
           $(dom对象)
       b, jQuery对象 ---> dom对象
               方式一:      $obj.get(0)
               方式二:      $obj.get()[0]    

2、选择器
   1)基本选择器  selector/s1.html
       ID选择器：$('#id)
       类选择器：$('.class')
       标签选择器：$('element) 如：$('div')
       群组选择器：$('selector1,selector2..selectorn')
       通用选择器：$('*')
   2)层次选择器  selector/s2.html
       （1）子元素选择器
           $("parent > child");
           查找父元素下面的所有子元素，不包括孙元素等。
       （2）后代元素选择器
       　　$("ancestor descedant");
           查找 ancestor 元素的所有子元素、孙元素、重孙元素等。
       （3）紧邻同辈元素选择器
       　　$("prev+next");
　            同辈，且紧跟在 prev 元素后面的元素 next 元素
       （4）相邻同辈元素选择器
　　        $("prev~siblings")；
　　        跟在 prev 后且同辈的所有 siblings 元素
       注:siblings是过滤器
               这里要说下，由于最后2个用的比较少，一般会用其他选择器替代，请看下面：
           $("prev + next")等价于next()
           $("prev ~ siblings")等价于nextAll()

   3)过滤选择器
       (1)基本过滤选择器 selector / s3.html
           :first --> $('p:first')第一个p元素
           :last --> $('p:last')最后一个p元素
           :not(selector) --> $("input:not(:checked)")   过滤掉checked的选择器的所有的input元素
           :even --> $("tr:even")选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
           :odd --> $("tr:odd")选择所有的tr元素的第1，3，5... ...个元素
           :eq(index) --> $("td:eq(2)")选择所有的td元素中序号为2的那个td元素
           :gt(index) --> $("td:gt(4)")选择td元素中序号大于4的所有td元素
           :lt(index) --> $("td:ll(4)")选择td元素中序号小于4的所有的td元素
       (2)内容过滤选择器 selector / s4.html
           :contains(text) 匹配包含给定文本的元素
           :empty 匹配所有不包含子元素或者文本的空元素
           :has(selector) 匹配含有选择器所匹配的元素的元素
           :parent 匹配含有子元素或者文本的元素
           例：
           $("div:contains('John')") 选择所有div中含有John文本的元素
           $("td:empty")  选择所有的为空（也不包括文本节点）的td元素的数组
           $("div:has(p)")  选择所有含有p标签的div元素
           $("td:parent")  选择所有的以td为父节点的元素数组            
       (3)可视化过滤选择器 selector /s5.html
           :hidden 匹配所有不可见元素，或者type为hidden的元素
           :visible 匹配所有的可见元素
           例：
           $("div:hidden")        选择所有的被hidden的div元素
           $("div:visible")        选择所有的可视化的div元素
       (4)属性过滤选择器   selector /s6.html
           [attribute]  
           [attribute=value]
           [attribute!=value]
           例：
           $("div[id]") 选择所有含有id属性的div元素
           $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
           $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
           $("input[name^='news']")  选择所有的name属性以'news'开头的input元素
           $("input[name$='news']")  选择所有的name属性以'news'结尾的input元素
           $("input[name*='man']")  选择所有的name属性包含'news'的input元素
           $("input[id][name$='man']")  可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
       (5)子元素过滤选择器 selector /s7.html
           :nth-child(index/even/odd)：$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
           $("div span:first-child")          返回所有的div元素的第一个子节点的数组
           $("div span:last-child")           返回所有的div元素的最后一个节点的数组
           $("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组            
       (6)表单对象属性过滤选择器（表单元素过滤选择器） selector /s8.html
           $(":enabled") 选择所有的可操作的表单元素
           $(":disabled") 选择所有的不可操作的表单元素
           $(":checked") 选择所有的被checked的表单元素
           $("select option:selected") 选择所有的select 的子元素中被selected的元素
   4)表单选择器
       $(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button
       $(":text") 选择所有的text input元素
       $(":password") 选择所有的password input元素
       $(":radio") 选择所有的radio input元素
       $(":checkbox") 选择所有的checkbox input元素
       $(":submit") 选择所有的submit input元素
       $(":image") 选择所有的image input元素
       $(":reset") 选择所有的reset input元素
       $(":button") 选择所有的button input元素
       $(":file") 选择所有的file input元素
       $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域