UNI-APP使用Jquery的方法

Bertha 。 2022-12-09 03:11 175阅读 0赞

### UNI-APP使用Jquery的方法 ###

*  UNI-APP使用Jquery的方法
 *   *  1. script脚本引入Jquery文件
     *  2. Jquery文件地址

# UNI-APP使用Jquery的方法 #

Uni-app采用Vue框架进行前端界面的设计，但有时需要写入Jquery语句，可以采用以下方法导入JqueryJS文件。

## 1. script脚本引入Jquery文件 ##

以【 [jquery-3.5.1.min.js][]】为例，先下载好该文件放置在\[根目录下js文件夹\]内，即可通过以下代码在script脚本内引入本地静态文件从而写入JQ语句。

<template>  
    </template>  
    <script>  
        import $ from '@/js/jquery-3.5.1.min.js'  
    </script>  
    <style>  
    </style>

值得注意的是，Jquery一般只适用于H5页面，因此可以对其进行条件限制：

<template>  
    </template>  
    <script>  
        //下面两个用双斜线加起来的并不是单纯的注释！！
        //#ifdef H5 
            import $ from '@/js/jquery-3.5.1.min.js'  
        //#endif
    </script>  
    <style>  
    </style>

## 2. Jquery文件地址 ##

参考这个网站：[https://www.jq22.com/jquery-info122][https_www.jq22.com_jquery-info122]

jquery-3.5.1（最新）: [微软服务器版本][jquery-3.5.1.min.js]  
[官网版本(不推荐，可能打不开)][Link 1]  
jquery-3.4.1: [微软服务器版本][Link 2]  
[官网版本(不推荐，可能打不开)][Link 3]  
jquery-3.3.1: [微软服务器版本][Link 4]  
[官网版本(不推荐，可能打不开)][Link 5]  
[字节跳动版本(速度快)][Link 6]

[jquery-3.5.1.min.js]: https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js
[https_www.jq22.com_jquery-info122]: https://www.jq22.com/jquery-info122
[Link 1]: https://code.jquery.com/jquery-3.5.1.min.js
[Link 2]: https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js
[Link 3]: https://code.jquery.com/jquery-3.4.1.min.js
[Link 4]: https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js
[Link 5]: https://code.jquery.com/jquery-3.3.1.min.js
[Link 6]: https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js