036-12月20日-JS第5节-jquery选择器2

jquery表单对象属性案例

涉及以下两类选择器：
伪类选择器$(‘xx:…’)
属性值选择器$(‘xx[yy= “zz”]’)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../jquery-3.4.1.min.js"></script>
    <style>
        div{
           text-align: center;
            font-family: "微软雅黑";
            font-size: 20px;
        }
        select{
            font-size: 20px;
        }
        .borDer{
            border: 10px solid yellowgreen;
            width: 450px;
            height: 700px;
            margin: 0 auto;
        }
    </style>
    <title>使用jquery写表单</title>
</head>
<body>
<div class="borDer">
    <form action="">
        <div>
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username">
        </div>
        <div>
            <label for="pwd">密码：</label>
            <input type="text" id="pwd">
        </div>
        <div>
            <label for="pwd_a">再输入一次密码：</label>
            <input type="text" id="pwd_a">
        </div>
        <div>
            <label>性别：</label>
            <input type="radio" name="gender" value="1">女
            <input type="radio" name="gender" value="2">男
        </div>
        <div>
            <label for="">来自：</label>
            <select name="" id="">
                <option value="">云</option>
                <option value="">贵</option>
                <option value="">川</option>
                <option value="">渝</option>
            </select>
        </div>
        <div>
            <label for="">用户状态：</label>
            <input type="checkbox">禁用
        </div>
        <button onclick="save()">保存</button>
    </form>
    <button onclick="first()">:first</button>
    <button onclick="equal()">:eq(index)</button>
    <button onclick="great()">:gt(index)</button>
    <button onclick="low()">lt(index)</button>
    <button onclick="lastNum()">:last</button>
    <button onclick="getAttr()">attribute</button>
    <button onclick="getAttvul()">attr="value"</button>
    <button onclick="headAttr()">^attr</button>
    <button onclick="firstCh()">first-child</button>
</div>
<script type="text/javascript" src="1221.js"></script>
</body>
</html>

渲染如下：

1221.js如下：

function save() {
    var username = $('input[id = "username"]').val();
    var pwd = $('input[id = "pwd"]').val();
    console.log(pwd);
    var pwd_a = $('input[id = "pwd_a"]').val();
    console.log('pwd_a')
    var gender = $('input[name = "gender"]:checked').val();
    var province = $('select option:selected').text();
    console.log(province);
    // return;
    if (username==''){
        alert('请输入用户名');
        return;
    }
    if (pwd==''){
        alert('请输入密码');
        return;
    }
    if (pwd_a != pwd){
        alert('两次输入不一致');
        return;
    }
    if (gender==undefined){
        alert('请选择性别');
        return;
    }
    if (province==undefined){
        alert('请选择省份');
        return;
    }
    return;
}
//选择伪类第一个子节点
function first() {
    // var vul = $('div button:first-child').val();
    var vul1 = $('div button:first-child');
    // console.log(vul1);
    console.log(vul1);
}
//索引为指定值的子节点
function equal() {
    var vul2 = $('div button:eq(2)');
    alert(vul2);
}
//超过索引值的子节点全部选出
function great() {
    var vul3 = $('div button:gt(3)');
    alert(vul3);
}
//小于索引值的子节点全部选出
function low() {
    var vul4 = $('div button:lt(4)');
    alert(vul4);
}
//最后一个子节点
function lastNum() {
    var vul5 = $('div button:last');
    alert(vul5);
}
//按给定属性值选择
function getAttr() {
    var vul6 = $('input #username');
    alert(vul6);
}
function getAttvul() {
    var vul7 = $( 'input[name = "gender"]:checked');
    alert(vul7);
}
//按属性值开头字母匹配选择
function headAttr() {
    var vul8 = $( 'input[type^="check"]');
    alert(vul8);
}
function firstCh() {
    var vul9 = $( 'select:first-child');
    alert(vul9);
}

jquery表单对象属性案例

相关文章