jquery学习之---选择器

一、如何把jQuery对象转成DOM对象？
HTML代码
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
JavaScript代码

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

通过jQuery自带的get()方法

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
二、DOM对象转化成jQuery对象?
HTML代码
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
三、层级选择器
1)子选择器
      $('div > p') 选择所有div元素里面的子元素P
2)后代选择器
        $('div  p') 选择所有div元素里面的p元素
3)相邻兄弟选择器
       选取prev后面的第一个的div兄弟节点$(".prev+div")
4)一般相邻选择器
      选取prev后面的所有的div兄弟节点$(".prev~div")
四、jQuery选择器之基本筛选选择器
   1)找到第一个div
      $(".div:first")
2)找到最后一个div
        $(".div:last")
3):even 选择所引值为偶数的元素，从 0 开始计数
      $(".div:even")
4):odd 选择所引值为奇数的元素，从 0 开始计数
        $(".div:odd")
5):eq选择单个
      $(".aaron:eq(2)")
6):gt 选择匹配集合中所有索引值大于给定index参数的元素
      $(".aaron:gt(3)")gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始
7):lt 选择匹配集合中所有索引值小于给定index参数的元素与:gt相反
     $(".aaron:lt(2)")
8):not 选择所有元素去除不匹配给定的选择器的元素,选中所有没有checked属性的input元素后的p元素
     $("input:not(:checked) + p")
五、jQuery选择器之内容筛选选择器:
1)查找所有class='div'中DOM元素中包含"contains"的元素节点:             $(".div:contains(':contains')")                                            
2)查找所有class='div'中DOM元素中包含"span"的元素节点
           $(".div:has('span')")
3)选择所有包含子元素或者文本的a元素
       $("a:parent")
4)找到a元素下面的所有空节点(没有子元素)
      $("a:empty")
contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素。
六、jQuery选择器之属性筛选选择器
 1)查找所有div中，属性name=p1的div元素
     $("div[name=p1]")
2)查找所有div中，有属性p2的div元素
     $("div[p2]")
3)查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
     $("div[name='-']")
4)查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
    $("div[name~='a']")
5)查找所有div中，属性name的值是用imooc开头的
     $("div[name^=imooc]")
6)查找所有div中，属性name的值是用imooc结尾的
      $("div[name$=imooc]")
7)查找所有div中，有属性name中的值包含一个test字符串的div元素
    $("div[name*='test']")
8)查找所有div中，有属性testattr中的值没有包含"true"的div
   $("div[testattr!='true']")
七、jQuery选择器之子元素筛选选择器
1)查找class="first-div"下的第一个a元素,针对所有父级下的第一个
       $(".first-div a:first-child")
2)查找class="first-div"下的最后一个a元素,针对所有父级下的最后一个,如果只有一个元素的话，last也是第一个元素
      $(".first-div a:last-child")
3)查找class="first-div"下的只有一个子元素的a元素
       $(".first-div a:only-child")
4)查找class="last-div"下的第二个a元素
        $(".last-div a:nth-child(2)")
5)查找class="last-div"下的倒数第二个a元素
    $(".last-div a:nth-last-child(2)")
八、jQuery选择器之表单元素选择器
1)查找所有 input, textarea, select 和 button 元素,:input 选择器基本上选择所有表单控件
    $(":input")
2)匹配所有input元素中类型为text的input元素
    $("input:text")
3)匹配所有input元素中类型为password的input元素
     $("input:radio")
4)匹配所有input元素中的复选按钮
      $("input:submit")
5)匹配所有input元素中的图像类型的元素
      $("input:image")
6)匹配所有input元素中类型为按钮的元素
     $("input:button")
7)匹配所有input元素中类型为file的元素
     $("input:file")
九、jQuery选择器之表单对象属性筛选选择器
【注意：①选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器②在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素】
1)查找所有input勾选的元素(单选框,复选框)
      $("input:checked")
2)查找所有option元素中,有selected属性被选中的选项
     $("input:selected")
3)查找所有input所有可用的（未被禁用的元素）input元素
     $("input:enabled")
4)查找所有input所有不可用的（被禁用的元素）input元素
    $("input:disabled")
十、jQuery选择器之特殊选择器this:
JavaScript中:
        var imooc = {
             name:"慕课网",
            getName:function(){
                     //this,就是imooc对象
                    return this.name;
           }
     }
imooc.getName(); //慕课网
jQuery的做法：
      $('p').click(function(){
             //把p元素转化成jQuery的对象
             var $this= $(this) 
            $this.css('color','red')
    })
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。