jQuery操控DOM元素-訪問頁面的元素

訪問頁面的元素

訪問頁面時須要與頁面中的元素進行交互式的操做，在操做中元素的訪問時最頻繁，最多見的。主要包括對元素屬性、內容、值、css的操做

元素屬性操做

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

獲取元素的屬性

語法--- attr(name);

獲取img標籤的src屬性,並彈出alert

<script type="text/javascript">
    $(function(){
        var im=$("img").attr("src");
        alert(im);  //img/bt1.jpg
    });
</script>

<div id="wrapper">
    <img src="img/bt1.jpg" />
</div>

設置元素的屬性

attr方法不只能夠獲取元素的屬性，也能夠設置元素的屬性

語法--- attr(key,value);

其中key表示屬性的名稱，value標書屬性的值，設置多個屬性的值，也能夠經過attr實現

語法--- attr({key0:value0,key1:value1});

鼠標通過改變圖片，在鼠標通過的時候，經過attr方法設置圖片的src值實現

<script type="text/javascript">
    $(function(){
        var im=$("img");
        im.mouseover(function(){
            im.attr("src","img/bt2.jpg");
        });
    });
</script>

<div id="wrapper">
    <img src="img/bt1.jpg" />
</div>

刪除元素的屬性

jQuery中，使用removeAttr方法能夠刪除元素的屬性

語法--- removeAttr(name);

鼠標通過刪除img標籤的src屬性，鼠標通過以後圖片消失

<script type="text/javascript">
    $(function(){
        var im=$("img");
        im.mouseover(function(){
            im.removeAttr("src");
        });
    });
</script>

<div id="wrapper">
    <img src="img/bt1.jpg" />
</div>

元素內容操做

在jQuery中操做元素內容的方法包括html方法和text方法

獲取或設置元素的html內容

html();

無參數，用於獲取元素的html內容

*獲取id="wrapper"標籤的html內容

<script type="text/javascript">
    $(function() {
        var htm = $("#wrapper");
        var htmn = htm.html();
        alert(htmn);
        //<img src="img/bt1.jpg" />
    });
</script>

<div id="wrapper">
    <img src="img/bt1.jpg" />
</div>

html(val);

有參數，用於設置元素html內容

鼠標通過改變id="wrapper"標籤的html內容

<script type="text/javascript">
    $(function() {
        var htm = $("#wrapper");
        htm.mouseover(function(){
                htm.html("<img src='img/bt2.jpg' />");
        });
    });
</script>
        
<div id="wrapper">
    <img src="img/bt1.jpg" />
</div>

獲取或設置元素的文本內容

text();

不帶參數，用於獲取元素的文本內容

獲取p元素的文本內容

<script type="text/javascript">
    $(function() {
        var p=$("#wrapper p");
        alert(p.text());
        //元素的文本內容
    });
</script>
        
<div id="wrapper">
    <img src="img/bt1.jpg" />
    <p>元素的文本內容</p>
</div>

text(val);

帶參數，用於設置元素的文本內容

鼠標通過，設置p元素的文本內容

<script type="text/javascript">
    $(function() {
        var p=$("#wrapper p");
        p.mouseover(function(){
            p.text("從新設置的文本內容");
        });
        //元素的文本內容
    });
</script>
        
<div id="wrapper">
    <img src="img/bt1.jpg" />
    <p>元素的文本內容</p>
</div>

獲取或設置元素值

在jQuery中，要獲取或設置元素的值是經過val方法實現的,改方法一般用於設置獲取表單的值

語法--- val(val);

若是val方法不帶參數，則是獲取元素的值，若是val方法帶參數，則是設置元素的值

另外val方法能夠獲取select標記中的多個選項值，其語法格式以下：

val.join(",");

獲取元素的值

<script type="text/javascript">
    $(function() {
        var s = $("select").val();
        alert(s);
        //m1
    });
</script>
<div id="wrapper">
    xuanxiang:
    <select>
        <option value="m1">1</option>
        <option value="m2">2</option>
        <option value="m3">3</option>
        <option value="m4">4</option>
        <option value="m5">5</option>
    </select>
</div>

點擊按鈕從新設置元素的值

<script type="text/javascript">
    $(function() {
        $("input").click(function(){
            $("select").val("m2");
        });
    });
</script>
<div id="wrapper">
    xuanxiang:
    <select>
        <option value="m1">1</option>
        <option value="m2">2</option>
        <option value="m3">3</option>
        <option value="m4">4</option>
        <option value="m5">5</option>
    </select>
    <input type="button" value="點擊切換" />
</div>

元素樣式操做

元素樣式的操做包含：直接設置樣式、增長css樣式表、切換樣式表和刪除樣式表

直接設置元素樣式

在jQuery中，經過css方法爲某各指定的元素設置樣式，語法以下：

css(name,value);

若是要同時改變多個樣式，語法：css({name1:value1,name2:value2,...})

鼠標通過文字，改變文字的顏色爲紅色

<script type="text/javascript">
    $(function() {
        $("p").mouseover(function(){
            $(this).css("color","red");
        });
    });
</script>
<div id="wrapper">
    <p class="p">顏色改變</p>
</div>

增長css樣式表

語法：addClass(class);

若是須要增長多個樣式表，用空格隔開

樣式切換

經過toggleClass方法切換樣式，語法：toggleClass(class);

這個函數的功能是：當元素中含有名稱爲class的樣式表時，刪除該樣式，不然增長該類

toggleClass方法實現音樂圖標的點擊切換打開和關閉

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>test</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <style type="text/css">
            .img{
                width:100px;
                height:100px;
            }
            .playon{
                background:url(img/playon.png) center center no-repeat;
                background-size:contain;
            }
            .playoff{
                background:url(img/playoff.png) center center no-repeat;
                background-size:contain;
            }
        </style>
    </head>
<body>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(".img").click(function(){
                $(this).toggleClass("playoff");
            });
        });
    </script>
<div id="wrapper">
    <div class="img playon">
                
    </div>
</div>
</body>
</html>

刪除樣式表

語法：removeClass(class);

若是須要刪除多個樣式表，用空格隔開