屬性
我們以<img id="a" scr="5.jpg"/>為例，在原始的Javascript裡面可以用var o=document.getElementById('a')取的id為a的節點對象，在用o.src來取得或修改該節點的scr屬性，在jQuery裡$("#a")將得到jQuery對象[ <img id="a" scr="5.jpg"/> ]，然後可以用jQuery提供的很多方法來進行操作，如$("#a").scr()將得到5.jpg,$("#a").scr("1.jpg")將該對象src屬性改為1,jpg。下面我們來講jQuery提供的眾多jQuery方法，方便大家快速對DOM對象進行操作
herf() herf(val)
說明：對jQuery對象屬性herf的操作。
例子：
未執行jQuery前 <a href="1.htm" id="test" >jQuery</a>
jQuery代碼及功能：
function jq(){alert($("#test").href());
$("#test").href("2.Html");
}
運行：先彈出對話框顯示id為test的連接url，在將其url改為2.html，當彈出對話框後會看到轉向到2.Html
同理，jQuery還提供類似的其他方法，大家可以分別試驗一下：
herf() herf(val) html() Html(val) id() id (val) name() name (val) rel() rel (val)
src() src (val) title() title (val) val() val(val)
操作
after(html) 在匹配元素後插入一段Html jQuery代碼及功能：
append(html)在匹配元素內部，且末尾插入指定Html jQuery代碼及功能：
$("#test").after("<b>Hello</b>");
}
執行後相當於：
<a href="#" id="test" >jQuery</a><b>Hello</b>after(elem) after(elems) 將指定對象elem或對象組elems插入到在匹配元素後
<p id="test">after</p><a href="#" >jQuery</a>
jQuery代碼及功能
function jq(){$("a").after($("#test"));
}
執行後相當於
<a href="#" >jQuery</a><p id="test">after</p>
<a href="#" id="test" >jQuery</a>
function jq(){ $("#test").append("<b>Hello</b>");
}
執行後相當於
<a href="#" >jQuery<b>Hello</b></a>同理還有append(elem) append(elems) before(Html) before(elem) before(elems)請執行參照append和after的方來測試、理解！
appendTo(expr) 與append(elem)相反 clone() 復制一個jQuery對象 empty() 刪除匹配對象的所有子節點
<p id="test">after</p><a href="#" >jQuery</a>
jQuery代碼及功能
function jq(){$("a"). appendTo ($("#test"));
}
執行後相當於
<p id="test">after<a href="#" >jQuery</a> </p> <p id="test">after</p><a href="#" >jQuery</a>jQuery代碼及功能：
function jq(){$("#test").clone().appendTo($("a"));
}
復制$("#test")然後插入到<a>後,執行後相當於
<p id="test">after</p><a href="#" >jQuery</a><p id="test">after</p><div id="test"> <span>span</span> <p>after</p></div><a href="#" >jQuery</a>
jQuery代碼及功能：
function jq(){$("#test").empty();
}
執行後相當於
<div id="test"></div><a href="#" >jQuery</a>
insertAfter(expr) insertBefore(expr)
按照官方的解釋和我的幾個簡單測試insertAfter(expr)相當於before(elem),insertBefore(expr)相當於after (elem)
prepend (Html) prepend (elem) prepend (elems) 在匹配元素的內部且開始出插入
通過下面例子區分append(elem) appendTo(expr) prepend (elem)
<div>div</div>
執行$("#a").append($("div")) 後相當於
<p id="a">P
<div>div</div>
</p>
執行$("#a").appendTo($("div")) 後 相當於
<div>div
<p id="a">p</p>
</div>
執行$("#a").prepend ($("div")) 後 相當於
<p id="a"><div>div</div>
P
</p>
- 上一頁:JQuery教程示例及演示實例3
- 下一頁:JQuery教程示例及演示實例1