vue 封装 jquery 修改元素详解在项目中我们经常有，点击某一个元素让其自身样式发生变化，同时其兄弟元素改变的需求

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第23天，点击查看活动详情

前言

在项目中我们经常有，点击某一个元素让其自身样式发生变化，同时其兄弟元素改变的需求，最简单的就是通过Jquery来操作，但是如果需求多的话，那么我们就可以对这个方法进行封装，然后再引入使用。今天我们就来看看这个封装。

引入 Jquery

1.下载jquery源码：

2.npm 安装

我们也可以在项目终端中输入如下代码：

npm i jquery -S

vue 引入 jquery遇到的坑

当引入下方的一个插件的时候

src/jquery.changeStyle.js

$.fn.changeStyle = function(colorStr){
  this.css("color", colorStr);
}

我们引入 src/app.js 里

import $ from 'jquery';
import './jquery.changeStyle';
 
$("#hello").text('change to other text');
// 把元素改成紫色
$("#hello").changeStyle('pink');

发现报错了，跟之前的一样

那把 import './jquery.changeStyle'; 改成 import changeStyle from './jquery.changeStyle'; 试一下。

发现并没有什么用

发现 src/jquery.changeStyle.js 文件引用了 jquery 这个插件，可是外面 src/app.js 却不知道。

我们来改一下 src/jquery.changeStyle.js 文件的内容。

import $ from 'jquery';
 
$.fn.changeStyle = function(colorStr){
  this.css("color", colorStr);
}

效果出来了，这样是可以的。

但是有一个问题啊，上面的 jquery 插件是我们自己随意写的，我们想怎么改都可以，如果是第三方的呢，就是说你有可能从网上下载一个别人写好的。

封装

我们新建名为 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

引用

单文件应用

在某一个文件中单独使用的话，我们可以通过 import 的形式将其引入，如下所示：

import change from '@/common/change.js'
export default {
......
methods:{
        // 分类点击
        ItemClick(item, index) {
            // 调用方法,修改样式
            change.go('.item_one', index)
        },
    }
}

全局引用

我们可以在 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)
        },
    }
}