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);

若是须要删除多个样式表，用空格隔开