"jQuery动画-jQuery课件"
jQuery是2006年由John Resig创建的一个轻量级的JavaScript库,它的出现极大地简化了JavaScript的使用,尤其在网页交互、元素操作、动态效果等方面。jQuery的核心特性可以概括为:选择器、DOM操作、事件处理和动画效果。
### jQuery 动画
jQuery 动画主要包括四个类别:
1. **基本动画函数**:这是最常用的动画函数,可以实现元素的位置变化和透明度渐变。例如,`fadeIn()` 和 `fadeOut()` 用于元素的淡入淡出,`slideToggle()` 实现元素的上下滑动显示或隐藏。
2. **滑动动画函数**:专门处理元素的滑动效果。例如,`slideUp()` 和 `slideDown()` 使得元素沿着垂直方向逐渐显示或隐藏,而 `slideToggle()` 结合了两者,可以在展开和折叠之间切换。
3. **淡入淡出动画函数**:主要处理元素的透明度变化。`fadeIn()` 用于元素渐渐变得可见,`fadeOut()` 则是元素逐渐消失,`fadeTo()` 允许我们精确控制元素的透明度级别。
4. **自定义的动画函数**:开发者可以根据需求定义自己的动画效果。使用 `animate()` 函数,可以指定一组CSS属性及它们的终点值,从而创建复杂的动画效果。
### jQuery 入门
要开始使用jQuery,首先需要在HTML页面中引入jQuery库,例如引入`jquery-1.9.1.min.js`:
```html
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
```
然后,我们可以利用`$(document).ready()`来确保在DOM加载完成后再执行jQuery代码:
```javascript
$(document).ready(function() {
alert("Hello World!");
});
```
这个结构的简写形式是:
```javascript
$(function() {
// 代码
});
```
### jQuery 选择器
jQuery 提供了丰富的选择器,便于快速准确地选取DOM元素:
- `#id`:基于ID选择元素,例如`$('#div1')`选择id为`div1`的元素。
- `.class`:根据类名选择元素,如`$('.first')`选择所有类名为`first`的元素。
- `tagname`:按标记名选择元素,如`$('input')`选择所有`<input>`元素。
- `*`:选择所有元素,`$('*')`将选取页面上的每一个元素。
- `selector1, selector2, ...`:组合选择器,允许选取符合多个条件的元素。
此外,jQuery还支持更复杂的选择器,如属性选择器、子元素选择器、相邻兄弟选择器等,极大地提高了代码的灵活性和效率。
### jQuery 事件处理
jQuery 提供了一种简洁的方式来绑定和处理页面事件,例如:
```javascript
$('button').click(function() {
// 点击按钮时执行的代码
});
```
### 动画方法创建简单动画
jQuery 动画方法如 `fadeIn()`, `slideUp()`, `animate()` 等,可以轻松创建各种动态效果。例如,使用 `animate()` 创建一个简单的移动动画:
```javascript
$('div').animate({
left: '+=50',
opacity: '0.5'
}, 1000);
```
这段代码将使选择的`<div>`元素在1秒内向左平移50像素,并逐渐变为50%的透明度。
jQuery通过提供强大的选择器、事件处理和动画功能,极大地简化了JavaScript在网页开发中的应用,使得开发者能更高效地实现丰富的交互效果和动态体验。