jQuery

jQuery介绍与使用

一、jQuery介绍

jQuery 是一个JavaScript库，是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery相比JavaScript优点：

jQuery的onload加载事件速度更快，并且多个加载并行
jQuery绑定事件都是使用的事件函数，不需要加on；
JavaScript的onload加载事件，后面的覆盖前面的；
在jQuery中，$( )是其运行环境；
jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。

jQuery 极大地简化了 JavaScript 编程

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

二、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>

CDN方式引用 - 百度CDN

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

Vue项目中引用jQuery

安装

npm install jquery --save

修改配置文件

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

const webpack = require('webpack')

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

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  }),
]
//  $函数会自动添加到当前模块的上下文，无需显示声明

在项目中引用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>

基础语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

jQuery语法

$(document).ready(function(){
  // 开始写 jQuery 代码...
});

jQuery简洁语法

$(function(){
  // 开始写 jQuery 代码...
});

# jQuery

# jQuery介绍与使用

# 一、jQuery介绍

# 二、jQuery教程

jQuery

jQuery介绍与使用

一、jQuery介绍

二、jQuery教程