jquery選擇器和屬性對(duì)象的操作實(shí)例分析
本文實(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ù)組,所以其沒(méi)有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ì)象,感覺(jué)和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è)用來(lái)點(diǎn)名要修改的屬性,另一個(gè)用來(lái)點(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> <h3>jQuery-選擇器</h3> <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頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
idTabs基于JQuery的根據(jù)URL參數(shù)選擇Tab插件
我們的項(xiàng)目用了SunSean的idTabs,但每個(gè)tab里的控件會(huì)觸發(fā)postback,或者轉(zhuǎn)到其他頁(yè)面再轉(zhuǎn)回來(lái),這樣當(dāng)前選中的tab必丟。印度同事不肯用AJAX,無(wú)奈今天加班給印度人寫個(gè)demo,通過(guò)回傳URL參數(shù)來(lái)選擇tab2012-04-04jquery實(shí)現(xiàn)tr元素的上下移動(dòng)示例代碼
讓tr元素的上下移動(dòng)的方法有很多,本文為大家介紹下使用jquery是實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-12-12jQuery中replaceWith()方法用法實(shí)例
這篇文章主要介紹了jQuery中replaceWith()方法用法,以實(shí)例形式分析了replaceWith()方法用于匹配元素替換的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
Lazy Load 是一個(gè)用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶將頁(yè)面滾動(dòng)到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的2012-10-10jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航
這篇文章主要介紹了jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航,文中示例代碼非常詳細(xì),幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎(jiǎng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery插件實(shí)現(xiàn)無(wú)縫滾動(dòng)特效
今天給大家分享一款頁(yè)面無(wú)縫滾動(dòng)的jquery插件,支持上下左右,淡入淡出,滾動(dòng)時(shí)間設(shè)置,動(dòng)畫時(shí)間設(shè)置,感興趣的小伙伴們可以參考一下2015-11-11jquery按回車鍵實(shí)現(xiàn)表單提交的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery按回車鍵實(shí)現(xiàn)表單提交的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05