jQuery14(表单过滤器及注意事项)

最新推荐文章于 2022-07-24 23:13:12 发布

天赋进行时

最新推荐文章于 2022-07-24 23:13:12 发布

阅读量446

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50640814

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

表单的过滤器

获取层中有id属性值的层,里面的参数可以多写

$('div[id]').css('backgroundColor', 'red');

获取层中id值为dv1的层

$('div[id=dv1]').css('backgroundColor', 'red');

获取层中id值不为dv1的层

$('div[id!=dv1]').css('backgroundColor', 'red');

获取div中id值已dv1开头的层

$('div[id^=dv]').css('backgroundColor', 'red');

获取层中id值已dv1结尾的层

$('div[id$=dv1]').css('backgroundColor', 'red');

获取层中id值包含dv1的层

 $('div[id*=dv]').css('backgroundColor', 'red');

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //获取div中有id属性值的层
                //$('div[id]').css('backgroundColor', 'red');
                //获取div中id值为dv1的层
                // $('div[id=dv1]').css('backgroundColor', 'red');
                //获取div中id值不为dv1的层
                //$('div[id!=dv1]').css('backgroundColor', 'red');
                //获取div中id值已dv1开头的
                //$('div[id^=dv]').css('backgroundColor', 'red');
                //获取div中id值已dv1结尾的
                // $('div[id$=dv1]').css('backgroundColor', 'red');
                //获取div中id值包含dv1的层
                $('div[id*=dv]').css('backgroundColor', 'red');
                //注意使用margin来设置边缘
            });
        });
    </script>
    <style type="text/css">
        div
        {
            width: 200px;
            height: 200px;
            background-color: green;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value="显示效果" id='btn' />
    <div id='dv1'>
    </div>
    <div>
    </div>
    <div id='dv2'>
    </div>
</body>
</html>

知识点:使用margin来设置边缘属性.

表单过滤器的注意事项

在表单后面有无空格需要特别注意.
如果中间有空格,则表示的是表单内部的元素
例如:

$('form :disabled').css('backgroundColor', 'red');

该代码段表示,选中的是表单内部被禁用的元素.

如果没有空格,则表示的是表单,例如

$('form:disabled').css('backgroundColor', 'red');

该代码段表示被禁用的表单

$('input:checked').css('backgroundColor', 'red');

该代码段表示所有已经选中的input.

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        //注意 在js中不可用写法 disabled='disabled'
        $(function () {
            $('#btn').click(function () {
                //中间有空格,表示的是,在表单内部被禁用的元素
                //$('form :disabled').css('backgroundColor', 'red');
                //中间没有空格,表示的是,被禁用的表单
                // $('form:disabled').css('backgroundColor', 'red');
                //checked 被选中的元素
                $('input:checked').css('backgroundColor', 'red');
                //selected 选取所有选中的选项元素
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="显示效果" id='btn' />
    <div>
        <input type="checkbox" name="name" value="1" />吃饭
        <input type="checkbox" name="name" value="2" />睡觉
        <input type="checkbox" name="name" value="3" />打豆豆
    </div>
    <form action="" method="" id='fm1'>
    <input type="button" name="name" value="按钮" disabled='disabled' />
    </form>
    <form action="" method="" id='frm2'>
    <input type="button" name="name" value="按钮2" />
    </form>
</body>
</html>