jQuery——元素选中问题（特别乱（勿点

最新推荐文章于 2025-03-16 10:13:49 发布

原创最新推荐文章于 2025-03-16 10:13:49 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

jQuery

16 篇文章

订阅专栏

博客探讨了jQuery中处理元素选中状态的最佳实践，推荐使用.prop()而非.attr()方法来操作checked属性。同时，文章提供了示例代码，展示了如何切换复选框选中状态以及如何改变元素尺寸。此外，还提及了DOM中与滚动相关的属性，如scrollLeft、scrollTop、scrollWidth和scrollHeight，并给出jQuery获取这些值的例子。

.attr(参数1);——获取某个属性的值
参数1：属性的名字
参数2：属性的值
.attr主要操作元素的自定义属性，但是也可以操作元素的自带属性（html中本身就有的属性），但是操作元素选中的checked的时候不是很合适。
操作元素的选中的checked，推荐使用prop这个方法。

设置或者获取元素选中的问题
推荐使用prop()方法
.prop(“属性”，值)；值一般是布尔类型
.prop(“属性”)；——获取这个元素是否选中

例：点击按钮切换复选框选中

    <script>
        $(function(){
            //点击按钮
            $("#btn").click(function(){
                //点一下，选中了，再点就选不中
                if($("#ck").prop("checked")){
                    //选中了就应该变成不是选中的状态
                    $("#ck").prop("checked",false);
                }else{
                    $("#ck").prop("checked",true);
                }
            })
        })
    </script>
    ......
	<input type="button" value="选中/不选中" id="btn"/>
	<input type="checkbox" value="1" name="play" id="ck"/>打游戏

例：操作元素的宽和高的方法：点击按钮，设置div的宽和高为原来的2倍

    <style>
        div{
            width:200px;
            height:100px;
            background-color: red;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                //获取div的宽和高
                var w=$("#dv").css("width");
                var h=$("#dv").css("height");
                //设置div的宽和高
                $("#dv").css("width",(parseInt(w)*2)+"px");
                $("#dv").css("height",(parseInt(h)*2)+"px");
            });
        });
    </script>
......
	<input type="button" value="设置元素的宽和高" id="btn"/>
	<div id="dv"></div>

DOM中的方法（数字类型）
scrollLeft: 向左卷曲出去的距离的值
scrollTop: 向上卷曲出去的距离的值
scrollWidth: 元素中内容的实际的宽
scrollHeight: 元素中内容的实际的高

例：jQuery中，div滚动上下滚动条的时候，一直获取他的向上卷曲出去的值

    <script>
                $(function(){
                    $("#dv").scroll(function(){
                        console.log($(this).scrollTop());
                    });
                });
    </script>