jQuery學習總結(jié)之元素的相對定位和選擇器(持續(xù)更新)
jQuery中不僅可以使用選擇器就行絕對定位，而且還可以進行相對定位，只要在$()中指定第二個參數(shù)，第二個參數(shù)就是相對的元素。第二個參數(shù)傳遞一個jQuery對象，則相對于這個對象為基準進行相對的選擇。
<html>
<head>
<title>jQuery元素的相對定位和選擇器</title>
<script type="text/javascript" src="jQuery-1.4.2.js"></script>
<script>
$(function(){
//將第1~3行的背景色設(shè)置為紅色（絕對定位）。
//注意此處的gt(0)是從lt(4)出的新序列中的序號開始的，而不是原來的。(即在原來的基礎(chǔ)上進一步過濾)
$("#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")的區(qū)別
$("input")只能取到<input>標簽，而<textarea>、<select>等就不能取得了。
$(":input")不僅能取到<input>標簽，而<textarea>、<select>等提交服務(wù)器的表單都能取到。
類似的$(":text")獲取所有單行文本框，我們也可以通過$("input[type=text]")來實現(xiàn)相同的功能。類似的還有$(":passowrd")、$(":radio")、$(":checkbox")、$(":submit")、$(":image")、$(":reset")、$(":button")、$(":file")、$(":hidden")
⑥使用attr()方法讀取或者設(shè)置元素的屬性，對于jQuery沒有的封裝的屬性用attr進行操作。
$("#a:first").attr("href","⑦刪除屬性removeAttr，刪除屬性在源代碼中看不到，這時和清空屬性的區(qū)別。
⑧動態(tài)創(chuàng)建Dom節(jié)點
使用$(html字符串)來動態(tài)的創(chuàng)建Dom節(jié)點，并返回一個jQuery對象，然后調(diào)用append等方法將創(chuàng)建的節(jié)點添加到Dom中。
var link=$("<a ).append(link);
append方法用來在元素的末尾追加元素（添加子元素，成為最后一個子元素）
prepend方法在元素的開始添加元素（添加子元素，成為第一個子元素）
after方法在元素之后添加元素（添加兄弟）
before方法在元素之前添加元素（添加兄弟）
⑨刪除節(jié)點
remove()刪除選擇的節(jié)點，該方法是返回值是被刪除的節(jié)點對象，還可以繼續(xù)使用被刪除的節(jié)點。
var list=$("#ulLeft li.test").remove();
$("#ulRight").append(list);
阻止事件冒泡e.stopPropagation();
阻止默認行為：e.preventDefault()和window.event.returnValue=false效果一樣
- 使用jquery選擇器如何獲取父級元素、同級元素、子元素
- jQuery層次選擇器選擇元素使用介紹
- jquery基本選擇器匹配多個元素的實現(xiàn)方法
- 簡單講解jQuery中的子元素過濾選擇器
- jQuery基本選擇器選擇元素使用介紹
- jquery子元素過濾選擇器使用示例
- jquery層級選擇器(匹配父元素下的子元素實現(xiàn)代碼)
- jquery層級選擇器的實現(xiàn)(匹配后代元素div)
- jQuery+css last-child實現(xiàn)選擇最后一個子元素操作示例
- jQuery選擇器之子元素過濾選擇器
- jQuery選擇器之子元素選擇器詳解
- jQuery選擇器選中最后一個元素，倒數(shù)第二個元素操作示例
相關(guān)文章
當有大量的內(nèi)容或者圖片需要在你的網(wǎng)站或者BLOG上展示的時候，以幻燈片滑動的方式是一個不錯的選擇，這種效果常用于公司網(wǎng)站或者個人BLOG。2010-10-10
這篇文章主要介紹了jQuery實現(xiàn)用戶信息表格的添加和刪除功能,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-09-09
jQuery contains過濾器實現(xiàn)精確匹配使用方法
contains 選擇器選取包含指定字符串的元素。該字符串可以是直接包含在元素中的文本，或者被包含于子元素中。經(jīng)常與其他元素/選擇器一起使用，來選擇指定的組中包含指定文本的元素2013-04-04
easyUI combobox實現(xiàn)聯(lián)動效果
這篇文章主要為大家詳細介紹了easyUI combobox實現(xiàn)聯(lián)動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
easyui是一種基于jQuery的用戶界面插件集合，easyui為創(chuàng)建現(xiàn)代化，互動，JavaScript應(yīng)用程序，提供必要的功能，本篇文章給大家整理有關(guān)jquery Easyui快速開發(fā)的技巧，需要的朋友可以參考下2015-08-08
jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?funct
這篇文章主要介紹了jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?function，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
jQuery插件jPaginate實現(xiàn)無刷新分頁
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個ie啊。2015-05-05
大家都知道dom是一種與瀏覽器、平臺、語言無關(guān)的接口，使用dom接口可以很輕松訪問頁面中所有的標準組件，本篇文章主要給大家講解jquery基礎(chǔ)教程之dom操作，有需要的朋友可以參考下2015-08-08
多個datatable共存造成多個表格的checkbox都被選中
所以當有多個datatable 引用到一個頁面中的時候，全選事件會匹配全部的datatable，所以造成全部多個表格的checkbox被都被選中2013-07-07
這篇文章主要介紹了jQuery中next()方法用法,實例分析了next()方法的功能、定義及獲得匹配元素集合中每個元素緊鄰的同輩元素使用技巧,需要的朋友可以參考下2015-01-01