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) |
向上滑动 |