一、id選擇器
$( "#id" )
二、類選擇器
$( ".class" )
三、元素選擇器
$( "元素【p、div、a………】" )
四、全選擇器（*選擇器）
$( "*" )
五、層級選擇器
例：
//子選擇器
//$('div > p') 選擇所有div元素里面的子元素P
//后代選擇器
//$('div p') 選擇所有div元素里面的p元素
//相鄰兄弟選擇器
// $(".prev + div")選取class=“prev”后面的第一個的div兄弟節(jié)點
//一般相鄰選擇器
// $(".prev ~ div")選取class=“prev”后面的所有的div兄弟節(jié)點
六、基本篩選選擇器
例：
//找到第一個div
$(".div:first")
//找到最后一個div
$(".div:last")
//:even 選擇所引值為偶數(shù)的元素，從 0 開始計數(shù)
$(".div:even")
//:odd 選擇所引值為奇數(shù)的元素，從 0 開始計數(shù)
$(".div:odd")
//:eq
//選擇單個
$(".aaron:eq(2)")
//:gt 選擇匹配集合中所有索引值大于給定index參數(shù)的元素
$(".aaron:gt(3)")
//:lt 選擇匹配集合中所有索引值小于給定index參數(shù)的元素
//與:gt相反
$(".aaron:lt(2)")
//:not 選擇所有元素去除不匹配給定的選擇器的元素
//選中所有緊接著沒有checked屬性的input元素后的p元素
$("input:not(:checked) + p")
七、內(nèi)容篩選選擇器
例：
//查找所有class='div'中DOM元素中包含字符"contains"的元素節(jié)點
$(".div:contains(':contains')")
//查找所有class='div'中DOM元素中包含"span"的元素節(jié)點
$(".div:has(span)")
//選擇所有包含子元素或者文本的a元素
$("a:parent")
//找到a元素下面的所有空節(jié)點(沒有子元素)
$("a:empty").text(":empty")
八、可見性篩選選擇器
例：
//查找id = div1可見的DOM元素
$('#div1:visible')
//查找id = div1隱藏的DOM元素
$('#div1:hidden')
我們有幾種方式可以隱藏一個元素：
- CSS display的值是none。
- type="hidden"的表單元素。
- 寬度和高度都顯式設置為0。
- 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
- CSS visibility的值是hidden
- CSS opacity的指是0
九、 屬性篩選選擇器
例：
//查找所有div中，屬性name=p1的div元素
$('div[name=p1]')
//查找所有div中，有屬性p2的div元素
$('div[p2]')
//查找所有div中，有屬性name中的值只包含一個連字符“-”的div元素
$('div[name|="-"]')
//查找所有div中，有屬性name中的值包含一個連字符“空”和“a”的div元素
$('div[name~="a"]')
//查找所有div中，屬性name的值是用imooc開頭的
$('div[name^=imooc]')
//查找所有div中，屬性name的值是用imooc結(jié)尾的
=imooc]')
//查找所有div中，有屬性name中的值包含一個test字符串的div元素
$('div[name*="test"]')
//查找所有div中，有屬性testattr中的值沒有包含"true"的div
$('div[testattr!="true"]')
十、 子元素篩選選擇器
例：
//查找class="first-div"下的第一個a元素
//針對所有父級下的第一個
$('.first-div a:first-child')
//查找class="first-div"下的最后一個a元素
//針對所有父級下的最后一個
//如果只有一個元素的話，last也是第一個元素
$('.first-div a:last-child')
//查找class="first-div"下的只有一個子元素的a元素
$('.first-div a:only-child')
//查找class="last-div"下的第二個a元素
$('.last-div a:nth-child(2)')
//查找class="last-div"下的倒數(shù)第二個a元素
$('.last-div a:nth-last-child(2)')
十一、表單元素選擇器
例：
//:input 選擇器基本上選擇所有表單控件
$(':input')
//匹配所有input元素中類型為text的input元素
$('input:text')
//匹配所有input元素中類型為password的input元素
$('input:password')
//匹配所有input元素中的單選按鈕,并選中
$('input:radio')
//匹配所有input元素中的復選按鈕,并選中
$('input:checkbox')
//匹配所有input元素中的提交的按鈕,修改背景顏色
$('input:submit')
//匹配所有input元素中的圖像類型的元素,修改背景顏色
$('input:image')
//匹配所有input元素中類型為按鈕的元素
$('input:button')
//匹配所有input元素中類型為file的元素
$('input:file')
十二、表單對象屬性選擇器
例:
//查找所有input所有可用的（未被禁用的元素）input元素。
$('input:enabled')
//查找所有input所有不可用的（被禁用的元素）input元素。
$('input:disabled')
//查找所有input所有勾選的元素(單選框,復選框)
$('input:checked')
//查找所有option元素中,有selected屬性被選中的選項
$('option:selected')
十三、特殊選擇器this
p.addEventListener('click',function(){
//this === p
//以下兩者的修改都是等價的
this.style.color = "red";
p.style.color = "red";
},false);
對比
$('p').click(function(){
//把p元素轉(zhuǎn)化成jQuery的對象
var $this= $(this)
$this.css('color','red')
})
例子：
1、
<script type="text/javascript">
var p1 = document.getElementById('test1')
p1.addEventListener('click',function(){
//直接通過dom的方法改變顏色
this.style.color = "red";
},false);
</script>
2、
<script type="text/javascript">
$('#test2').click(function(){
//通過包裝成jQuery對象改變顏色
$(this).css('color','blue');
})
</script>
十四、jQuery對象與DOM對象
普通處理，通過標準JavaScript處理：
var p = document.getElementById('imooc');
p.innerHTML = '您好！通過慕課網(wǎng)學習jQuery才是最佳的途徑';
p.style.color = 'red';
jQuery的處理：
var $p = $('#imooc');
$p.html('您好！通過慕課網(wǎng)學習jQuery才是最佳的途徑').css('color','red');
十五、jQuery對象轉(zhuǎn)化成DOM對象
HTML代碼
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
JavaScript代碼
var $div = $('div') //jQuery對象
var div = $div[0] //轉(zhuǎn)化成DOM對象
div.style.color = 'red' //操作dom對象的屬性
通過jQuery自帶的get()方法
var $div = $('div') //jQuery對象
var div = $div.get(0) //通過get方法，轉(zhuǎn)化成DOM對象
div.style.color = 'red' //操作dom對象的屬性
十六、DOM對象轉(zhuǎn)化成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'); //給第一個元素設置顏色
