溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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本質上是一個數組，所以其沒有value屬性(value是對象的屬性)，我們使用了其val方法
alert(inp.length); //返回數組的長度
}
function testTarget(){
//利用標簽獲得對象
var ta=$("input");
alert(ta.val()); //打印了第一個input的元素的value值
alert(ta.length); //返回數組長度，就是所有的input標簽的數目
}
function testClass(){
//利用類獲取對象,感覺和css的對應的選擇器一樣，利用類選擇器時，用.類名
var cl=$(".common");
alert(cl.val());
alert(cl.length); //返回有這個類屬性的數目
}
function testComponent(){
//利用組合的各種方法獲取對象
var al=$(".common,input");
alert(al.val());
alert(al.length); //返回所有類型數目之和
}
function testComponent(){
//利用組合的各種方法獲取對象
var al=$(".common,input");
alert(al.val());
alert(al.length); //返回所有類型數目之和
}
function testChild(){
//獲取父類的對象
var fa=$("#showdiv>input");
alert(fa.val());
alert(fa.length);
}
function testCj(){
//測試層次結構
//直接獲得其子屬性，利用jQuery的方法
var c1=$("input:first");
alert(c1.val()); //利用數據的方式進行獲得
// alert(c1.length);
// //利用非jQuery的方法
var c2=$("input");
alert(c2[0].value); //我們獲得的是js的對象，而非數組，我們從中取得了對象值
}
function testCj2(){
//測試層次結構
var tds=$("td");
alert(tds.length); //返回值數目是6個
var tdm=$("td:not(td[width])");//返回的對象是指定對象減去后面的帶限制的數據，的一個數組
alert(tdm.length); //返回值是4個，減去了td中有width屬性的個數
alert(tdm.html()); //返回標簽內部的數據，相當于js的innerHTML
}
//操作數據的屬性
function testField(){
//獲得對象
var fl=$("#inp");
alert(fl.attr("type")+":"+fl.attr("value")+"："+fl.val());
//在此聲明一下，對應的利用attr可以獲得對象的一系列屬性，其中這種方法的value只能獲得其默認的已經存在的值，但是利用數組對象.val()獲取的可以獲得實時的值
}
function testChange(){
//獲取對象
var f2=$("#inp");
//修改對象屬性
f2.attr("type","button");//注意其內部是兩個帶引號的，一個用來點名要修改的屬性，另一個用來點名要修改為的數值
}
</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="測試id選擇器" onclick="testId()"/>
<input type="button" name="" id="" value="測試標簽選擇器" 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="獲得數據的屬性" onclick="testField()"/>
<input type="button" name="" id="" value="修改數據的屬性" 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測試上述代碼運行效果。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
