jQuery元素选择与属性选择，表单简单验证练习 - 20191222

表单验证部分

<div><label for="user">用户名</label><input id="user" name="user" type="text"></div>
    <div><label for="pwd">密码</label><input id="pwd" name="pwd" type="password"></div>
    <div><label for="rpwd">重复密码</label><input id="rpwd" name="rpwd" type="password"></div>
    <div><label for="male">性别</label><input id="male" type="radio" name="gender" value="male">男 <input id="female" type="radio" name="gender" value="female">女</div>
    <div><label for="male">籍贯</label><select name="province" id="province">
        <option value="" selected>请选择城市</option>
        <option value="辽宁">辽宁</option>
        <option value="北京">北京</option>
        <option value="浙江">浙江</option>
        <option value="江苏">江苏</option>
    </select></div>
    <div><label for="status">用户状态</label><input type="checkbox" id="status" name="status" value="1">禁用</div>
    <div><button type="button" onclick="check()">提交</button></div>

 function check(){
            var user=$('form #user').val(),
                pwd=$('form #pwd').val(),
                rpwd=$('form #rpwd').val(),
                gender=$('form input[name="gender"]:checked').val(),
                province=$('form select[name="province"] option:selected').val(),
                status=$('form input[name="status"]:checked').val();
            if(user==''){
                alert('用户名不能为空');
                return;
            }
            if(pwd==''){
                alert('密码不能为空');
                return;
            }
            if(pwd!=rpwd){
                alert('两次密码不一致');
                return;
            }
            if(gender==undefined){
                alert('请选择性别');
                return;
            }
            if(province==''){
                alert('请选择城市');
                return;
            }
        }

元素选择部分(根据位置选择)

function eqSelector() {
            //选中第二个div元素
            var v = $('form div:eq(1)');
            console.log(v);
        }
        function first() {
            //选中第一个div元素
            var v = $('form div:first');
            console.log(v);
        }
        function last() {
            //选中最后一个div元素
            var v = $('form div:last');
            console.log(v);
        }
        function gtSelect() {
            //选中位置序列大于2的所有元素
            var v = $('form div:gt(2)');
            console.log(v);
        }
        function ltSelect() {
            //选中位置序列小于3的所有元素
            var v = $('form div:lt(3)');
            console.log(v);
        }

元素选择部分(根据属性选择)

<div class="attr">
    <div class="a b c d eee" name="abc" tag="myletter" hang="zz-cn-cn" news="Boxzz"></div>
    <div class="a b c d" name="abc1" tag="i-letter" hang="cn" news="box"></div>
    <div class="a b c" name="abc azz" tag="Thisletter" hang="cn-zz" news="box-z11"></div>
    <div name="zz1" tag="myLetter" hang="cnglish" news="b-box"></div>
</div>

function commonSelect() {
            //选中包含eee样式的div，该方法用于一个元素含有多个样式时使用
            var v = $('form div[class*="eee"] ');
            console.log(v);
        }
        function includeAttr(){
            //选中包含abc属性的元素，包含"abc"，是独立名称，不能匹配类似 "abc1,abc222"
            var v = $('div.attr div[name~="abc"]');
            console.log(v);
        }
        function commonAttr(){
            //选中名称中包含"abc"的元素，"abc11","abcd","abcd11223"都是可以匹配的
            var v = $('div.attr div[name*="abc"]');
            console.log(v);
        }
        function endAttr(){
            //匹配以letter结尾的属性，该比较区分大小写，"Letter"不会被匹配
            var v = $('div.attr div[tag$="letter"]');
            console.log(v);
        }
        function startAttr(){
            //匹配以news开头的属性，该比较区分大小写，"Box"不会被匹配
            var v = $('div.attr div[news^="box"]');
            console.log(v);
        }
        function startLinkAttr(){
            //匹配以"cn"或"cn-"开头的属性名称，"cnabc"，"zz-cn-cn"，都不会被匹配
            var v = $('div.attr div[hang|="cn"]');
            console.log(v);
        } 
        function notAttr(){
            //匹配不包含"abc"的元素，"abc1","abczz"都可以匹配
            var v = $('div.attr div[name!="abc"]');
            console.log(v);
        }

总结

1. 表单验证的时候，如果要判断 SELECT 标签是否选中，首先要给 SELECT 设置默认选择的 OPTION 并设置 VALUE 属性为空，这样获取 :selected 属性值的时候可以做判断如果值为空那么该选项未有任何值选中。
2. 关于属性选择，有两类，一种是判断字符是否包含，一种是判断是否包含该名称，区别是 abc1z11 和 abc，其中~=abc选择不会匹配abc1z11，只会匹配 abc，如果要匹配 abc1z11 应使用 *= 方法。
3. ^= 是判断是否有匹配字符串开头，$= 是判断是否有匹配字符结尾，两者都区分大小写。
4. |= 是判断是否有字符串开头后面接 - 符号，或单独字符串开头，例：en en- 都会被匹配。