vue封装jquery修改自身及兄弟元素的方法
更新时间：2022年07月01日 10:15:30 作者：木偶☜
本文主要介绍了vue封装jquery修改自身及兄弟元素的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在项目中我们经常有，点击某一个元素让其自身样式发生变化，同时其兄弟元素改变的需求，最简单的就是通过Jquery来操作，但是如果需求多的话，那么我们就可以对这个方法进行封装，然后再引入使用。今天我们就来看看这个封装…
一.引入Jquery
1.下载jquery源码：
我们在网页中打开https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js，复制代码粘贴到我们的项目文件中。
2.NPM安装
我们也可以在项目终端中输入如下代码：
npm i jquery -S
二.封装
我们新建名为change.js的文件，在里面写入如下代码：
//引入Jquery
import $ from '@/common/jquery.js'
//声明对象
let change={
//对象中的方法(name就是对应的class类名，index为当前点击元素的索引)
go(name, index) {
// 获取当前点击的元素
let a = $(name)[index]
$(a)[0].style.backgroundColor = "#4CD964"
$(a)[0].style.color = "#fff"
// 设置同等级兄弟元素的样式
$($(a)[0]).siblings().css('background-color', "#fff")
$($(a)[0]).siblings().css('color', "#000")
}
}
export default change三.引用
1.单文件应用
在某一个文件中单独使用的话，我们可以通过import的形式将其引入，如下所示：
import change from '@/common/change.js'
export default {
......
methods:{
// 分类点击
ItemClick(item, index) {
// 调用方法,修改样式
change.go('.item_one', index)
},
}
}2.全局引用
我们可以在main.js中进行全局的注册，那么就可以在全局进行调用：
main.js
// 修改样式 import change from '@/common/change.js' Vue.prototype.change=change
需要调用此方法的文件
export default{
...
methods:{
// 分类点击
ItemClick(item, index) {
// 调用方法,修改样式
this.change.go('.item_one', index)
},
}
}
到此这篇关于vue封装jquery修改自身及兄弟元素的方法的文章就介绍到这了,更多相关vue jquery修改自身及兄弟元素 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了vue parseHTML 函数拿到返回值后的处理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了vue element多图片预览实现的相关资料,最近的项目中有图片预览的场景,本文就来介绍一下如何使用,感兴趣的可以了解一下2023-08-08
这篇文章主要介绍了基于Vue3实现组件封装的技巧,本文在Vue3的基础上针对一些常见UI组件库组件进行二次封装,旨在追求更好的个性化,更灵活的拓展,感兴趣的小伙伴跟着小编一起来看看吧2024-09-09
Vue.js的组件可以理解为预先定义好了行为的ViewModel类。这篇文章主要介绍了Vue.js组件使用开发实例教程的相关资料,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了使用window.open和vue router新开页面方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue2+el-menu实现路由跳转及当前项的设置,方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-11-11
最近在学习vue技术，开发表格的时候，想把表格做成组件，那查询条件就需要动态生成，这就遇到一个问题，vue怎么动态给v-model变量值，本文通过实例代码给大家介绍，对Vue3动态绑定v-model实例代码感兴趣的朋友一起看看吧2022-10-10
在开发过程中,绑定账号和电脑的功能可以通过获取电脑的MAC地址实现,下面这篇文章主要介绍了vue前端获取不同客户端mac地址的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue项目中swiper轮播active图片实现居中并放大方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue+axios 拦截器实现统一token的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论