JQuery快速入門-操作元素的屬性和樣式
我們在學習JavaScript時，詳細介紹了DOM對象。從DOM樹可以得知，對DOM的操作，主要包括：元素的屬性、內容、值、CSS。
一、元素屬性的操作
在 jQuery 中，可以對元素的屬性執行獲取、設置、刪除的操作，通過 attr() 方法可以對元素屬性執行獲取和設置操作，而 removeAttr() 方法則可以輕松刪除某一指定的屬性。
1、獲取元素屬性
//JavaScript腳本
<script type="text/javascript">
$(function() {
var strAlt = $("img").attr("src"); // 屬性值1
strAlt += "<br/><br/>" + $("img").attr("title"); // 屬性值2
$("#divAlt").html(strAlt); // 顯示在頁面中
})
</script>
//content
<img title=" 這是一幅畫 "src="timg.gif" />
<div id="divAlt"></div>
2、設置元素屬性
普通屬性：
$("img").attr("src",‘images/img01.jpg‘); // 設置img的src屬性值為：images/img01.jpg
屬性為函數：
$("img").attr("src", function() {
return "Images/img0" +Math.floor(Math.random() * 2 + 1) + ".jpg"
});
3、刪除元素屬性
$("img").removeAttr("src");
二、獲取和設置元素
1、獲取和設置元素內容(html、text)
2、獲取和設置元素值（value）
$(‘#div1).val() #獲取value
$(‘#div1).val(value1) #設置value
$("select").val().join(","); #獲取select的value
<script type="text/javascript">
$(function() {
$("select").change(function() { // 設置列表框 change 事件
// 獲取列表框所選中的全部選項的值
var strSel = $("select").val().join(",");
$("#p1").html(strSel); // 顯示列表框所選中的全部選項的值
})
$("input").change(function() { // 設置文本框 focus 事件
var strTxt = $("input").val(); // 獲取文本框的值
$("#p2").html(strTxt); // 顯示文本框所輸入的值
})
$("input").focus(function() { // 設置文本框 focus 事件
$("input").val(""); // 清空文本框的值
})
})
</script>
三、元素樣式操作
1、設置css屬性
css(name, value)
<script type="text/javascript">
$(function() {
$("p").click(function() {
$(this).css("font-weight", "bold"); // 字體加粗
$(this).css("font-style", "italic"); // 斜體
$(this).css("background-color", "#eee");// 增加背景色
})
})
</script>
2、增加、刪除、切換class
addClass(class0 class1 ...)
removeClass(class0 class1 ...)
toggleClass(class0) #有class0則去掉，沒有則添加
四、頁面元素操作
內部插入
1、append($div); //添加一個元素
preappend($div);
var $div = $("<div title=‘jQuery 理念 ‘>Write Less Do More</div>");
$("body").append($div);
2、append(function(index, html)) //以函數為參數添加一個元素
preappend(function(index, html))
<script type="text/javascript">
$(function() {
$("div").append(retHtml);// 插入內容
function retHtml() {
var str = " <b>Write Less Do More</b> ";
return str;
}
})
</script>
3、$("span").appentTo($("div"));//把所選擇的元素追加到另一個指定的元素集合中.把span元素最佳到div元素中。
preappentTo($("div"));
外部插入
拷貝節點
clone() //簡單復制
如果需要在復制時將該元素的全部行為也進行復制，可以通過方法 clone(true) 實現，其格式為：clone(true) //整體復制
replaceWith()和replaceAll(）
<script type="text/javascript">
$(function() {
$("#Span1").replaceWith("<span title=‘replaceWith‘> 陶國榮 </span>");
$("<span title=‘replaceAll‘>[email protected]</span>").replaceAll("#Span2");
})
</script>
包裹元素
<script type="text/javascript">
$(function() {
$("p").wrap("<b></b>"); // 所有p標簽的字體加粗，在元素外面包裹
$("span").wrapInner("<i></i>");// 所有span標簽改為斜體，在元素裏面包裹
})
</script>
刪除和清空元素
remove() //刪除元素
empty() //清空節點裏面的子元素
五、遍歷元素
1、each()
<script type="text/javascript">
$(function() {
//遍歷每一個img元素
$("img").each(function(index) {
// 根據形參 index 設置元素的 title 屬性
this.title = " 第 " + index + " 幅風景圖片，alt 內容是 " + this.alt;
})
})
</script>
參考網址：
http://www.css88.com/jqapi-1.9/
JQuery快速入門-操作元素的屬性和樣式