document.getElementById('div1');
document.getElementsByTagName('div');
getByClass(document,'box');
$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');
$('li:eq(2)').css('background','black');//所選擇的元素集合中下標為2的元素,下標從0開始;
$('li:odd').css('background','red');//匹配下標為基數的元素
$('li:even').css('background','red');//下標為偶數的元素
$('li').filter('.box').css('background','red');//className為box的li元素;
$('li').filter('[title=hello]').css('background','red');
1.基本元素選擇器
$(“p”) //選取<p>元素
$(“p.info”) //選取所有class=”info”的<p>元素
$(“p#demo”) //選取id=”demo”的第一個<p>元素
分層選擇器:使用這種選擇器時,需要傳入多個值,並用空格或大於號分隔。例如:
$(“div input”) //選擇div下所有的input
$(“div > input”) //選擇父元素(div)下的子元素(input)
2、基本條件選擇器
使用這種選擇器時,需要在元素的選擇符后加上基本條件運算符,這些條件運算符都是jQuery內置的運算符。例如:
復制代碼
$(“p:first”) //選擇第一個段落
$(“p:last”) //選擇最后一個段落
$(“tr:even”) //選擇偶數表格行
$(“tr:odd”) //選擇奇數表格行
$(“input:not(:checked)”) //選擇所有未被選中的元素
$(“tr:eq(1)”) //選擇索引值為1的表格行
$(“tr:gt(0)”) //選擇索引值大於0的表格行
$(“tr:lt(2)”) //選擇索引值小於2的表格行
$(“:header”) //選擇所有標題元素
$(“:animated”) //選擇所有正在執行動畫的元素
3、內容條件選擇器
使用這種選擇器時,需要在元素的后面加上內容篩選運算符。例如: $(“div:contains(„John‟)”) //選擇包含‘John’文本的層元素
$(“td:empty”) //選擇不包含文本或者子元素的表格單元
$(“div:has(p)”) //選擇包含段落元素的層元素
$(“td:parent”) //選擇包含文本或者子元素的表格單元
4、可見性條件選擇器
使用這種選擇器時,需要在元素后面加上可見性條件。例如:
$(“tr:hidden”) //選擇所有隱藏的表格行
$(“tr:visible”) //選擇所有可見的表格行
5、屬性選擇器
使用這種選擇器時,需要利用元素屬性並使用一定條件來進行選擇。例如: $(“div[id]”) //選擇具有id屬性的層
復制代碼
$(“input[name=‟newletter‟]”) //選擇具有屬性name並且屬性值為‘newletter’的表單輸入元素
$(“input[name!=‟newsletter‟]”) //選擇具有屬性name並且屬性值不為‘newletter’的表單輸入元素
$(“input[name^=‟news‟]”) //選擇具有屬性name並且屬性值以‘news’為起始內容的表單輸入內容
$(“input[name$=‟letter‟]”) //選擇具有屬性name並且屬性值以‘letter’為結束內容的表單輸入元素
$(“input[name*=‟man‟]”) //選擇具有屬性name並且屬性值包含‘man’內容的表單輸入元素
$(“input[id][name$=‟man‟]”) //選擇具有屬性id和name並且name的值以‘man’為結束內容的表單輸入內容
復制代碼
6、子元素選擇器
使用這種選擇器時,需要加入子元素的選擇條件。例如:
復制代碼
$(“ul li:nth-child(2)”) //選擇第2個列表項
$(“ul li:nth-child(even)”) //選擇偶數索引列表項
$(“ul li:nth-child(odd)”) //選擇奇數索引列表項
$(“ul li:nth-child(3n)”) //選擇索引值為3的倍數的列表項
$(“ul li:first-child”) //選擇第一個列表項
$(“ul li:last-child”) //選擇最后一個列表項
$(“ul li:only-child”) //選擇列表出現且僅出現一個的列表項
復制代碼
7、表單元素選擇器
使用這種選擇器時,需要加入代表不同表單元素類型的標示符。例如:
復制代碼
$(“:input”) //選擇所有input,textarea,select和button元素
$(“:text”) //選擇單行文本框
$(“:password”) //選擇密碼框
$(“:radio”) //選擇單選按鈕
$(“:checkbox”) //選擇復選框
$(“:submit”) //選擇提交按鈕
$(“:image”) //選擇所有圖像域
$(“:reset”) //選擇重置按鈕
$(“:button”) //選擇普通按鈕
$(“:file”) //選擇文件域
$(“:hidden”) //選擇隱藏域
$(“input:enabled”) //選擇所有可用元素
$(“input:disabled”) //選擇所有不可用元素
$(“input:checked”) //選擇所有被選中的復選框和單選按鈕
$(“select option:selected”) //選擇所有被選中的option