JQuery中選擇元素的方法:


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



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM