vue中引入并且使用jquery,修复使用eslint时报 $、 jquery找不到的错误

vue是双向数据绑定，为啥还需要jquery 呢，因为vue在某些情况下需要操作dom,而vue操作dom又过于麻烦。

①首先在package.json指定需要下载的jquery版本 ,然后npm install,安装jquery

②安装好后，在webpack.base.conf.js文件中进行设置

（1）头部引入webpack

（2）在module对jquery进行全局配置

  plugins: [
　　new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery"
　　})
  ],

③在main.js中引入 jquery就可以使用了

④如果项目使用了 eslint语法检验，此时 会提示 找不到 $或者jquery的错误。

http://eslint.org/docs/rules/no-undef '$' is not defined

http://eslint.org/docs/rules/no-undef 'jQuery' is not defined

 

这时候需要做的下一步就是要修改根目录下.eslintrc.js文件了，在改文件的module.exports中，为env添加一个键值对 jquery: true 就可以了，也就是：

env: { 
// 原有 
browser: true, 
// 添加 
jquery: true 
} 

 

最后  再次运行 npm run dev就可以完美使用 jquery了

那如何使用呢：

试着在 mounted 或者 打印 $('选择器')，如果能正确打印出dom节点，说明是成功的。

那如果是要获取当前点击的 $(this),怎么办呢，和vue的this又有什么冲突。

假如要获取 当前节点的 父节点 。。。。祖父节点，用vue是这样的

① vue获取 节点

使用原生方法需要一级一级的查找

②使用jquery获取节点，直接jquery选择器一步到位

$(event.currentTarget) 既想当 与 $(this)

附上 原生和 jquery获取节点的方法

js获取节点

父： parentNode 获取已知节点的父节点。

子： childNodes; 得到全部子节点

children 得到全部子节点

firstChild 获得第一个子节点

lastChild 获得最后一个子节点

兄弟：previousSibling 获取已知节点的前一个节点

nextSibling 获取已知节点下一个节点

 

jq获取节点

父： $('#').parent() 获取上一级的父节点。

$('#items').parents('.parent1')获取上面哪一级父节点都可以。

$('li:parent')

子： $('#test span') 使用筛选条件

$('#test').find() 使用find()

$('#test').children('') 使用children()函数

兄弟：

jQuery.siblings() 返回兄弟姐妹节点，不分前后

jQuery.prevAll() 返回所有之前的兄弟节点

jQuery.prev() 返回上一个兄弟节点，不是所有的兄弟节点

jQuery.next() 返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll() 返回所有之后的兄弟节点

卓越的云计算服务提供商,230万+用户正在享受阿里云"稳定,安全,低成本"的产品服务,金牌服务:免费体验,专业快速备案,7x24小时售后,服务器只选阿里云