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

目录
  • 一.引入Jquery
  • 二.封装
  • 三.引用
    • 1.单文件应用
    • 2.全局引用

在项目中我们经常有，点击某一个元素让其自身样式发生变化，同时其兄弟元素改变的需求，最简单的就是通过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修改自身及兄弟元素 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

    本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p

  • vue中如何引入jQuery和Bootstrap

    这两天学习了Vue.js ,所以,今天添加一点小笔记. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  这样就将jquery安装到了这个项目中. 然后修改webpack.base.conf.js(在build文件下)两个地方: 1:加入 var webpack=require('webpack'); 2 在module.exports的里面加入 plugins: [ new webpack.opt

  • 使vue实现jQuery调用的两种方法

    引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按需引入),也让许多新手前端开发人员逐步绕过对jQuery的学习.jQuery需要记忆的内容颇多,这也让jQuery变得不那么受新入行开发者喜欢. 在前端工程化的需求没有普及的时候,许多公司使用的是后端渲染技术,为了能够实现友好的前端交互效果,需要写好大量的jQuery.JavaScript和CSS,

  • vue+jquery+lodash实现滑动时顶部悬浮固定效果

    本文实例为大家分享了vue实现滑动时顶部悬浮固定效果的具体代码,供大家参考,具体内容如下 这个效果是一个项目中抽出来的一个demo效果. 前期准备: 1. 引入jQ <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 引入lodash.js npm install lodash -D fixTop.vue组件的 <template> <div class=

  • vue单页应用中如何使用jquery的方法示例

    前言 本文给大家介绍的是关于在vue单页应用中使用jquery的相关内容,主要记录一个今天用到的vue-cli建立的应用中引入jquery的方式.下面话不多说,来一起看看详细的介绍吧. 方法如下: 1.首选通过npm安装jquery npm install jquery --save 2.在build/webpack.base.conf文件当中引入jquery module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json

  • 如何在vue 中引入使用jquery

    1.首先在配置文件中添加 cnpm install  下载jquery文件 2.在webpack配置文件中添加下面代码 3.接着在webpack.base.conf.js中module.exports的最后加入下面代码 4.最后在main.js中全局引入 5.引入完成以后重启项目,就可以在全局使用jquery了 以上就是如何在vue 中引入使用jquery的详细内容,更多关于vue 引入使用jquery的资料请关注我们其它相关文章!

  • jquery在vue脚手架中的使用方式示例

    本文介绍了jquery在vue脚手架中的使用方式示例,分享给大家,具体如下: 1:在各个vue文件中使用 <script> import '../assets/js/jquery-1.10.2.min.js' export default { data() { return { }, watch: { }, created: function() { }, methods: { list() { this.$router.push({ path: 'list' }); }, }, } $(do

  • 在Vue项目中引入JQuery-ui插件的讲解

    安装:  npm install jquery-ui-dist -S 引入: import 'jquery-ui-dist/jquery-ui' 更改配置文件: 1.添加jquery:'jquery' resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), jquery:'jquery', } }, // 添加代码 plugins:

  • Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(

  • 详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.j

随机推荐