今天这篇文章是 jQuery API 的第三篇，今天心情很好，因为破了300粉，希望所有代码人前端人在编程与写作的路上都能一帆风顺，全都早日拿认证。**okk**言归正传，这篇文章将带大家走进链式编程的世界，这也是 jQuery 的一个大大大大优点，其可以使代码的可读性，简洁性都得到进一步的升华，让你进入更高一层境界的代码世界。 还有一个就是对于样式的修改的进一步说明，不再单单的是一个 css 方法，我们会在这篇文章接触到 样式操作类 与 更多的样式操作方法。------- 接下来让我们进入代码世界 -------
一：链式编程
什么是链式编程？：
链式编程 与 隐式迭代 是 jQuery 的两大特点，链式编程其实我们根据字面意思已经能想象到了，像链子一样串在一起，就是链式，那在编程领域，就是将多个分开的代码连接在一起书写的意思啦？不错，正是这样，记得我们的排他思想案例吗，我们当时的做法是第一个css设置点击的元素本身，第二个css设置点击元素的兄弟元素，其实此处就可以用链式编程思想将两行代码连起来，可见链式编程的好处是减少了代码冗余，增加了简洁性。
链式编程的实现原理：
在当前对象调用完第一个方法后，便会返回一个 jQuery 对象，这个对象就可以继续接着调用其他方法，这就是链式编程的基本实现原理。
链式编程示例：
我们还是举例排他思想按钮作为案例，并且对比不用链式编程的代码冗余量：
//不使用链式编程
<script>
$('button').click(function(){
$(this).css('background','red')
$(this).siblings('button').css('background','')
})
</script>
//使用链式编程
<script>
$('button').click(function(){
$(this).css('background','red').siblings('button').css('background','')
})
</script>
二：样式修改的操作
一：操作 css 方法
操作css方法有以下几种：
- 参数只写属性名：返回结果为属性值
- 参数为属性值与属性名，中间逗号隔开
- 参数为对象形式，写在花括号里，键值对形式，以方便设置多组样式
1.参数只写属性名
返回结果为属性值
<div></div>
<script>
$('div').click(function(){
console.log($(this).css('backgroundColor'));
})
</script>
2.参数为属性值与属性名，中间逗号隔开
结果为产生想要修改的样式效果 ( 此处点击前为红色 )
<body>
<div></div>
<script>
$('div').click(function(){
$(this).css('backgroundColor','pink');
})
</script>
</body>
3.参数为对象形式，以方便设置多组样式
注意样式卸载花括号里，以键值对形式书写，并且复合属性要采用驼峰命名法
<body>
<div></div>
<script>
$('div').click(function(){
$(this).css({'backgroundColor':'pink',
'border':'2px solid'});
})
</script>
</body>
二：操作类修改样式
等同于原生 js 的 classList 和 className
其主要有三个样式类方法：
- addClass（‘类名’）：添加类名
- removeClass（‘类名’）：删除类名
- toggleClass（‘类名’）：切换类名
1.addClass（‘类名’）
作用为添加类名，此处就点击后添加了 current 类
<style>
div{
width: 300px;
height: 300px;
background-color: rgb(255, 146, 146);
}
.current{
background-color: rgb(0, 160, 246);
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div></div>
<script>
$('div').click(function(){
$(this).addClass('current')
})
</script>
点击后div的 多了类名current
2.removeClass（‘类名’）
作用为删除类名，此处就点击后就删除了原有类名
<style>
.current{
width: 300px;
height: 300px;
background-color: rgb(0, 160, 246);
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div class="current"></div>
<script>
$('div').click(function(){
$(this).removeClass('current')
})
</script>
</body>
点击后删除了 div 的类名 current
3.toggleClass（‘类名’）
这个方法其实可以做到一种类名切换的效果，它其实是判断有没有这个类名，有就删掉，没有就添加
div{
width: 300px;
height: 300px;
background-color: rgb(255, 146, 146);
}
.current{
width: 300px;
height: 300px;
background-color: rgb(0, 160, 246);
}
</style>
<script src="./jquery.js"></script>
</head>
<body>
<div class="current"></div>
<script>
$('div').click(function(){
$(this).toggleClass('current')
})
</script>
</body>
点击后会在两个类间来回切换，有 current 则删除，没有则添加这个类名
本文转载自: https://blog.csdn.net/weixin_52212950/article/details/124136253
版权归原作者 卡卡西最近怎么样 所有， 如有侵权，请联系我们删除。
版权归原作者 卡卡西最近怎么样 所有， 如有侵权，请联系我们删除。