JQuery 介绍
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
JQuery引入
1.下载:
官方网站([下载地址:](https://jquery.com/))下载JQuery
2.引入:
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
JQuery基本选择器
| 格式 | 说明 |
|---|
| $( * ) | 选择所有 |
| $( 标签名 ) | 标签选择器 |
| $( #id ) | ID选择器 |
| $( .class ) | 类选择器 |
JQuery对象
- JQuery对象习惯性采用$开口,例如: $div = $(“div”);
- JQuery对象的格式是[Object]
- JQuery对象转JS对象 jsObject = $jqueryObject[0]; jsObject = $jqueryObject.get(0);
- JS对象 转JQuery对象 $jqueryObject = $(jsObject);
JQuery事件
| 命令 | 说明 |
|---|
| click() | 鼠标点击 |
| dblclick() | 鼠标双击 |
| keydown() | 键盘按下 |
| keypress() | 键盘按住 |
| keyup() | 键盘抬起 |
| focus() | 得到焦点 |
| blur() | 失去焦点 |
| scroll() | 滚动事件 |
| select() | 选中 |
| submit() | 提交 |
| load() | 加载成功 |
| unload() | 离开页面 |
| resize() | 窗口尺寸调整 |
| mousedown() | 鼠标按下 |
| mouseup() | 鼠标抬起 |
| mouseenter() | 鼠标穿过 |
| mouseleave() | 鼠标离开 |
| mousemove() | 鼠标移动 |
| mouseover() | 鼠标位于元素上方 |
| mouseout() | 鼠标离开 |
Jquery动画
| 命令 | 说明 |
|---|
| show(speed,callback) | 显示 |
| hide(speed,callback) | 隐藏 |
| fadeIn(speed,callback) | 淡入 |
| fadeOut(speed,callback) | 淡出 |
| slideDown(speed,callback) | 向下滑动 |
| slideUp(speed,callback) | 向上滑动 |