jQuery Getters 和 Setter

在本教程中,你将学习如何使用 jQuery 获取或设置元素的内容和属性值。

jQuery 获取或设置内容和值

一些 jQuery 方法可用于在选择上分配或读取某些值。其中的几个方法是 text()html()attr()val()

当这些方法在没有参数的情况下被调用时,它被称为 *getter*,因为它获取(或读取)元素的值。当使用值作为参数调用这些方法时,它被称为 *setter,*因为它设置(或赋值)该值。

jQuery text() 方法

jQuery text() 方法用于获取所选元素的组合文本内容,包括其后代,或设置所选元素的文本内容。

使用 text() 方法获取内容

以下示例将向你展示如何获取段落的文本内容:

<script type="text/javascript">
$(document).ready(function(){
    // Get combined text contents of all paragraphs
    $(".btn-one").click(function(){
        var str = $("p").text();
        alert(str);
    });
    
    // Get text contents of the first paragraph
    $(".btn-two").click(function(){
       var str = $("p:first").text();
       alert(str);
    });
});
</script>

注意: jQuery 的 text() 检索所有选定的元件(即组合的文本)的值,而其他的 gettershtml()attr()val() 只从在选择的第一个元素返回该值。

使用 text() 方法设置内容

以下示例将向你展示如何设置段落的文本内容:

<script type="text/javascript">
$(document).ready(function(){
    // Set text contents of all paragraphs
    $(".btn-one").click(function(){
        $("p").text("This is demo text.");
    });
    
    // Set text contents of the first paragraph
    $(".btn-two").click(function(){
        $("p:first").text("This is another demo text.");
    });
});
</script>

注意: 当 jQuery 的 text()html()attr()val() 方法当被当成一个参数调用时,它将设置值每个匹配的元素。

jQuery html() 方法

jQuery html() 方法用于获取或设置元素的 HTML 内容。

使用 html() Method 获取 HTML 内容

以下示例将向你展示如何获取段落元素的 HTML 内容以及元素容器:

<script type="text/javascript">
$(document).ready(function(){
    // Get HTML contents of first selected paragraph
    $(".btn-one").click(function(){
        var str = $("p").html();
        alert(str);
    });
    
    // Get HTML contents of an element with ID container
    $(".btn-two").click(function(){
        var str = $("#container").html();
        alert(str);
    });
});
</script>

注意: 如果选择了多个元素,则 html() 方法仅返回匹配元素集中第一个元素的 HTML 内容。

使用 html() 方法设置 HTML 内容

以下示例将向你展示如何设置元素的 HTML 内容 : <body>

<script type="text/javascript">
$(document).ready(function(){
    // Set HTML contents for document's body
    $("button").click(function(){
        $("body").html("<p>Hello World!</p>");
    });
});
</script>

jQuery attr() 方法

你可以使用 jQuery attr() 方法获取元素属性的值,或者为所选元素设置一个或多个属性。

使用 attr() 方法获取属性值

以下示例将向你展示如何获取 href 超链接的属性,即 <a> 元素以及 <img> 元素的 alt 属性 :

<script type="text/javascript">
$(document).ready(function(){
    // Get href attribute value of first selected hyperlink
    $(".btn-one").click(function(){
        var str = $("a").attr("href");
        alert(str);
    });
    
    // Get alt attribute value of an image with ID sky
    $(".btn-two").click(function(){
        var str = $("img#sky").attr("alt");
        alert(str);
    });
});
</script>

注意: 如果选择了多个元素,则该 attr() 方法仅返回匹配元素集中第一个元素的属性值。

使用 attr() 方法设置属性

以下示例将向你展示如何设置 checked 复选框的属性。

<script type="text/javascript">
$(document).ready(function(){
    // Check all the checkboxes
    $("button").click(function(){
        $('input[type="checkbox"]').attr("checked", "checked");
    });
});
</script>

attr() 方法还允许你一次设置多个属性。以下示例将向你展示如何设置 <img> 元素的 class and title 属性。

<script type="text/javascript">
$(document).ready(function(){
    // Add a class and title attribute to all the images
    $("button").click(function(){
        $("img").attr({
            "class" : "frame",
            "title" : "Hot Air Balloons"
        });
    });
});
</script>

jQuery val() 方法

jQuery 的 val() 方法主要是用来获取或设置的当前值 HTML 表单元素<input><select><textarea>

使用 val() 方法获取表单字段的值

以下示例将向你展示如何获取表单控件的值:

<script type="text/javascript">
$(document).ready(function(){
    // Get value of a text input with ID name
    $("button.get-name").click(function(){
        var name = $('input[type="text"]#name').val();
        alert(name);
    });
    
    // Get value of a textarea with ID comment
    $("button.get-comment").click(function(){
        var comment = $("textarea#comment").val();
        alert(comment);
    });
    
    // Get value of a select box with ID city
    $("button.get-city").click(function(){
        var city = $("select#city").val();
        alert(city);
    });
});
</script>

注意: 如果选择了多个表单元素,则该 val() 方法仅返回匹配元素集中第一个元素的值。

使用 val() 方法设置表单字段的值

以下示例将向你展示如何设置表单控件的值:

<script type="text/javascript">
$(document).ready(function(){
    // Set value of all the text inputs
    $("button").click(function(){
        var text = $(this).text();
        $('input[type="text"]').val(text);
    });
});
</script>