jquery鼠标移入移出【jquery鼠标移入移出变色】 收藏 0

vue项目引入jquery

在Vue项目中引入jQuery可以为我们提供更多的功能和插件选择，同时也可以与Vue的数据驱动开发相结合，提高开发效率。

首先，我们需要在Vue项目中安装jQuery。可以使用npm安装jQuery，命令如下：

“`

npm install jquery –save

“`

安装完成后，在Vue的入口文件（main.js）中引入jQuery：

“`javascript

import $ from \’jquery\’

“`

这样就可以在整个项目中使用jQuery了。

引入jQuery后，我们可以使用它的丰富的插件来增强我们的应用。例如，可以使用jQuery的动画效果插件来实现更加丰富的页面过渡效果。可以使用jQuery的表单验证插件来方便地验证用户输入。可以使用jQuery的日期选择插件来实现日期选择功能等等。

另外，Vue的数据驱动开发可以与jQuery结合使用，实现更加灵活的交互效果。例如，在Vue的组件中可以使用jQuery来操作DOM元素，例如添加、删除、修改元素的样式等。可以使用jQuery的事件处理函数来处理用户的交互行为，例如点击事件、鼠标移入移出事件等。可以使用jQuery的ajax函数来发送异步请求，与后端进行数据交互。

在使用jQuery的时候，要遵循Vue的原则，尽量避免直接操作DOM元素，而是通过Vue的数据绑定来实现页面的更新。可以通过在Vue的生命周期钩子函数中使用jQuery来初始化一些插件，或者在Vue的自定义指令中使用jQuery来操作DOM元素。

引入jQuery可以为Vue项目提供更多的功能和插件选择，同时也可以与Vue的数据驱动开发相结合，提高开发效率。但是要注意在使用jQuery的时候，要遵循Vue的原则，尽量避免直接操作DOM元素，而是通过Vue的数据绑定来实现页面的更新。

「融职培训」Web前端学习 第4章 jQuery 2 jQuery常用方法

事件的基本概念

上一章我们讲解了使用jQuery选择器获取元素，并通过一些方法来操作元素，本章我们讲解事件的概念，通过事件我们可以加强用户与浏览器的交互性，例如可以实现当用户点击某个元素的时候，对元素做一些操作，或是移动鼠标，对元素做一些操作。

事件的分类

事件主要可以分为以下几类：

• 鼠标事件
• 键盘事件
• 文档事件
• 表单事件
• 触摸事件
• 自定义事件

本章我们主要讲解鼠标事件。

我们先来将最常用的鼠标单击事件click，jQuery的基本语法如下所示：

我们先通过$(“selector”)选择器获取元素，然后通过click为元素定义事件，这样当我们用鼠标单击这个元素的时候，就会执行花括号中的代码。

输出文字

我们现在实现一个功能，当我们点击一个按钮的时候，在控制台输出\”hello world\”,代码如下所示。

切换图片

结合我们上一章的内容，来实现一个功能，当我们点击按钮的时候，将一张图片切换成另一张图片,代码如下所示。

在上面的代码中，$(this)对应的就是我们点击的这个元素，也就是img标签，当我们点击img标签的时候，使用attr方法将其src属性设置成另一张了图片的地址，这样就实现了图片的切换。

获取索引

接下来我们要实现一个更复杂的效果：点击一个数字列表来实现切换图片的功能，列表有三个数字，对应着三张不同的图片。

要实现这样的功能，很多同学会想到，给数字列表分别绑定事件，每一个事件都对应不同的图片就可以了，虽然这样可以实现我们要的功能，但是如果需求又增加了两张图片，那我们就又要多定义两个事件，所以这个方案是不合理的。

我们需要的是用一个选择器找到所有的数字列表，让后统一绑定一个事件，然后在点击数字列表的时候，让程序找到我们点击的是第几个，然后切换到对应的图片，就可以了。下面的代码可以让我们判断是第几个元素触发了事件,当点击时会输出对应的下角标。

• 在上面的代码中，index方法可以获取元素的索引，索引就是当前元素在其同级的元素中排第几个，从0开始计数。
• 我们将index获取到的索引值赋值给变量i，并输出i就看到了这个元素的索引。

切换图片

找到了列表的索引，我们下一步就要实现图片切换的功能了，首先我们需要了解数组的概念，数组是一个集合，我们将3章图片的路径放到了数组中，这样我们就可以通过数组的下标来获取到数组的元素了。

上面的代码可以了解到，我们可以通过数组的下标来获取数组中的元素。

接下来，我们结合之前学过的方法来实现一个图片切换的效果,代码如下所示。

这样，当我们点击数字列表的时候，就可以实现图片切换的功能了。

上一节我们说了鼠标单击事件，其实鼠标事件还有很多，这节我们讲解鼠标移入，移出和移动事件。

鼠标移入移出改变样式

鼠标的移入和一出事件分别是mouseenter和mouseleave。我们来实现一个功能，当我们的鼠标移入一个div的时候，让其变为红色，移出的时候，让其变为绿色，代码如下：

这里我们使用了链式操作，用一个选择器，绑定两个属性。

鼠标移入和移出事件可以简写成一个hover事件，上面的代码可以简写如下所示：

hover有方法有两个参数，都是函数，分别对应着mouseenter和mouseleave的事件，这样写的效果与上面完全相同。

鼠标移动获取坐标

鼠标在元素上移动的时候也会触发事件，下面我们来实现一个功能，当鼠标移动到一个div的时候，获取鼠标在网页页面上的坐标,代码如下所示：

• 在上面的代码中e是事件对象，我们可以通过它获取到x轴和y轴的坐标。
• 然后通过console.log()方法在控制台输出x坐标和y坐标。

1. 滑动显示和隐藏的右边栏，点击按钮弹出，电气其他位置隐藏。
2. 让图片跟随鼠标移动。
3. 返回顶部

【融职教育】在工作中学习，在学习中工作

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com