vue封装jquery修改自身及兄弟元素的方法

这个问题需要分步骤来回答。

第一步：引入jQuery

为了在Vue项目中使用jQuery，我们需要先引入jQuery库。可以在html文件中直接引入：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

但在Vue项目中，推荐通过npm安装jquery并在需要使用的组件中引入：

npm install jquery

import $ from 'jquery';

第二步：在Vue组件中封装jQuery

我们可以将常见的jQuery操作封装成Vue组件的方法，以便复用。

以修改自身样式为例，我们可以定义以下Vue组件：

<template>
  <button @click="changeColor">Change color</button>
</template>

<script>
import $ from 'jquery';

export default {
  methods: {
    changeColor() {
      $(this.$el).css('background-color', 'red');
    },
  },
};
</script>

使用$(this.$el)来获取当前组件根元素，在根元素上使用.css方法修改样式。

如果想要修改兄弟元素的样式，可以使用.siblings方法获取兄弟元素，修改样式的方法和上面类似：

<template>
  <div>
    <button @click="changeColor">Change color</button>
    <button @click="changeSiblingsColor">Change siblings' color</button>
  </div>
</template>

<script>
import $ from 'jquery';

export default {
  methods: {
    changeColor() {
      $(this.$el).css('background-color', 'red');
    },
    changeSiblingsColor() {
      $(this.$el)
        .siblings()
        .css('background-color', 'green');
    },
  },
};
</script>

$(this.$el).siblings()可以获取当前组件根元素的兄弟元素，使用.css方法修改其样式。

示例演示

下面是一个完整的Vue组件，可以通过点击按钮切换两个div的颜色：

<template>
  <div>
    <div class="box-1" ref="box1"></div>
    <div class="box-2" ref="box2"></div>
    <button @click="toggleColors">Toggle colors</button>
  </div>
</template>

<script>
import $ from 'jquery';

export default {
  methods: {
    toggleColors() {
      const $box1 = $(this.$refs.box1);
      const $box2 = $(this.$refs.box2);
      const color1 = $box1.css('background-color');
      const color2 = $box2.css('background-color');
      $box1.css('background-color', color2);
      $box2.css('background-color', color1);
    },
  },
};
</script>

<style scoped>
.box-1 {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}
.box-2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
}
</style>

这个组件中通过$(this.$refs.box1)和$(this.$refs.box2)来获取两个div元素，并使用.css方法交换它们的背景颜色。

另外，为了避免样式冲突，建议在<style>标签上加上scoped属性。