day79-jQuery-文本操作 

1. 文本操作
    1.1 注意DOM对象.innerText是查找内容，DOM对象.innerText=val是设置内容。innerText不是函数。
    jQuery对象.text()    // 获取内容，注意text()是函数
    jQuery对象.text(val)    // 设置内容，因为text()是函数，所以要在()里面填写要设置的内容。
        <div id="d1">
                    <div>divdiv</div>
                    <a href="">aa</a>
                    <h1>hihi</h1>
            </div>

        $('#d1').text();    //结果：
                "
                            divdiv
                            aa
                            hihi
                        "
        $('#d1').text('asdf');    //结果是对象Object [ div#d1 ]。$('#d1').text();//结果是"asdf"
　　　　　$('#d1').text('');　　　//清空文本

    1.2  注意DOM对象.innerHTML是查找HTML内容，DOM对象.innerHTML=val是设置HTML内容。innerHTML不是函数。
    jQuery对象.html()        // 取得所有元素的html内容
    jQuery对象.html(val)        // 设置所有元素的html内容
        $('#d1').html();    //结果：
                "
                        <div>divdiv</div>
                        <a href=\"\">aa</a>
                        <h1>hihi</h1>
                    "
        $('#d1').html('<p>p标签</p>');    //结果是Object [ div#d1 ]
            $('#d1').html();        //"<p>p标签</p>"

    1.3 值：
        val()        // 取得第一个匹配元素的当前值
        val(val)        // 设置所有匹配元素的值。val(''); //清空值
        val([val1, val2])    // 设置多选的checkbox、多选select的值
        
        示例：
        <input type="checkbox" value="basketball" name="hobby">篮球
        <input type="checkbox" value="football" name="hobby">足球

        <label for="c1">女</label>
            <input type="radio" name="gender" id="c1"  value="0">
            <label for="c2">男</label>
            <input type="radio" name="gender" id="c2"  value="1">    

        <select multiple id="s1">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
        </select>    
        
        获取值：    
            注意：checkbox 和 radio需要加上:checked才能获取选择的值。否则，只能默认获取第一个值。
            $("input[name='gender']:checked").val()        //结果是"0"

            select选择了值之后，通过.val()就可以获取当前值。如果不选择，.val()获取的是第一个值。
            $('#s1').val();    //结果是"1"

        设置值：    $("[name='hobby']").val(['basketball', 'football']);
            $("#s1").val(["1", "2"])

        示例：登录校验：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录校验</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
<form action="">
    <div>
        <label for="d1">账号</label>
        <input type="text" id="d1" name="username">
        <span class="error"></span>
    </div>
    <div>
        <label for="d2">密码</label>
        <input type="password" id="d2" name="password">
        <span class="error"></span>
    </div>
    <div>
        <input type="submit" value="提交">
    </div>
</form>

<script src="jquery-3.4.1.min.js"></script>
<script>
    $(':submit').click(function () {
        var $d1Eles = $('#d1');
        var $d2Eles = $('#d2');
        if ($d1Eles.val().trim().length === 0) {
            $d1Eles.siblings('.error').text('账号不能为空');
            return false;//空，不能提交，页面就无法刷新
        }
        if ($d2Eles.val().trim().length === 0) {
            $d2Eles.siblings('.error').text('密码不能为空');
            return false;
        }
    });

</script>
</body>
</html>

 

posted @ 2020-03-11 09:45  梁劲雄  阅读(140)  评论(0)    收藏  举报