快捷導(dǎo)航

jquery選擇器和屬性對象的操作實例分析

更新時間：2020年01月10日 08:41:09 作者：qq_42412646

這篇文章主要介紹了jquery選擇器和屬性對象的操作,結(jié)合實例形式分析了jquery選擇器與頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jquery選擇器和屬性對象的操作。分享給大家供大家參考，具體如下：

<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獲取對象，注意其在利用id的是時候必須在前面加#，畢竟是你自定義的名稱
  var inp=$("#inp"); 
  alert(inp);   //返回的是獲取的對象類型[object Object]
  alert(inp.val()); //可以實時的獲得對象的value值，注意：inp本質(zhì)上是一個數(shù)組，所以其沒有value屬性(value是對象的屬性)，我們使用了其val方法
  alert(inp.length);  //返回數(shù)組的長度
  }
  function testTarget(){
  //利用標(biāo)簽獲得對象
  var ta=$("input");
  alert(ta.val());   //打印了第一個input的元素的value值
  alert(ta.length);  //返回數(shù)組長度，就是所有的input標(biāo)簽的數(shù)目
  }
  function testClass(){
  //利用類獲取對象,感覺和css的對應(yīng)的選擇器一樣，利用類選擇器時，用.類名
  var cl=$(".common");
  alert(cl.val());
  alert(cl.length);  //返回有這個類屬性的數(shù)目
  }
  function testComponent(){
  //利用組合的各種方法獲取對象
  var al=$(".common,input");
  alert(al.val());
  alert(al.length);  //返回所有類型數(shù)目之和
  }
  function testComponent(){
  //利用組合的各種方法獲取對象
  var al=$(".common,input");
  alert(al.val());
  alert(al.length);  //返回所有類型數(shù)目之和
  }
  function testChild(){
  //獲取父類的對象
  var fa=$("#showdiv>input");
  alert(fa.val());
  alert(fa.length);
  }
  function testCj(){
  //測試層次結(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的對象，而非數(shù)組，我們從中取得了對象值
  } 
  function testCj2(){
  //測試層次結(jié)構(gòu)
  var tds=$("td");
  alert(tds.length);  //返回值數(shù)目是6個
  var tdm=$("td:not(td[width])");//返回的對象是指定對象減去后面的帶限制的數(shù)據(jù)，的一個數(shù)組
  alert(tdm.length);  //返回值是4個，減去了td中有width屬性的個數(shù)
  alert(tdm.html());  //返回標(biāo)簽內(nèi)部的數(shù)據(jù)，相當(dāng)于js的innerHTML    
  }
  //操作數(shù)據(jù)的屬性
  function testField(){
  //獲得對象
  var fl=$("#inp");
  alert(fl.attr("type")+":"+fl.attr("value")+"："+fl.val());
  //在此聲明一下，對應(yīng)的利用attr可以獲得對象的一系列屬性，其中這種方法的value只能獲得其默認(rèn)的已經(jīng)存在的值，但是利用數(shù)組對象.val()獲取的可以獲得實時的值
  }
  function testChange(){
  //獲取對象
  var f2=$("#inp");
  //修改對象屬性
  f2.attr("type","button");//注意其內(nèi)部是兩個帶引號的，一個用來點名要修改的屬性，另一個用來點名要修改為的數(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="測試id選擇器" onclick="testId()"/>
 <input type="button" name="" id="" value="測試標(biāo)簽選擇器" onclick="testTarget()"/>
 <input type="button" name="" id="" value="測試類選擇器" onclick="testClass()"/>
 <input type="button" name="" id="" value="測試組合選擇器" onclick="testComponent()"/>
 <input type="button" name="" id="" value="測試子類選擇器" onclick="testChild()"/>
 <input type="button" name="" id="" value="測試層次選擇器" onclick="testCj()"/>
 <input type="button" name="" id="" value="測試層次選擇器-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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: