首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将hover jquery转换为js pure?

将hover jQuery转换为纯JS的方法有几种。下面我将介绍两种常用的方法:

方法一:使用addEventListener方法

首先,我们需要获取目标元素,并给它添加一个事件监听器。然后,在鼠标移入和移出时触发相应的函数。在函数内部,我们可以使用classList属性来添加或移除CSS类。

代码语言:txt
复制
// 获取目标元素
var element = document.getElementById("myElement");

// 添加鼠标移入事件监听器
element.addEventListener("mouseover", function() {
  // 添加CSS类
  this.classList.add("hover");
});

// 添加鼠标移出事件监听器
element.addEventListener("mouseout", function() {
  // 移除CSS类
  this.classList.remove("hover");
});

以上代码中,我们使用了getElementById方法获取目标元素,然后使用addEventListener方法为目标元素添加了mouseover和mouseout事件监听器。当鼠标移入时,会触发mouseover事件,并在函数内部添加一个名为"hover"的CSS类;当鼠标移出时,会触发mouseout事件,并在函数内部移除这个CSS类。

方法二:使用onmouseover和onmouseout属性

另一种常见的方法是直接使用目标元素的onmouseover和onmouseout属性。在HTML中,我们可以将这两个属性直接添加到目标元素上,并指定相应的JavaScript代码。

代码语言:txt
复制
<div id="myElement" onmouseover="addHoverClass()" onmouseout="removeHoverClass()">Hello World</div>

<script>
function addHoverClass() {
  var element = document.getElementById("myElement");
  element.classList.add("hover");
}

function removeHoverClass() {
  var element = document.getElementById("myElement");
  element.classList.remove("hover");
}
</script>

在以上代码中,我们在目标元素上添加了onmouseover和onmouseout属性,并指定了相应的JavaScript函数addHoverClass和removeHoverClass。这两个函数内部的代码与方法一中的相同,都是使用classList属性来添加或移除CSS类。

以上是将hover jQuery转换为纯JS的两种方法。这两种方法都可以实现与hover jQuery相同的效果,而不依赖于jQuery库。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何将JS对象的所有键名转换为小写?

在开发 JavaScript 应用时,有时候我们需要将对象的所有键名统一换为小写,这样可以避免由于键名大小写不一致而导致的错误。接下来,我将分享一个简单的方法来实现这个需求。...实现步骤 要将 JavaScript 对象的所有键名转换为小写,可以按以下步骤进行: 使用 Object.entries 方法将对象转换为键值对数组。...使用 Array.prototype.map 方法遍历数组,将每个键名转换为小写。 使用 Object.fromEntries 方法将修改后的键值对数组重新转换为对象。...然后,通过以下步骤将其转换为键名均为小写的新对象 newObj: Object.entries(obj) 将 obj 转换为键值对数组:[['FOO', 1], ['BAR', 2], ['BAZ',...使用 map 方法遍历这个数组,并将每个键名 k 转换为小写,同时保持值 v 不变。

15910
  • JS小知识,如何将 CSV 转换为 JSON 字符串

    大家好,今天和大家聊一聊,在前端开发中,我们如何将 CSV 格式的内容转换成 JSON 字符串,这个需求在我们处理数据的业务需求中十分常见,你是如何处理的呢,如果你有更好的方法欢迎在评论区补充。...一、使用 csvtojson 第三方库 您可以使用 csvtojson 库在 JavaScript 中快速将 CSV 转换为 JSON 字符串: index.js import csvToJson from...直接将 CSV 字符串转换为 JSON,fromString() 要直接从 CSV 数据字符串而不是文件转换,您可以使用转换对象的异步 fromString() 方法代替: index.js import...处理 CSV JSON 我们也可以在不使用任何第三方库的情况下将 CSV 转换为 JSON。...结束 今天的分享就到这里,如何将 CSV 转换为 JSON 字符串,你学会了吗?希望今天的分享能够帮助到你,后续我会持续输出更多内容,敬请期待。

    7.8K40

    jQuery」基础 - 01

    jQuery 对象和 DOM 对象 使用 jQuery 方法和原生JS获取的元素是不一样的,总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是 jQuery 对象...因为原生jsjQuery 更大,原生的一些属性和方法 jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。...$(box); // 把DOM对象转换为 jQuery 对象 // 2.jQuery 对象转换为 DOM 对象有两种方法: // 2.1 jQuery对象[索引值] var domObject1...= $('div')[0] // 2.2 jQuery对象.get(索引值) var domObject2 = $('div').get(0) 总结:实际开发比较常用的是把DOM对象转换为jQuery...事件切换 jQuery中为我们添加了一个新事件hover(),功能类似 css 中的伪类:hover,介绍如下: 语法 hover([over,]out) // 其中over和out为两个函数

    6.9K21

    前端成神之路-01_jQuery

    1.2.5. jQuery 对象和 DOM 对象 ​ 使用 jQuery 方法和原生JS获取的元素是不一样的,总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是...因为原生jsjQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。...$(box); // 把DOM对象转换为 jQuery 对象 // 2.jQuery 对象转换为 DOM 对象有两种方法: // 2.1 jQuery对象[索引值] var domObject1...= $('div')[0] // 2.2 jQuery对象.get(索引值) var domObject2 = $('div').get(0) 总结:实际开发比较常用的是把DOM对象转换为jQuery...事件切换 ​ jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover

    12K10

    jquery对象和dom对象的相互转换

    由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。...中几个自定义的事件: (1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面 及移出这个对象)的方法。..." 12、解决自定义方法或其他类库与jQuery的冲突 很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引...= 'none'; 1、DOM对象jQuery对象  普通的Dom对象一般可以通过$()转换成jQuery对象。 ...2、jQuery对象DOM对象  由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。

    3.3K40

    Vue实现图片与文字混输

    知识在于积累,踩坑越多,你越强 前言 用多了JQuery,习惯了使用JQuery的API操作DOM,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,第一个想到的办法是用textarea.../${item.src}`)" :alt="item.info" @mouseover="emojiConversion($event,'over',item.src,item.hover...,item.info)" @mouseleave="emojiConversion($event,'leave',item.src,item.hover,item.info)".../assets/img/emoji/${path}`); } } 踩坑记录 •直接使用append()方法 公司项目一直用JQuery,类似的需求直接append,以为是js提供的方法,...结果这里直接使用,答案很明显,直接将DOM字符串插入了输入框里 •手动实现字符串dom 自己手动实现,不知道是不是自己写错了,结果也是行不通,如果有发现错误的朋友,欢迎评论区留言。

    1.4K30

    jQuery

    jQuery 概述 js库:即library,封装好的函数。里面有很多预先封装好的方法。 jQuery就是为了更方便快速操作DOM,里面封装了很多方法,后续用jQuery对象调用这些方法即可。...`是jQuery的顶级对象,相当于原生js中的window,元素通过`包装成jQuery对象,调用jQuery属性和方法。...所以,jQuery 只是对js常用属性和方法进行了封装。 DOM使用原生js方法和属性,jQuery 使用jQuery 属性和方法。...: //直接获取元素即可 $('div'); ---- jQuery常用API jQuery选择器 jQuery 基础选择器 原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery...语法1: //index 元素索引号 //domEle 是每个DOM元素对象(非jquery对象);所以要想使用jquery方法,需要将这个dom元素转换为jquery对象 $(domEle) $("div

    21.1K50
    领券