jQuery——链式编程

最新推荐文章于 2022-01-23 13:20:23 发布

mintsolace

最新推荐文章于 2022-01-23 13:20:23 发布

阅读量322

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记 jQuery 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/mintsolace/article/details/97815325

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

128 篇文章

订阅专栏

jQuery

16 篇文章

订阅专栏

本文介绍了jQuery中的链式编程概念，通过示例展示了如何使用addClass()方法进行元素样式的增删，并解释了链式编程的工作原理。同时提到了移除类样式的方法，如使用css()、addClass()和removeClass()。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素样式操作使用css方法的几种写法

    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                //设置div样式
                //第一种写法：
                $("#dv").css("width","300px");
                $("#dv").css("height","300px");
                $("#dv").css("backgroundColor","hotpink");
                $("#dv").css("border","3px solid red");
                //第二种写法:链式编程
                $("#dv").css("width","300px").css("height","300px").css("backgroundColor","hotpink").css("border","3px solid red");
                //第三种写法：键值对的写法
                var json-{"width":"200px","height":"100px","backgroundColor":"pink","border":"2px solid green"};
                $("#dv").css(json);
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>

链式编程：
对象不停调用方法
对象.方法().方法().方法();
对象调用方法，如果返回值还是当前这个对象，那么就可以继续调用方法
在jQuery中，一般情况，对象调用方法，这个方法的意思是设置，那么返回来的几乎都是当前的对象，就可以继续链式编程

        $(function(){
            $("#btn").click(function(){
                //获取按钮的value属性——这个方法此时是获取，返回的是value属性值
                //console.log($(this).val());
                //var obj=$(this).val("我想喝星卡里");
                //console.log(obj);
                $(this).val("哈哈哈我也想").css("backgroundColor","red").css("width","300px");
            });
        });

addClass()方法，括号里什么也没有，返回来的仍然是这个对象，即使括号中设置了内容，返回来的还是这个对象。

链式编程原理：
对象.方法();调用，如果返回的还是对象，那么可以继续调用方法

    <script>
        $(function(){
            //为按钮注册点击事件
            $("#btn").click(function(){
                $(this).val("哈哈").val("呵呵");
                console.log();
            });
        });
    </script>
......
	<input type="button" value="显示效果" id="btn" />

移除类样式：

//1
$("#dv").removeClass("cls");
//2
$("#dv").removeClass("cls").removeClass("cls2");
//3
$("#dv").removeClass("cls cls2");

设置元素的样式可以使用css()方法，也可以使用addClass()或者removeClass()方法