jQuery入门
目录
1、什么是jquery？
2、jquery下载安装
2.1、方式一官网下载
2.2、方式二引入谷歌和微软服务器的jQuery
3、jQuery语法
3.1、元素选择器
3.2、属性选择器
3.3、CSS选择器
3.4、事件函数
3.5、hide()隐藏函数
4、jQuery效果
4.1、隐藏/显示
4.2、淡入/淡出
4.3、滑动
4.4、动画
4.5、stop函数停止动画
4.6、函数链接
前言：学习jQuery之前，必须先学习HTML+CSS+JS，后学jQuery才会更加简单。
1、什么是jquery？
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 学习很容易。
2、jquery下载安装
jQuery的安装有二种方式，一种就是从官方网站进行下载，这里我提供一个1.8.3版本的jQuery文件，请自行提取。
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩，以后部署服务器用的都是精简版本。
Development version - 用于测试和开发（未压缩，是可读的代码），开发练习使用这个就可以了。
2.1、方式一官网下载
链接：https://pan.baidu.com/s/1p_-XkROq65rSKpPS745HRg
提取码：bs8c
如果不想用这个版本，也可自习到官网下载，这里提供官网地址：Download jQuery | jQuery
下载完之后，把jQuery文件放到项目的js包下
在html中引入jQuery文件，这里使用script标签，src属性填写jQuery文件存放路径。 （注意：我这里是js包与html文件是同级关系，所以js前面不用写/）。
2.2、方式二引入谷歌和微软服务器的jQuery
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它，这里是谷歌服务器里面的jQuery，可以直接引入，不用再下载jQuery文件。
谷歌：
微软：
3、jQuery语法
3.1、元素选择器
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有
元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
3.2、属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.txt']") 选取所有 href 值以 ".txt" 结尾的元素。
3.3、CSS选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
我要变绿
我要变蓝
我要变黄
3.4、事件函数
事件函数指的是：当按钮的点击事件被触发时会调用一个函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
| 事件函数 | 说明 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
3.5、hide()隐藏函数
hide()隐藏函数相当于js中的display:none，指的是让元素隐藏功能。
文档就绪函数
$(document).ready(function(){
// jQuery functions go here
});
点我消失
点我消失
点我消失
4、jQuery效果
4.1、隐藏/显示
| 函数 | 说明 |
|---|---|
| JQuery hide() | 隐藏 |
| JQuery show() | 显示 |
| jQuery toggle() |
切换 hide() 和 show() 方法 |
hide()和show()以及toggle()是可以进行填写毫秒值来延迟隐藏/显示效果的。
如果点击“隐藏”按钮，我就会消失。
这是一个段落。
这是另一个段落。
4.2、淡入/淡出
| 函数 | 说明 |
|---|---|
| fadeIn() | 淡入已隐藏的元素 |
| fadeOut() | 用于淡出可见元素 |
| fadeToggle | 可以在 fadeIn() 与 fadeOut() 方法之间进行切换 |
| fadeTo() | 方法允许渐变为给定的不透明度（值介于 0 与 1 之间） |
演示带有不同参数的 fadeIn() 方法。
4.3、滑动
| 函数 | 说明 |
|---|---|
| slideDown() | 用于向下滑动元素 |
| slideUp() | 用于向上滑动元素 |
| slideToggle() | 可以在 slideDown() 与 slideUp() 方法之间进行切换 |
欢迎光临本网站
请您先进行注册
展开/收起
4.4、动画
animate函数
默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
动画的排队执行
默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
动画右移字体变大
默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
HELLO
4.5、stop函数停止动画
4.6、函数链接
一次写一条 jQuery 语句（一条接着另一条）很麻烦，不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
jQuery 乐趣十足！