jQuery學習總結之元素的相對定位和選取器(持續更新)

最後更新：2013-10-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

①jQuery元素的相對定位。
jQuery中不僅可以使用選取器就行絕對位置，而且還可以進行相對定位，只要在$()中指定第二個參數，第二個參數就是相對的元素。第二個參數傳遞一個jQuery對象，則相對於這個對象為基準進行相對的選擇。
複製代碼代碼如下:
<html>
<head>
<title>jQuery元素的相對定位和選取器</title>
<script type="text/javascript" src="jQuery-1.4.2.js"></script>
<script>
$(function(){
//將第1~3行的背景色設定為紅色（絕對位置）。
//注意此處的gt(0)是從lt(4)出的新序列中的序號開始的，而不是原來的。(即在原來的基礎上進一步過濾)
$("#t tr:lt(4):gt(0)").css("background","red");
$("#t tr").click(function(){
//Dom中的this-->jQuery 中$(this)
//$("td",$(this))是相對該行tr下的搜有td
$("td",$(this)).css("background","green");
});
$("tr[title=ttt ]").css("background","yellow");
});
</script>
</head>
<body>
<div id="div1">
<table id="t">
<tr><td>111</td><td>A</td></tr>
<tr><td>222</td><td>B</td></tr>
<tr><td>333</td><td>C</td></tr>
<tr><td>444</td><td>D</td></tr>
<tr title="ttt"><td>555</td><td>E</td></tr>
<tr><td>666</td><td>F</td></tr>
<tr><td>777</td><td>G</td></tr>
<tr><td>888</td><td>H</td></tr>
<tr><td>999</td><td>I</td></tr>
</table>
<br/>
</div>
</body>
</html>

運行：

②$("div[id]")選取有id屬性的div
③$("div[title=test]")選取title屬性為"test"的div。注意：一個等號。
$("div[title!=test]")選取title屬性不為"test"的div
④$("input:checked")注意：input和:checked之間沒有空格
⑤$("input")和$(":input")的區別
$("input")只能取到<input>標籤，而<textarea>、<select>等就不能取得了。
$(":input")不僅能取到<input>標籤，而<textarea>、<select>等提交伺服器的表單都能取到。
類似的$(":text")擷取所有單行文字框，我們也可以通過$("input[type=text]")來實現相同的功能。類似的還有$(":passowrd")、$(":radio")、$(":checkbox")、$(":submit")、$(":image")、$(":reset")、$(":button")、$(":file")、$(":hidden")
⑥使用attr()方法讀取或者設定元素的屬性，對於jQuery沒有的封裝的屬性用attr進行操作。
$("#a:first").attr("href","http://baidu.com");
⑦刪除屬性removeAttr，刪除屬性在原始碼中看不到，這時和清空屬性的區別。
⑧動態建立Dom節點
使用$(html字串)來動態建立Dom節點，並返回一個jQuery對象，然後調用append等方法將建立的節點添加到Dom中。
var link=$("<a href='http://www.baidu.com'>百度</a>");
$("div:first").append(link);
append方法用來在元素的末尾追加元素（添加子項目，成為最後一個子項目）
prepend方法在元素的開始添加元素（添加子項目，成為第一個子項目）
after方法在元素之後添加元素（添加兄弟）
before方法在元素之前添加元素（添加兄弟）
⑨刪除節點
remove()刪除選擇的節點，該方法是傳回值是被刪除的節點對象，還可以繼續使用被刪除的節點。
var list=$("#ulLeft li.test").remove();
$("#ulRight").append(list);

阻止事件冒泡e.stopPropagation();
阻止預設行為：e.preventDefault()和window.event.returnValue=false效果一樣

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More