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!')
})

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/p445098355/article/details/103995541

智能推荐

CoreDNS 健康检查详解-程序员宅基地

文章浏览阅读671次。❝本文转自 TinyChen 的博客,原文:https://tinychen.com/20220728-dns-11-coredns-08-healthcheck/,版权归原作者所有。欢迎投稿,投稿请添加微信好友:cloud-native-yang本文主要讲解介绍 CoreDNS 内置的两个健康检查插件 health 和 ready 的使用方式和适用场景。health 插..._dns 后端服务健康检查

STM32F103C8T6实现流水灯_stm32f103c8t6编译成功后生成的是什么文件-程序员宅基地

文章浏览阅读474次。本文是为了解学习STM32F103C8芯片,并用其实现流水灯。_stm32f103c8t6编译成功后生成的是什么文件

java 常用的解析工具_有没有什么软件可以解读java语言-程序员宅基地

文章浏览阅读452次。这里介绍两种 java 解析工具。第一种:java 解析 html 工具 jsoup第二种: java 解析 XML 工具 Dom4jjsoupjsoup是一个用于处理真实HTML的Java库。它提供了一个非常方便的API,用于提取和操作数据,使用最好的DOM,CSS和类似jquery的方法。官网:https://jsoup.org/下载:https://jsoup.org..._有没有什么软件可以解读java语言

【.Net码农】RDLC报表显示外部图片方法_rdlc 外部图片 不清晰-程序员宅基地

文章浏览阅读1.8k次。工作时的总结,希望以后不要再犯!!! 在Windows窗体设计上进行必要条件:(需要使用下面的控件)代码设置:this.reportViewer1.LocalReport.EnableExternalImages = true; // RDLC报表显示本地图片必须设置(默认是关闭) 下面方法需要在设计RDLC上进行**********_rdlc 外部图片 不清晰

隐马尔科夫模型(HMM)学习笔记二-程序员宅基地

文章浏览阅读459次。  这里接着学习笔记一中的问题2,说实话问题2中的Baum-Welch算法编程时矩阵转换有点烧脑,开始编写一直不对(编程还不熟练hh),后面在纸上仔细推了一遍,由特例慢慢改写才运行成功,所以代码里面好多处都有print。  笔记一中对于问题1(概率计算问题)采用了前向或后向算法,根据前向和后向算法可以得到一些后面要用到的概率与期望值。一、问题2..._π的导数为什么是1

动态给select下拉框添加option_ie动态添加option-程序员宅基地

文章浏览阅读2w次,点赞6次,收藏17次。方法很多:1.JQuery的方法:///先定义一个数组 var data=new Array();///然后.............给数组data赋值 ............///最后把数组的值写入下拉框for(var j=0;j&lt;data.length;j++) $("#selectId").append("&lt;option val..._ie动态添加option

随便推点

第一章传感器技术基础_hysteresis 响应差-程序员宅基地

文章浏览阅读1.2k次。第一章 传感器技术基础传感器的静态特性指标1️⃣线性度(Linearity):是指传感器的输出与输入之间数量关系的线性程度2️⃣迟滞(Hysteresis,回差):传感器在正(输入量增大)反(输入量减小)行程中输入曲线不重合程度的指标3️⃣重复性(Repeatability):是指传感器在输入同一方向连续多次变动时所得特性曲线不一致的程度️灵敏度(Sensitivity):传感器输出..._hysteresis 响应差

Linux-搭建syslog日志接受服务器_syslog 514-程序员宅基地

文章浏览阅读2.2k次。syslog日志接受服务器适用于centos6以上且使用rsyslog服务的终端环境1.采用UDP协议发送和接收,在远程服务器端配置文件/etc/rsyslog.conf开启下面两行# Provides UDP syslog reception$ModLoad imudp$UDPServerRun 5142.编辑/etc/sysconfig/syslog文件,让服务器能够接受客户端传来的数据:在“SYSLOGD_OPTIONS”行上加“-r”选项以允许接受外来日志消息。# vi /etc/_syslog 514

CentOS6.5 添加开机自启动脚本_centos 6 自动重启 脚本-程序员宅基地

文章浏览阅读3.8k次,点赞2次,收藏4次。有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统服务。在解问题之前先来看看Linux的启动流程。一、Linux的启动流程 主要顺序就是: 1. 加载内核 2. 启动初始化进程 3. 确定运行级别 4. 加载开机启动程序 5. 用户登录启动流程的具体细节可以看看Linux 的启动流程 第4步加载启动程序其实是两步:init进程逐一加载开机启动程序,..._centos 6 自动重启 脚本

Kubernetes集群——(k8s)pod管理_阿里云服务器pod管理-程序员宅基地

文章浏览阅读824次。一、pod简介Pod是可以创建和管理Kubernetes计算的最小可部署单元,一个Pod代表着集群中运行的一个进程,每个pod都有一个唯一的ip。一个pod类似一个豌豆荚,包含一个或多个容器(通常是docker),多个容器间共享IPC、Network和UTC namespace二、pod管理kubectl命令:https://kubernetes.io/docs/reference/generated/kubectl/kubectl- commandsharbor仓库中导入后续实验所需的镜像_阿里云服务器pod管理

在HP安腾主机上安装HPUX 11.31系统_hpux efi-程序员宅基地

文章浏览阅读5k次,点赞3次,收藏4次。在HP安腾主机上安装HPUXV3示例:1、在10秒中断处按任意键,进入EFI菜单2、在EFI菜单中使用上下键选择菜单3、选择EFI SHELL菜单,系统自动选择光盘启动,如未能自动启动光盘安装程序,请在shell>map命令,以列出可启动的设备,如此时列出fs0为光驱,则shell>fs0:回车后,fs0:\>install此时可启动安装4、等待两分钟5、进入安装第一步,选_hpux efi

mybatis批量插入并返回主键(xml和注解两种方式)_mybatis 执 批量插 ,能返回数据库主键列表吗?-程序员宅基地

文章浏览阅读3.7w次,点赞26次,收藏72次。mybatis批量插入在mysql数据库中支持批量插入,所以只要配置useGeneratedKeys和keyProperty就可以批量插入并返回主键了。比如有个表camera,里面有cameraNo,chanIndex,cameraName这三个字段,其中cameraNo是自增主键。下面是批量插入的Dao层接口:void batchInsertCameras(@Param("li..._mybatis 执 批量插 ,能返回数据库主键列表吗?

推荐文章

热门文章

相关标签