jQuery下载和安装详细教程-程序员宅基地

技术标签： JQuery实用教程前端 jquery

下载jQuery

我们可以到jQuery的官网下载jQuery文件（PS：其实jQuery就是一个封装了很多函数的js文件，把这个js文件导入到网页中就可以了）。

jQuery官网地址： https://jquery.com/

打开官网，即可看到jQuery的下载按钮，点击进入下载页面。有两个版本的jQuery可以下载：

Production version - 用于实际的网站中，是已经被精简和压缩过的jQuery文件。
Development version - 用于测试和开发中，是未压缩的jQuery文件，可以方便阅读源码。

使用jQuery

jQuery库就是一个JavaScript文件，我们可以在HTML中使用<script>标签引入jQuery库：

<head>
	<script src="jquery-1.10.2.min.js"></script>
</head>

注意：

script标签的src属性中，要根据jQuery文件所在的目录引入，如果jQuery文件和当前的HTML文件放在同一个目录下，即可直接写jQuery的文件名；如果jQuery文件和HTML文件不在同一个目录下，我们可以使用相对路径和绝对路径的方式引入jQuery。

在HTML5中，script标签上可以不用添加 type="text/javascript" 属性，因为JavaScript是HTML5以及所有现代浏览器中的默认脚本语言。

CDN方式引用jQuery

如果我们不想下载jQuery文件存放到项目中，为了操作方便，可以使用CDN（内容分发）的方式引用jQuery。说更直白一点，就是网络中很多服务器都存了jQuery文件，我们可以去某一台服务器上找到jQuery文件，并且把该文件的URL地址放到script标签的src属性中就可以了。使用CDN方式引用jQuery的前提是，你的电脑必须可以上网，不然是连接不到远程服务器的。

如果你的站点是在国内，建议使用百度、新浪、又拍云等国内CDN地址，如果你的站点是在国外，建议使用谷歌和微软的CDN地址。

使用CDN地址引用jQuery的具体方法如下：

百度 CDN：

<head>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
	</script>
</head>

新浪 CDN：

<head>
	<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
	</script>
</head>

又拍云 CDN：

<head>
	<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
	</script>
</head>

Staticfile CDN：

<head>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
</head>

Google CDN：

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
	</script>
</head>

Microsoft CDN：

<head>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">	</script>
</head>

查看jQuery版本

在浏览器中打开已经引用jQuery的网页，然后按F12打开 开发者工具 ，选择“Console”控制台，在控制台中输入以下命令：

$.fn.jquery

输入命令后按回车，即可显示当前jQuery的版本号。

React项目中引用jQuery

安装

npm install jquery --save

或使用淘宝镜像：

cnpm install jquery --save

在项目中引用jQuery

import React, {
     Component } from 'react'
import $ from 'jquery'

export default class Test extends Component {
    

  componentDidMount(){
    
    console.log('$(".test").text()',$(".test").text())
  }
  render() {
    
    return (
      <div className="test">
        jQuery
      </div>
    )
  }
}

Vue项目中引用jQuery

安装

npm install jquery --save

或使用淘宝镜像安装：

cnpm install jquery --save

修改配置文件

在webpack.base.conf.js文件中添加以下代码：

const webpack = require('webpack')

然后在webpack.base.conf.js文件中添加plugins，代码如下：

在项目中引用jQuery

<template>
  <div id="app"></div>
</template>
 
<script>
  import $ from 'jquery'
  export default {
    
    name: 'App',
    components: {
    },
    data: function () {
    
      return {
    }
    },
    created:function(){
    
      console.log($('#app'));
    }
  }
</script>
 
<style>
 
</style>

Angular项目中引用jQuery

安装

# 进入到项目目录

# 安装 jQuery 依赖
npm install --save jquery 

# 安装 jQuery ts 依赖
npm install --save @types/jquery

在项目中引用jQuery

import * as $ from 'jquery';
...

$('#btnId').on('click', function() {
    
  alert('jQuery!')
})

在这里插入图片描述

本文链接：https://blog.csdn.net/p445098355/article/details/103995541

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

软件测试流程包括哪些内容？测试方法有哪些？_测试过程管理中包含哪些过程-程序员宅基地

文章浏览阅读2.9k次，点赞8次，收藏14次。测试主要做什么？这完全都体现在测试流程中，同时测试流程是面试问题中出现频率最高的，这不仅是因为测试流程很重要，而是在面试过程中这短短的半小时到一个小时的时间，通过测试流程就可以判断出应聘者是否合适，故在测试流程中包含了测试工作的核心内容，例如需求分析，测试用例的设计，测试执行，缺陷等重要的过程。..._测试过程管理中包含哪些过程

政府数字化政务的人工智能与机器学习应用：如何提高政府工作效率-程序员宅基地

文章浏览阅读870次，点赞16次，收藏19次。1.背景介绍政府数字化政务是指政府利用数字技术、互联网、大数据、人工智能等新技术手段，对政府政务进行数字化改革，提高政府工作效率，提升政府服务质量的过程。随着人工智能(AI)和机器学习(ML)技术的快速发展，政府数字化政务中的人工智能与机器学习应用也逐渐成为政府改革的重要内容。政府数字化政务的人工智能与机器学习应用涉及多个领域，包括政策决策、政府服务、公共安全、社会治理等。在这些领域，人工...

ssm+mysql+微信小程序考研刷题平台_mysql刷题软件-程序员宅基地

文章浏览阅读219次，点赞2次，收藏4次。系统主要的用户为用户、管理员，他们的具体权限如下：用户：用户登录后可以对管理员上传的学习视频进行学习。用户可以选择题型进行练习。用户选择小程序提供的考研科目进行相关训练。用户可以进行水平测试，并且查看相关成绩用户可以进行错题集的整理管理员：管理员登录后可管理个人基本信息管理员登录后可管理个人基本信息管理员可以上传、发布考研的相关例题及其分析，并对题型进行管理管理员可以进行查看、搜索考研题目及错题情况。_mysql刷题软件

根据java代码描绘uml类图_Myeclipse8.5下JAVA代码导成UML类图-程序员宅基地

文章浏览阅读1.4k次。myelipse里有UML1和UML2两种方式，UML2功能更强大，但是两者生成过程差别不大1.建立Test工程，如下图，uml包存放uml类图package com.zz.domain;public class User {private int id;private String name;public int getId() {return id;}public void setId(int..._根据以下java代码画出类图

Flume自定义拦截器-程序员宅基地

文章浏览阅读174次。需求：一个topic包含很多个表信息，需要自动根据json字符串中的字段来写入到hive不同的表对应的路径中。发送到Kafka中的数据原本最外层原本没有pkDay和project，只有data和name。因为担心data里面会空值，所以根同事商量，让他们在最外层添加了project和pkDay字段。pkDay字段用于表的自动分区，proejct和name合起来用于自动拼接hive表的名称为 ..._flume拦截器自定义开发 kafka

java同时输入不同类型数据,Java Spring中同时访问多种不同数据库-程序员宅基地

文章浏览阅读380次。原标题：Java Spring中同时访问多种不同数据库多样的工作要求，可以使用不同的工作方法，只要能获得结果，就不会徒劳。开发企业应用时我们常常遇到要同时访问多种不同数据库的问题，有时是必须把数据归档到某种数据仓库中，有时是要把数据变更推送到第三方数据库中。使用Spring框架时，使用单一数据库是非常容易的，但如果要同时访问多个数据库的话事件就变得复杂多了。本文以在Spring框架下开发一个Sp..._根据输入的不同连接不同的数据库