jquery的一些小小实例

最新推荐文章于 2024-03-29 10:49:50 发布

Onlyjr123

最新推荐文章于 2024-03-29 10:49:50 发布

阅读量377

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Onlyjr123/article/details/76160312

本文介绍了jQuery的基础用法，包括如何遍历数组并对每个元素进行操作，以及如何通过添加和移除类来改变元素的样式。

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

通过两天的学习，对jquery有了初步的了解，现在介绍几个小小的实例。

1.遍历数组：

jQuery.each(object, [callback])

用此方法可以遍历数组，，同时使用元素索引和内容。

其中

object:需要遍历的对象或数组

callback:每个成员/元素执行的回调函数。

例如：

有数组【2，4，6，8】不仅遍历了数组，还让数组的每个元素加1.

用此方法可以一步就把每个数组都找出来，十分方便。

2.通过类来改变样式：

我们可以通过用addClass和removeClass分别添加类和去掉类

例如：

我们通过鼠标事件来解释一下：

有一个div我们要使鼠标放上去的时候变色应该用

$(function () {
$('li').mouseover(function () {
$(this).addClass('a');

红色字体是用addClass进行样式添加

.mouseout(function () {
$(this).removeClass('a');
})

红色字体是用removeClass来去掉类同时也去掉了样式

完整的代码如下：

 <style type="text/css">
        li{
            background-color: gray;
            list-style: none;
            float: left;margin-left: 2px;
            border-radius: 5px 5px 0px 0px;
        }
        .a{
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        $(function () {
           $('li').mouseover(function () {
               $(this).addClass('a');
           }).mouseout(function () {
               $(this).removeClass('a');
           })
        })
    </script>
</head>
<body>
  <div>
      <ul>
          <li>资讯动态</li>
          <li>产品世界</li>
          <li>市场营销</li>
      </ul>
  </div>

由于效果是动态的就不在这里展示了。