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