jQuery15(元素each方法,表单选择器)

最新推荐文章于 2023-11-16 22:16:57 发布

原创最新推荐文章于 2023-11-16 22:16:57 发布 · 594 阅读

1 ·

CC 4.0 BY-SA版权

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

44 篇文章

订阅专栏

本文介绍了如何使用jQuery的each方法遍历radio和checkbox元素，并展示了如何通过选择器操作表单元素，包括设置背景颜色等样式。

元素的each方法

目前已知,radio,checkbox在jQuery中无法直接遍历,需要使用each方法进行遍历.
实例:

<!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 () {
                var cks = $('div input:checked');
                //alert(cks.val());
                //jQuery无法直接遍历checkbox
                //需要使用each方法,但是ele是doc元素,需要转换为jquery对象打印出value值
                //注意在html中checked='checked'写法!
                cks.each(function (index, ele) {
                    alert('=' + index + '=' + $(ele).val());
                });
            });
        });

    </script>
</head>
<body>
    <input type="button" name="name" value="改变" id='btn' />
    <div id='dv'>
        <input type="checkbox" name="name" value="11" checked='checked' />1
        <input type="checkbox" name="name" value="12" checked='checked' />2
        <input type="checkbox" name="name" value="13" checked='checked' />3
        <input type="checkbox" name="name" value="14" />4
        <input type="checkbox" name="name" value="15" />5
        <input type="checkbox" name="name" value="16" />6
        <input type="checkbox" name="name" value="17" />7
    </div>
</body>
</html>

知识点:jQuery对象如果需要获取属性的值,则在括号内空着,如果需要设置属性的值,则直接在方法内输入值.如上代码段中通过 $(ele).val() 获取ele的value值.

表单的选择器

<!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">
        //textarea--多用于条款
        $(function () {
            $('#btn').click(function () {
                //写:input 注意冒号,
                //能获取到的标签类型为: input textarea select button
                //和不写冒号不同,不写冒号将只获取input标签
                $(':input').css('backgroundColor', 'red');
                //选取所有的单行文本框
                $(':text').css('backgroundColor', 'red');
                //hidden 选取所有不可见元素 注意,父元素隐藏,子元素自然也隐藏
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="显示效果" id='btn' />
    <input type="text" name="name" value="第一个文本框" />
    <textarea rows='30' cols='80'>我要做什么就做什么呢</textarea>
</body>
</html>