jQuery学习
目录
1.什么是jQuery?
jQuery是一个轻量级的JavaScript函数库
特征：”写的少，做的多“
2.jQuery功能
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX
- Utilities
- 还有大量插件
3.为什么使用jQuery?
jQuery是目前最流行的JS框架，而且提供了大量的扩展
4.如何使用？
1.jQuery安装
可以在本地下载后引入jquery，也可以采用cdn的方式，比如说：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
在控制台上可以使用$.fn.jquery命令查询你使用jquery版本
2.jQuery语法
基础语法：
$(selector).action()
$符号代表jQuery，
selector是选择符，实际值为要查询或者查找的HTML元素，比如”h1“,"p"，再补充一个this,
action()表示对元素进行的操作，比如说hide()隐藏,show()显示
$("h1").hide("fast");
这句话的意思是隐藏标签为
的元素，参数为“fast”,快速隐藏，补充：有的操作是可以添加参数的，具体使用什么参数请查看文档。
3.jQuery选择器
-
元素选择器
-
id选择器
-
.class选择器
测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.class选择器</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> $(document).ready(function (){ // $("button").click(function (){ // $("p").hide(); // }) $("#demo").click(function (){ $("#demo").hide(); }) $("button").click(function (){ $(".test").hide(); }) }) </script> </head> <body> <h1>我是一个标题</h1> <p>这是一个段落</p> <p id="demo">id为demo的段落</p> <p class="test">class为test的段落</p> <button>按钮</button> </body> </html>更多实例：
元素 元素$("*") 选取所有元素 在线实例 $(this) 选取当前 HTML 元素 在线实例 $("p.intro") 选取 class 为 intro 的 元素
在线实例 $("p:first") 选取第一个 元素
在线实例 $("ul li:first") 选取第一个 - 元素的第一个
- 元素
在线实例 $("ul li:first-child") 选取每个 - 元素的第一个
- 元素
在线实例 $("[href]") 选取带有 href 属性的元素 在线实例 $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 元素 在线实例 $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 元素 在线实例 $(":button") 选取所有 type="button" 的 元素 和 在线实例 $("tr:even") 选取偶数位置的 在线实例 $("tr:odd") 选取奇数位置的 在线实例
4.jQuery事件
在元素在移动鼠标
选取单选按钮
点击元素
常见的DOM事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress（键按下） | submit | load |
| dblclick（双击） | keydown（键按下的过程） | change | resize（浏览器窗口调整大小） |
| mouseenter（鼠标进入） | keyup（键被松开） | focus（获得焦点） | scroll（滚动） |
| mouseleave（鼠标离开） | blur（失去焦点） | unload（离开页面） | |
| hover（鼠标悬停再被选元素上时） | ready（当DOM准备就绪时，指定一个函数来执行） | ||
| holdReady 暂停或恢复ready()事件的执行 |
5.jQuery效果
hide() 隐藏
show()显示
toggle()相当于切换显示隐藏和显示
fadeIn()淡入
fadeOut()淡出
fadeToggle()相当于切换显示淡入和淡出
fadeTo("slow","0.7")设置透明度，值在0~1之间
可以带有参数：“slow”,"fast"以及毫秒单位的数值
6.jQuery HTML
捕获内容和设置内容：
text()设置或返回所选元素的文本内容
html()设置或返回所选元素的内容（包括HTML标记）
val()设置或返回表单字段的值
attr()获取属性
添加元素内容：
append()在文本后面添加
prepend()在文本开头前面追加
移除元素：
remove()删除备选元素以及子元素，可以添加参数进行删除过滤
empty()删除子元素
css操作
addClass()向备选添加一个或者多个类
removeClass()从备选元素中删除一个或者多个类
toggleClass()对被选元素进行添加/删除的切换操作
css()设置和返回样式属性，也可以设置多个css属性
尺寸：
- width()设置或者返回元素的宽度
- height()设置或者返回元素的高度
- innerWidth()返回元素的宽度，包括内边距
- innerHeight()返回元素的高度，包括内边距
- outerWidth()返回元素的高度，包括内边距和边框
- outerHeight()返回元素的高度，包括内边距和边框