您好,登錄后才能下訂單哦!
本文實(shí)例講述了jquery選擇器和屬性對(duì)象的操作。分享給大家供大家參考,具體如下:
<html> <head> <title>jQuery-選擇器</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> function testId(){ //利用id獲取對(duì)象,注意其在利用id的是時(shí)候必須在前面加#,畢竟是你自定義的名稱 var inp=$("#inp"); alert(inp); //返回的是獲取的對(duì)象類型[object Object] alert(inp.val()); //可以實(shí)時(shí)的獲得對(duì)象的value值,注意:inp本質(zhì)上是一個(gè)數(shù)組,所以其沒有value屬性(value是對(duì)象的屬性),我們使用了其val方法 alert(inp.length); //返回?cái)?shù)組的長(zhǎng)度 } function testTarget(){ //利用標(biāo)簽獲得對(duì)象 var ta=$("input"); alert(ta.val()); //打印了第一個(gè)input的元素的value值 alert(ta.length); //返回?cái)?shù)組長(zhǎng)度,就是所有的input標(biāo)簽的數(shù)目 } function testClass(){ //利用類獲取對(duì)象,感覺和css的對(duì)應(yīng)的選擇器一樣,利用類選擇器時(shí),用.類名 var cl=$(".common"); alert(cl.val()); alert(cl.length); //返回有這個(gè)類屬性的數(shù)目 } function testComponent(){ //利用組合的各種方法獲取對(duì)象 var al=$(".common,input"); alert(al.val()); alert(al.length); //返回所有類型數(shù)目之和 } function testComponent(){ //利用組合的各種方法獲取對(duì)象 var al=$(".common,input"); alert(al.val()); alert(al.length); //返回所有類型數(shù)目之和 } function testChild(){ //獲取父類的對(duì)象 var fa=$("#showdiv>input"); alert(fa.val()); alert(fa.length); } function testCj(){ //測(cè)試層次結(jié)構(gòu) //直接獲得其子屬性,利用jQuery的方法 var c1=$("input:first"); alert(c1.val()); //利用數(shù)據(jù)的方式進(jìn)行獲得 // alert(c1.length); // //利用非jQuery的方法 var c2=$("input"); alert(c2[0].value); //我們獲得的是js的對(duì)象,而非數(shù)組,我們從中取得了對(duì)象值 } function testCj2(){ //測(cè)試層次結(jié)構(gòu) var tds=$("td"); alert(tds.length); //返回值數(shù)目是6個(gè) var tdm=$("td:not(td[width])");//返回的對(duì)象是指定對(duì)象減去后面的帶限制的數(shù)據(jù),的一個(gè)數(shù)組 alert(tdm.length); //返回值是4個(gè),減去了td中有width屬性的個(gè)數(shù) alert(tdm.html()); //返回標(biāo)簽內(nèi)部的數(shù)據(jù),相當(dāng)于js的innerHTML } //操作數(shù)據(jù)的屬性 function testField(){ //獲得對(duì)象 var fl=$("#inp"); alert(fl.attr("type")+":"+fl.attr("value")+":"+fl.val()); //在此聲明一下,對(duì)應(yīng)的利用attr可以獲得對(duì)象的一系列屬性,其中這種方法的value只能獲得其默認(rèn)的已經(jīng)存在的值,但是利用數(shù)組對(duì)象.val()獲取的可以獲得實(shí)時(shí)的值 } function testChange(){ //獲取對(duì)象 var f2=$("#inp"); //修改對(duì)象屬性 f2.attr("type","button");//注意其內(nèi)部是兩個(gè)帶引號(hào)的,一個(gè)用來點(diǎn)名要修改的屬性,另一個(gè)用來點(diǎn)名要修改為的數(shù)值 } </script> <style type="text/css"> .common{} #showdiv{ width: 200px; height: 100px; border: solid 1px; } input[type=text]{ margin-top: 10px; width: 80px; margin-left: 10px; } </style> </head> <body> <h4>jQuery-選擇器</h4> <input type="button" name="" id="" class="common" value="測(cè)試id選擇器" onclick="testId()"/> <input type="button" name="" id="" value="測(cè)試標(biāo)簽選擇器" onclick="testTarget()"/> <input type="button" name="" id="" value="測(cè)試類選擇器" onclick="testClass()"/> <input type="button" name="" id="" value="測(cè)試組合選擇器" onclick="testComponent()"/> <input type="button" name="" id="" value="測(cè)試子類選擇器" onclick="testChild()"/> <input type="button" name="" id="" value="測(cè)試層次選擇器" onclick="testCj()"/> <input type="button" name="" id="" value="測(cè)試層次選擇器-not" onclick="testCj2()"/> <hr /> <input type="button" name="" id="" value="獲得數(shù)據(jù)的屬性" onclick="testField()"/> <input type="button" name="" id="" value="修改數(shù)據(jù)的屬性" onclick="testChange()"/> <hr /> <input type="text" name="inp" id="inp" class="common" value="" /> <hr /> <div id="showdiv"> <input type="text" value="是不是我" /> <input type="text" /> <input type="text" /> <input type="text" /> </div> <hr /> <table border="1px"> <tr height="30px"> <td width="100px"></td> <td width="100px"></td> </tr> <tr height="30px"> <td>1</td> <td></td> </tr> <tr height="30px"> <td></td> <td></td> </tr> </table> </body> </html>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。