jquery選擇器和屬性對(duì)象的操作實(shí)例分析

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

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

<html>
 <head>
 <title>jQuery-選擇器</title>
 <meta charset="UTF-8"/>
 <script src="/a1/uploads/allimg/200110/143J2OO-0.jpg"></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ì)有所幫助。

上一篇：小程序自定義模板實(shí)現(xiàn)吸頂功能

欄目：JavaScript

下一篇：JavaScript復(fù)制變量三種方法實(shí)例詳解

本文標(biāo)題：jquery選擇器和屬性對(duì)象的操作實(shí)例分析

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9240.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

jquery選擇器和屬性對(duì)象的操作實(shí)例分析

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀