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

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

天赋进行时

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

阅读量534

点赞数

分类专栏： JS-Dom-Jquery

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

版权

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

44 篇文章 0 订阅

订阅专栏

元素的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>

知识点: :input前面有个冒号,可以选择input,textarea,select,buttom等标签.

天赋进行时

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery15(元素each方法,表单选择器)

元素的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="htt
复制链接

扫一扫

专栏目录