使用jQuery的两种方法实现背景切换

最新推荐文章于 2024-03-10 13:54:05 发布

u_u2020

最新推荐文章于 2024-03-10 13:54:05 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/u_u2020/article/details/116326949

本文介绍了使用jQuery实现背景切换的两种方法：一是点击切换，二是鼠标移入切换。详细讲解了jQuery中css()方法的使用，并给出了具体的代码示例。同时，提到了jQuery与JavaScript点击事件绑定的区别，以及$(document).ready()的使用场景和注意事项。

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

首先给每个div设置背景，再给每个div绑定点击事件，使得body的背景可以切换。

注意：jQuery和js点击事件的绑定有一些差异，

js绑定如下：

document.getElementById("a1").onclick=function(){}

jQuery绑定如下：

$(".div1").click(function(){})

它们很相似，但是有两处不同，我用不同的颜色标记出来了

其中的css()是jQuery中的一个方法：css(name|pro|[,val|fn])，

它的意思就是：访问匹配元素的样式属性，而它里面的参数的意思分别是：

一：属性名

二:此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。效果如下：

引入插件这样才可以使用jQuery：<script src="~/Content/bootstrap-4.1.3-dist/js/jquery-3.2.1.min.js"></script>
写一个页面加载事件：$(document).ready(function () {})，简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行,请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

但是不能在同一个页面中出现多个window.load事件

再声明一个数组，将我们切换要用到的背景颜色放在我们声明的数组中: var arr = ["#ff0000", "#00ffff", "#ff6a00", "#0094ff"];

拓展：数组对象有一个属性：length，它的意思是：设置或返回数组元素的个数。alert(arr.length);//4

获取一下div：var div = $(".div div");我们现在获取的div是一个集合
所以再用一个for循环来遍历一下所获取的所有div：for (var i = 0; i < div.length; i++) {}，意思是：先声明一个变量i，让它等于0，再让它小于div的长度，最后让它自加。
之后给所有的div一个id，让div的id等于i：div[i].id = i;这样就知道鼠标移在那个div上了
给div鼠标移入事件，在鼠标移入事件中声明一个变量来接收每个div的id，再获取body，给body设置背景颜色：div.mousemove(function () {

var index = this.id;

$("body").css("background",arr[index]);

})