【锋利的jQuery】5、设置和获取HTML,文本和值 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>val方法使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 在head中引入jQuery -->
    <script type="text/javascript" src="../../lib/jquery-3.1.1.js"></script>
    <script type="application/javascript">
        //函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。
        // 从技术上来说，这个函数是可链接的
        $(function () {
            //当获取鼠标焦点的时候
            $("#address").focus(function () {
                var txt_value = $(this).val();
                //获取到原来的值，如果是默认值，那就设置为空
                if (txt_value == "请输入邮箱地址") {
                    $(this).val("");
                }
            });

            //失去焦点时候
            $("#address").blur(function () {
                var txt_value = $(this).val();
                if (txt_value == "") {
                    $(this).val("请输入邮箱地址");
                }
            });

            //当获取鼠标焦点的时候
            $("#password").focus(function () {
                var txt_value = $(this).val();
                //获取到原来的值，如果是默认值，那就设置为空
                if (txt_value == "请输入邮箱密码") {
                    $(this).val("");
                }
            });

            //失去焦点时候
            $("#password").blur(function () {
                var txt_value = $(this).val();
                if (txt_value == "") {
                    $(this).val("请输入邮箱密码");
                }
            });

            $("input:eq(4)").click(function(){
                $("#single").val("选择2号");
            });

            $("input:eq(5)").click(function(){
                $("#multiple").val(["选择2号", "选择3号"]);
            });

            $("input:eq(6)").click(function(){
                $(":checkbox").val(["check2","check3"]);
                $(":radio").val(["radio2"]);
            });
        })

    </script>
</head>
<body>
<form action="test">
    <input type="text" id="address" value="请输入邮箱地址"/> <br/><br/>
    <input type="text" id="password" value="请输入邮箱密码"/> <br/><br/>
    <input type="button" value="登录"/>
    <input type="reset" value="重置"/>
</form>

<br/><br/><br/>

<input type="button" value="设置单选下拉框选中"/>
<input type="button" value="设置多选下拉框选中"/>
<input type="button" value="设置单选框和多选框选中"/>

<br/><br/>

<select id="single">
    <option>选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
</select>

<select id="multiple" multiple="multiple" style="height:120px;">
    <option selected="selected">选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
    <option>选择4号</option>
    <option selected="selected">选择5号</option>
</select>

<br/><br/>


<input name="name" type="checkbox" value="check1"/> 多选1
<input name="name" type="checkbox" value="check2"/> 多选2
<input name="name" type="checkbox" value="check3"/> 多选3
<input name="name" type="checkbox" value="check4"/> 多选4

<br/>

<form action="test2">
    <input name="t1" type="radio" value="radio1"/> 单选1
    <input name="t1" type="radio" value="radio2"/> 单选2
    <input name="t1" type="radio" value="radio3"/> 单选3
</form>

</body>
</html>

　　

效果：

 

 

　　

 

posted @ 2017-03-30 22:15  cutter_point  阅读(136)  评论(0)    收藏  举报