JQuery快速入門-操做元素的屬性和樣式

咱們在學習JavaScript時，詳細介紹了DOM對象。從DOM樹能夠得知，對DOM的操做，主要包括：元素的屬性、內容、值、CSS。

1、元素屬性的操做

在 jQuery 中，能夠對元素的屬性執行獲取、設置、刪除的操做，經過 attr() 方法能夠對元素屬性執行獲取和設置操做，而 removeAttr() 方法則能夠輕鬆刪除某一指定的屬性。

一、獲取元素屬性

//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 alt="" title=" 這是一幅畫 "src="timg.gif" />
<div id="divAlt"></div>    

　　

二、設置元素屬性

普通屬性：

$("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"

});

 

三、刪除元素屬性

$("img").removeAttr("src"); 

 

2、獲取和設置元素

一、獲取和設置元素內容(html、text)

 

二、獲取和設置元素值（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>

　　

3、元素樣式操做

一、設置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>

　　

二、增長、刪除、切換class

addClass(class0 class1 ...)

removeClass(class0 class1 ...)

toggleClass(class0) #有class0則去掉，沒有則添加

 

4、頁面元素操做

內部插入

 

一、append($div);  //添加一個元素

      preappend($div);

var $div = $("<div title='jQuery 理念 '>Write Less Do More</div>");
$("body").append($div);

　　

二、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>    

　　

三、$("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'>tao_guo_rong@163.com</span>").replaceAll("#Span2");
})
</script>

　　

包裹元素

<script type="text/javascript">
$(function() {
    $("p").wrap("<b></b>"); // 全部p標籤的字體加粗，在元素外面包裹
    $("span").wrapInner("<i></i>");// 全部span標籤改成斜體，在元素裏面包裹
})
</script>

　　

刪除和清空元素

remove() //刪除元素

empty() //清空節點裏面的子元素

 

5、遍歷元素

一、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/