jQuery属性操作之值操作

07-07 10:23 1197浏览

举报 T字号

大字

中字

小字

值操作是对DOM属性value进行读取和设置操作。比如html()、 text()、 val().

1.html

(1)html()获取值

返回值：String

描述：获取集合中第一个匹配元素的HTML内容

格式：

$(selector).html()

这个方法不接受任何元素

作用：在一个HTML文档中，　可以使用.html()方法来获取任意一个元素的内容。如果选择器匹配多个元素，那么只有第一个匹配元素的HTML内容会被获取。

实例代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $("div.demo-container").html();
    </script>
</head>
<body>
    <div class="demo-container">
        <div class="demo-box">Demonstration Box</div>
    </div>
</body>
</html>

执行结果为：

Demonstration Box

(2)html() 设置值

格式：

$(selector).html(htmlString);

返回值：jQuery

作用：　用来设置每个匹配元素的一个HTML字符串

htmlString 类型：string

代码示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html Demo</title>
    <style type="text/css">
        .red{
            coler: red;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div").html("<span class='red'>Hello <b>Again</b></span>");
        })
    </script>
</head>
<body>
    <span>Hello</span>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

执行结果：

2.text()

(1)使用text()获取值

语法：

$("selector").text()

返回值：String

作用：得到匹配元素集合中每个元素的合并文本，　包括他们的后代

示例代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div.demo-container").text()
        })
    </script>
</head>
<body>
    <div class="demo-container">
            <div class="demo-box">Demonstration Box</div>
            <ul>
                <li>list item 1</li>
                <li>list <strong>item</strong> 2</li>
            </ul>
    </div>
</body>
</html>

执行结果为：

注意：

.text()方法不能使用在input元素或scripts元素上。

.input 或 textarea 需要使用.val()方法获取或者设置文本值。

得到scripts元素的值，会使用.html()方法。

(2)使用Text() 设置文本内容

格式：

$(selector).text(text)

返回值：jQuery

text(参数类型)： String 或 Number 或 Boolean

作用：用于设置匹配元素内容的文本。当提供的是一个Number或者Boolean的时候，那么将被转换成一个String表现形式，提供给这个方法

代码示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text Demo</title>
    <style type="text/css">
        p{
            color: blue;
            margin: 8px;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("p").text("<b>Some</b> new text.")
        })
    </script>
</head>
<body>
    <p>Test Paragraph.</p>
</body>
</html>

执行结果为：

3.val()

(1)使用val()方法获取值

格式：

$(selector).vall();

返回值：String

参数：　不接收任何参数

作用：获取匹配的元素集合中第一个元素的当前值

.val()方法主要用于获取表单元素的值，如input， select 和 textarea。

当在一个空集合上调用，它返回undefined。

当该集合中的第一个元素是一个select-multiple(即， select元素设置了multiple属性)， .val()返回一个包含每个选择项值的数组。

对于选择框(select)，复选框(checkbox)和单选按钮(radio button)，也可以使用 :selected 和checked选择器来获取值。例如：

//从一个下拉选择框中获取值
$("select.foo option: selected").val();
// 简单的从一个下拉选择框中获取值
$("select.foo").val();
//Get the value form a checked checkbox
$("input: checkbox: checked).val();
//Get the value from a set of radio buttons
$("input: radio[name=bar]: checked).val();

注意：通过.val()方法从<textarea>元素中获取的值是不含有回车(\r)字符的。

示例代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>val Demo</title>
    <style type="text/css">
        p{
            color: blue;
            margin: 8px;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function () {
            $("input").keyup(function () {
                var value = $(this).val();
                $("p").text(value);
            });
        })
    </script>
</head>
<body>
    <input type="text" value="some text"></input>
    <p></p>
</body>
</html>

执行结果为：

(2)使用val()设置值

格式：

$(selector).val(value);

返回值： jQuery

参数(value)：String 或 Number 或 Array

作用：一个String ， Number 或一个以字符串形式的数组来设定每个匹配元素的值。

此方法通常用于设置表单字段的值。

val()允许你传递一个元素值的数组。当使用在包含像<input type='checkbox">, <input type="radio>和<select>中的<option>元素的jQuery对象上的时候是非常有用的。在这种情况下， input和option和value与数组元素相匹配的情况下将被选中(checked)或选定(selencted) ，而那些与数组元素值不匹配的value是未选中(unchecked)或未被选(unselected)，这取决于元素类型。

对于<input type="radio">属于一个单选按钮组，还有<select>

的其他元素都将被取消选中。

使用这个方法设置值，不会触发change事件。为此，相关的时间处理程序不会被执行。如果要执行他们，应该在设置值之后调用.trigger("change")

代码示例：

点击按钮时，在文本框中显示按钮的值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>val Demo</title>
    <style type="text/css">
        button{
            margin: 4px;
            cursor: pointer;
        }
        input{
            margin: 4px;
            color: blue;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
            var text = $(this).text();
            $("input").val(text);
        });
        })
    </script>
</head>
<body>
    <div>
        <button>Feed</button>
        <button>the</button>
        <button>Input</button>
    </div>
    <input type="text" value="click a button">
</body>
</html>

执行结果为：

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频教程免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看jQuery视频教程学习哦!

0人推荐

共同学习，写下你的评论

0条评论

代码小兵872

30篇文章贡献98658字

jQuery属性操作之值操作

1.html

2.text()

3.val()

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

jQuery属性操作之值操作

1.html

2.text()

3.val()

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>