JS第5课-jquery选择器表单属性-九期线上班

1、常用jquery属性选择器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../1219/jquery-3.4.1.min.js"></script>
    <title>Title</title>
</head>
<body>
<div class="mydiv" id="div1" style="background-color: #000000" >黑色</div>
<div class="mydiv" id="div2" style="background-color: #ff0000" >红色</div>
<div class="mydiv" id="div3" style="background-color: #00ff00" >
    <p id="a">div中的p标签</p>
    <div>
        <p id="b" p1="p1">div中的div的的p标签</p>
        <p id="bbw" p1="p1">div中的div的的p1=p1</p>
        <p id="bbq" p1="p2">div中的div的的p_bbq标签</p>
        <p id="c">p3</p>
    </div>
    <p id="d">pd4</p>
    <div style="background-color: #ffff00">最后一个div,也是div3中的第二个子div</div>
</div>
<p id="p4">我是p标签</p>
<button onclick="jfirst()">:first</button>
<button onclick="jeq()">:eq</button>
<button onclick="jgt()">:gt</button>
<button onclick="jlast()">:last</button>
<button onclick="jlt()">:lt</button>
<button onclick="jxz()">:[]</button>
<button onclick="jxzq()">:[]_1</button>
<button onclick="jbcz()">:不存在</button>
<button onclick="jxzq1()">:^=</button>
<button onclick="jxzq2()">:$=</button>
<button onclick="jxzq3()">:*=</button>
<button onclick="jfirstchild()">:first-child</button>
<button onclick="jlastchild()">:last-child</button>
<!--/***********js*************/-->
<script>
    //选择第一个匹配的元素
    function jfirst() {
        var div1 = $('div:first');
        console.log(div1);
    }
    //匹配的集合中选择索引值为index的元素
    function jeq() {
        var div2 = $('div:eq(1)');
        console.log(div2);
    }
    //选择匹配集合中所有大于给定index（索引值）的元素
    function jgt() {
        var div = $('div:gt(1)');
        console.log(div);
    }
    //选择最后一个匹配的元素
    function jlast() {
        var div = $('div:last');
        console.log(div);
    }
    //选择匹配集合中所有小于于给定index（索引值）的元素
    function jlt() {
        var div = $('div:lt(1)');
        console.log(div);
    }
    //选择所有具有指定属性的元素，该属性可以是任何值。
    function jxz() {
        var p = $('p[p1]');
        console.log(p);
        var pid = $('p[id]');
        console.log(pid);
    }
    //选择指定属性值的元素
    function jxzq() {
        var p = $('p[p1=p1]');
        console.log(p);
        var pid = $('p[id=c]');
        console.log(pid);
    }
    //选择不存在指定属性，或者指定的属性值不等于给定值的元素
    function jbcz() {
        var p = $('p[p1!=p1]');
        console.log(p);
    }
    //选择指定属性是以给定字符串开始的元素
    function jxzq1() {
        var p = $('p[p1 ^= p1]');
        console.log(p);
    }
    function jxzq2() {
        var p = $('p[p1 $= p1]');
        console.log(p);
    }
    function jxzq3() {
        var p = $('p[p1 *= p1]');
        console.log(p);
    }
    //选择所有父级元素下的第一个子元素。
    function jfirstchild() {
        var p = $('p:first-child');
        console.log(p);
    }
    //选择所有父级元素下的最后一个子元素。
    function jlastchild() {
        var p = $('p:last-child');
        console.log(p);
    }
</script>
</body>
</html>

2、常用jquery表单对象属性案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用jquery表单对象属性案例</title>
    <script src="../1219/jquery-3.4.1.min.js"></script>
</head>
<body>
<h2>常用jquery表单对象属性案例</h2>
<form action="">
    <div>
        <label for="">用户名</label>
        <input type="text" name="username">
    </div>
    <div>
        <label for="">输入密码</label>
        <input type="password" name="password">
    </div>
    <div>
        <label for="">再次输入</label>
        <input type="password" name="repassword">
    </div>
    <div>
        <label for="">性别</label>
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="0">女
    </div>
    <div>
        <label for="">用户状态</label>
        <input type="checkbox" name="status" value="1">启用
        <input type="checkbox" name="status" value="0">禁用
    </div>
    <div>
        <label for="">籍贯</label>
        <select name="province" id="">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="tianjin">天津</option>
            <option value="chongqing">重庆</option>
        </select>
    </div>
    <button type="button" onclick="save()">保存</button>
</form>
<script>
    function save() {
        var username = $("input[name = 'username']").val();
        var password = $('input[name = password]').val();
        var rePassword = $('input[name = repassword]').val();
        var sex =  $('input[name = sex]:checked').val();
        var status =  $('input[name = status]:checked').val();
        var province = $('select option:selected').text();
        if (username == ''){
            alert('请输入用户名');
            return;
        }
        if (password == ''){
            alert('请输入密码');
            return;
        }
        if (rePassword == ''){
            alert('请再次输入密码');
            return;
        }
        if (sex == ''){
            alert('请选择性别');
            return;
        }
        if (status == ''){
            alert('请选择状态');
            return;
        }
        if (province == ''){
            alert('请选择籍贯');
            return;
        }
        console.log(sex+'----'+status);
        var sexStr = parseInt(sex) == 1 ? '男' : '女';
        var statusStr = parseInt(status) == 1 ? '启用' : '禁用';
        alert('您的用户名:'+username+' 密码:'+password+' 二次密码:'+rePassword+' 性别:'+sexStr+' 状态:'+statusStr+' 籍贯:'+province);
    }
</script>
</body>
</html>

相关文章