jQuery學(xué)習(xí)總結(jié)之元素的相對定位和選擇器(持續(xù)更新)
jQuery中不僅可以使用選擇器就行絕對定位，而且還可以進(jìn)行相對定位，只要在$()中指定第二個參數(shù)，第二個參數(shù)就是相對的元素。第二個參數(shù)傳遞一個jQuery對象，則相對于這個對象為基準(zhǔn)進(jìn)行相對的選擇。
<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ǔ)上進(jìn)一步過濾)
$("#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>
運(yùn)行效果圖：
②$("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>標(biāo)簽，而<textarea>、<select>等就不能取得了。
$(":input")不僅能取到<input>標(biāo)簽，而<textarea>、<select>等提交服務(wù)器的表單都能取到。
類似的$(":text")獲取所有單行文本框，我們也可以通過$("input[type=text]")來實(shí)現(xiàn)相同的功能。類似的還有$(":passowrd")、$(":radio")、$(":checkbox")、$(":submit")、$(":image")、$(":reset")、$(":button")、$(":file")、$(":hidden")
⑥使用attr()方法讀取或者設(shè)置元素的屬性，對于jQuery沒有的封裝的屬性用attr進(jìn)行操作。
$("#a:first").attr("href","⑦刪除屬性removeAttr，刪除屬性在源代碼中看不到，這時和清空屬性的區(qū)別。
⑧動態(tài)創(chuàng)建Dom節(jié)點(diǎn)
使用$(html字符串)來動態(tài)的創(chuàng)建Dom節(jié)點(diǎn)，并返回一個jQuery對象，然后調(diào)用append等方法將創(chuàng)建的節(jié)點(diǎn)添加到Dom中。
var link=$("<a ).append(link);
append方法用來在元素的末尾追加元素（添加子元素，成為最后一個子元素）
prepend方法在元素的開始添加元素（添加子元素，成為第一個子元素）
after方法在元素之后添加元素（添加兄弟）
before方法在元素之前添加元素（添加兄弟）
⑨刪除節(jié)點(diǎn)
remove()刪除選擇的節(jié)點(diǎn)，該方法是返回值是被刪除的節(jié)點(diǎn)對象，還可以繼續(xù)使用被刪除的節(jié)點(diǎn)。
var list=$("#ulLeft li.test").remove();
$("#ulRight").append(list);
阻止事件冒泡e.stopPropagation();
阻止默認(rèn)行為：e.preventDefault()和window.event.returnValue=false效果一樣
- 使用jquery選擇器如何獲取父級元素、同級元素、子元素
- jQuery層次選擇器選擇元素使用介紹
- jquery基本選擇器匹配多個元素的實(shí)現(xiàn)方法
- 簡單講解jQuery中的子元素過濾選擇器
- jQuery基本選擇器選擇元素使用介紹
- jquery子元素過濾選擇器使用示例
- jquery層級選擇器(匹配父元素下的子元素實(shí)現(xiàn)代碼)
- jquery層級選擇器的實(shí)現(xiàn)(匹配后代元素div)
- jQuery+css last-child實(shí)現(xiàn)選擇最后一個子元素操作示例
- jQuery選擇器之子元素過濾選擇器
- jQuery選擇器之子元素選擇器詳解
- jQuery選擇器選中最后一個元素，倒數(shù)第二個元素操作示例
相關(guān)文章
Jquery仿IGoogle實(shí)現(xiàn)可拖動窗口示例代碼
這個拖動窗口是根據(jù)一個Jquery的框架直接做出來的:easywidgets，廢話就不多說了，直接把源代碼貼出來，讓大家學(xué)習(xí)2014-08-08
改善你的jQuery的25個步驟 -- 從頭看完會有無數(shù)收獲,千倍級效率提升2010-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery插件開發(fā)的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jquery的live使用注意事項,需要的朋友可以參考下2014-02-02
load可以做到加載一個頁面的時候，如果發(fā)生錯誤，根據(jù)statusText給出的狀態(tài)，顯示對應(yīng)的提示，這對用戶來說非常重要2014-10-10
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)中間浮窗效果,涉及jQuery事件響應(yīng)及動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09
jQuery插件HighCharts實(shí)現(xiàn)的2D回歸直線散點(diǎn)效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)的2D回歸直線散點(diǎn)效果,結(jié)合實(shí)例形式分析了jQuery基于HighCharts插件繪制直線散點(diǎn)圖形的具體相關(guān)操作步驟與實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請求當(dāng)前源（域名、協(xié)議、端口）的資源。2011-06-06
這篇文章主要介紹了jQuery動態(tài)修改超鏈接地址的方法,實(shí)例分析了jQuery中attr方法的使用技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-02-02
jQuery文字橫向滾動效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query文字橫向滾動效果的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05