2.6jQuery选择器-表单选择器

原创2019-01-11 14:20:2280
摘要:语法:$(':enabled') 所有激活的input元素(可以使用的input元素)$(':disabled') 所有禁用的input元素(不可以使用的input元素) $(':selected') 所有被选取的元素,针对于select元素$(':checked') 所有被选中的input元素

语法:

$(':enabled') 所有激活的input元素(可以使用的input元素)

$(':disabled') 所有禁用的input元素(不可以使用的input元素)

$(':selected') 所有被选取的元素,针对于select元素

$(':checked') 所有被选中的input元素 针对多选元素

总结:表单input的disabled属性是禁用的意思!select是下拉框标签内部有option来表示,celected是默认显示下拉框的内容!checked是多选框默认勾选!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jQuery/jQuery-3.3.1.js"></script>
    <script>
        $(function(){
            $(':enabled').css('background','pink')
            $(':disabled').css('background','red')
            $(':selected').css('background','#ccc')
            $(':checked').parent().css('color','red')
        })
    </script>
</head>
<body>
    <form>
        账号:<input type="text" name="" >
        <!-- 禁用 -->
        账号:<input type="text" name="" disabled >
        账号:<input type="text" name="" >
        账号:<input type="text" name="" >
    </form>
    <select name="" id="">
        <option value="">星期一</option>
        <option value="">星期二</option>
        <option value="">星期三</option>
        <option value="">星期四</option>
        <option value="">星期五</option>
        <option value="">星期六</option>
        <!-- 默认显示 -->
        <option value="" selected>星期日</option>
    </select>
    <label for=""><input type="checkbox" name="" >看书</label>
    <!-- 默认勾选 -->
    <label for=""><input type="checkbox" name="" checked>学习</label>
    <label for=""><input type="checkbox" name="" >睡觉</label>
    <label for=""><input type="checkbox" name="" >追剧</label>
</body>
</html>


批改老师:灭绝师太批改时间:2019-01-11 14:26:42
老师总结:选择器是jq中非常重要的知识点,后期各种运用也很多,要熟练使用哟!

发布手记

热门词条