[JQ权威指南]第七天:使用val()方法设置和获取元素的值

在页面中,创建一个可以多选的select标记,设置该标记的change事件,当按Ctrl键选择多项时,通过p标记将获取的选项值显示在页面中;另外,创建一个文本框元素,设置该文本框的change和focus事件,当文本框获得焦点时候,清空文本框的内容;当在文本框输入字符时,通过另外一个p标记获取文本的值即时显示页面中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取或设置元素的值</title>
    <script type="text/javascript" src="../jquery-2.1.4.js"> </script>
    <style type="text/css"> body{ font-size:12px; text-align:center;} div{ padding:3px; margin:3px;width;120px;float:left;} .txt{ border:#666 1px solid; padding:3px;} </style>
    <script type="text/javascript"> $(function(){ $("select").change(function(){ var strSel =$("select").val().join(","); $("#p1").html(strSel); }) $("input").change(function(){ var strText =$("input").val(); $("#p2").html(strText); }) $("input").change(function(){ $("#p2").val(""); }) }) </script>
</head>
<body>
    <div>
        <select multiple="multiple" style="height:96px; width:85px;">
            <option value="1">Item 1</option>
            <option value="2">Item 2</option>
            <option value="3">Item 3</option>
            <option value="4">Item 4</option>
            <option value="5">Item 5</option>
        </select>
        <p id="p1"></p>
        <div>
            <input type="text" class="txt"/>
             <p id="p2"></p>
        </div>
    </div>
</body>
</html>

你可能感兴趣的:(val)