[ jquery 表单UI选择器和表单元素属性选择器 ] 表单UI选择器和表单元素属性选择器

Posted 窗棂博客记录

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[ jquery 表单UI选择器和表单元素属性选择器 ] 表单UI选择器和表单元素属性选择器相关的知识,希望对你有一定的参考价值。

表单UI选择器和表单元素属性选择器: 

实例:

<!DOCTYPE html>
<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta http-equiv=‘description‘ content=‘this is my page‘>
<meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘>
<script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
<style type=‘text/css‘>
    *{margin:0;padding:0;}
    html{font:400 15px/1.2em ‘Courier New‘;color:#333;}
    #demo{width:850px;height:350px;margin:20px auto;} 
    #form{width:100%;}
    label{display:block;font:400 15px/1.2em ‘Courier New‘;color:#333;margin-top:5px;margin-bottom:5px;}   
    input{border:1px solid #999;}
    input[type=‘text‘],input[type=‘password‘]{width:100%;height:20px;height:30px;text-indent:5px;color:#000;font:400 15px/1.2em ‘Courier New‘;}
    input[type=‘checkbox‘]{width:15px;height:15px;margin:3px 10px;border:1px solid #000;background:#FFF;padding:0;color:#FFF;cursor:pointer;}/* 表单兼容样式暂不解决 */
    input[type=‘radio‘]{margin:3px 10px;cursor:pointer;}
    label[for=‘famale‘],label[for=‘male‘]{float:left;margin-top:0;}
    input[type=‘submit‘],input[type=‘reset‘],button{width:100%;height:30px;font:400 15px/30px ‘Courier New‘;outline:none;margin:5px 0;background:#CCC;padding:0;border:0;transition:.5s all;border-radius:2px;}
    input[type=‘submit‘]:hover,input[type=‘reset‘]:hover,button:hover{background:#9E9C32;color:#FFF;}
</style>
<script type=‘text/javascript‘>
    $(function(){
        
        // 匹配所有 input, textarea, select 和 button 元素包括隐藏元素
        console.log($(‘:input‘).size());
        
        // ":text" : 匹配所有的单行文本框(可以加上前导进行限制范围)
        console.log($(‘#form input:text‘).get(0).placeholder);
        
        // ":password" : 匹配所有的密码框(可以加上前导进行限制范围)
        console.log($(‘#form input:password‘).get(0).placeholder);
        
        // ":checkbox" : 匹配所有的多选框(可以加上前导进行限制范围)
        $(‘#form input:checkbox‘).each(function(){
            console.log($(this).val());
        });
        
        // ":radio" : 匹配所有的单选框(可以加上前导进行限制范围)
        $(‘#form input:radio‘).each(function(){
            console.log($(this).val());
        });
        
        // ":hidden" : 匹配所有的隐藏框(可以加上前导进行限制范围)
        $(‘#form input:hidden‘).each(function(index){
            console.log($(this).attr(‘id‘));
        });
        
        // ":submit" : 匹配所有的提交按钮(可以加上前导进行限制范围)
        console.log($(‘#form input:submit‘).val());
        
        // ":reset" : 匹配所有的提交按钮(可以加上前导进行限制范围)
        console.log($(‘#form input:reset‘).val());
        
        // ":button" : 匹配所有的提交按钮(可以加上前导进行限制范围)
        console.log($(‘#form button:button‘).attr(‘type‘));
        
        /*
                               剩余的还有 :file :image 在此就不多做演示了
        */
       
       // 匹配可用元素(可以加上前导进行限制范围)
       console.log($(‘#form button:enabled‘).size());
       
       // 匹配不可用元素(可以加上前导进行限制范围)
       console.log($(‘#form :disabled‘).size());
       
       // 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)(可以加上前导进行限制范围)
       console.log($(‘#form :checked‘).size());
    });
</script>
</head>
<body>
    <div id=‘demo‘>
        <form id=‘form‘ method=‘post‘ action=‘‘>
            <label style=‘letter-spacing: 3px;‘>用户名:</label><input type=‘text‘ id=‘user‘ placeholder=‘表单UI选择器":text"‘ />
            <label style=‘letter-spacing: 3px;‘>用户名:</label><input type=‘text‘ id=‘user‘ placeholder=‘禁用元素‘ disabled="disabled" />
            <label style=‘letter-spacing: 5px;‘>密&nbsp;码:</label><input type=‘password‘ id=‘pw‘ placeholder=‘:password‘/>
            <label style=‘letter-spacing: 5px;‘>爱&nbsp;好:</label><input type=‘checkbox‘ value=‘read‘ checked="checked"/>read<input type=‘checkbox‘ value=‘music‘/>music<input type=‘checkbox‘ value=‘tourism‘/>tourism<input type=‘checkbox‘ value=‘game‘/>game
            <label style=‘letter-spacing: 5px;‘>性&nbsp;别:</label>
            <label for=‘famale‘><input type=‘radio‘ value=‘famale‘ name=‘sex‘ id=‘famale‘ checked="checked"/>famale</label>
            <label for=‘male‘><input type=‘radio‘ value=‘male‘ name=‘sex‘/>male</label>
            <input type=‘hidden‘ id=‘hidden01‘ name=‘Demo‘ value=‘Demo example of form pseudo class selector in jquery‘>
            <input type=‘hidden‘ id=‘hidden02‘ name=‘Demo‘ value=‘Demo example of form pseudo class selector in jquery‘>
            <input type=‘submit‘ value=‘submit‘ /><input type=‘reset‘ value=‘reset‘ /><button type=‘button‘>button</button>
        </form>
    </div>
</body>
</html>

 

以上是关于[ jquery 表单UI选择器和表单元素属性选择器 ] 表单UI选择器和表单元素属性选择器的主要内容,如果未能解决你的问题,请参考以下文章

Jquery7 表单选择器

JQuery选择器——子元素筛选选择器和表单元素选择器

第一百六十八节,jQuery,表单选择器

Jquery选择器的分类

jQuery属性选择器&表单选择器

jQuery Mobile 表单选择菜单