目录
jQuery
jQuery简介
- jQuery是主流的轻量级JavaScript库
- jQuery提供了大量的高效方法，开发速度大幅度提升
- jQuery的核心就是选择器
jQuery下载
下载地址：生产版：https://code.jquery.com/jquery-3.4.1.min.js
开发版：https://code.jquery.com/jquery-3.4.1.js
jQuery常用选择器
语法：$(表达式) 或 jQuery(表达式)
基本选择器
| 语法 | 说明 |
|---|---|
| $("#id") | id选择器，选择指定id元素对象 |
| $("标签") | 元素选择器，选择指定标签对象 |
| $(".class") | 类选择器，选择指定类对象 |
| $("S1,S2,S3...,SN") | 组合选择器 |
层叠选择器
| 语法 | 说明 |
|---|---|
| $("A B") | 后代选择器 |
| $("A>B") | 子选择器 |
| $("A~B") | 兄弟选择器 |
属性选择器
| 语法 | 说明 |
|---|---|
| $("selector[attribute=value]") | 选中属性值等于该值得组件 |
| $("selector[attribute^value]") | 选中以该值开头的组件 |
| $("selector[attribute$value]") | 选中以该值结尾的组件 |
| $("selector[attribute*value]") | 选中包含该值得组件 |
位置选择器
| 语法 | 说明 |
|---|---|
| $("selector:first") | 获取第一个元素 |
| $("selector:last") | 获取最后一个元素 |
| $("selector:even") | 获取偶数行元素（从0开始） |
| $("selector:odd") | 获取奇数行元素（从0开始） |
| $("selector:eq(n)") | 获取指定位置的元素 |
表单选择器
| 语法 | 说明 |
|---|---|
| $("selector:type") | 获取表单中指定type元素 |
jQuery操作元素属性
- attr(name,value) 获取或者设置属性
例：var href=$("a").attr(href); $("a").attr("href","https://www.baidu.com");
ps:获取属性时只会返回第一个获取到的，而设置属性则会设置全部选择到的
- removeAttr(name) 移除元素属性
jQuery操作元素的CSS样式
- css() 获取或设置元素的CSS样式 css(JSON表达式)可设置多个属性值
- addClass() 为匹配元素添加指定的类名
- removeClass() 为匹配元素删除指定的类
jQuery设置元素内容
- val() 获取或设置输入项的值
- text() 获取或设置元素的纯文本
- html() 获取或设置元素内部的HTML
PS：text()与html()最大的区别在于对文本中的HTML标签是否进行转义
jQuery事件处理方法
语法：on("事件",function) 简写：事件(function)
$(this)指当前事件产生的对象
jQuery常用事件
| 鼠标事件 | 键盘事件 | 表单时间 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dbclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| mouseover |
jQuery页面就绪函数
页面就绪函数指的是在页面加载完成后执行的函数
语法 ： $(document).ready(function)
$(function)
jQuery动画
- 三种方式显示和隐藏元素
- 默认显示和隐藏方式
show([speed,[easing],[fn]])hide([speed,[easing],[fn]])toggle([speed],[easing],[fn])
- 滑动显示和隐藏方式
slideDown([speed],[easing],[fn])slideUp([speed,[easing],[fn]])slideToggle([speed],[easing],[fn])
- 淡入淡出显示和隐藏方式
fadeIn([speed],[easing],[fn])fadeOut([speed],[easing],[fn])fadeToggle([speed,[easing],[fn]])
- 默认显示和隐藏方式
参数说明：
speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
easing：用来指定切换效果，默认是"swing"，可用参数"linear"
- swing：动画执行时效果是 先慢，中间快，最后又慢
- linear：动画执行时速度是匀速的
fn：在动画完成时执行的函数，每个元素执行一次。