1. jQuery选择器
1.1 jQuery基础选择器
| 名称 | 用法 | 描述 |
|---|
| ID 选择器 | $(“#id”) | 获取指定 ID 元素 | | 全选选择器 | $(“*”) | 匹配所有元素 | | 类选择器 | $(“.class”) | 获取同一类 class 的元素 | | 标签选择器 | $(“div”) | 获取同一类标签的所有元素 | | 并集选择器 | $(“div,p,li”) | 选取多个元素 | | 交集选择器 | $(“li.current”) | 交集元素 |
1.2 jQuery 层级选择器
| 名称 | 用法 | 描述 |
|---|
| 子代选择器 | $(“ul>li”) | 使用 > 符号，获取子一代层级元素 | | 后代选择器 | $(“ul li”) | 使用空格，后代选择器，获取 ul 下的所有 li 元素 |
1.3 隐式迭代
- 遍历内部 DOM 元素的过程
- 将匹配到的所有元素进行循环遍历
1.4 jQuery 筛选选择器
| 语法 | 用法 | 描述 |
|---|
| :list | $(“li:list”) | 获取第一个 li 元素 | | :last | $(“li:last”) | 获取最后一个 li 元素 | | :eq(index) | $(“li:eq(2)”) | 获取第二个 li 元素，索引号从0开始 | | :odd | $(“li:odd”) | 获取索引号为奇数的 li 元素 | | :even | $(“li:even”) | 获取索引号为偶数的 li 元素 |
1.5 jQuery 筛选方法
| 语法 | 用法 | 描述 |
|---|
| parent() | $(“li”).parent() | 查找 li 父级元素 | | children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”)，查找 ul 子一代 li 元素 | | find(selector) | $(“ul”).find(“li”) | 相当于$(“ul li”)，查找 ul 后代所有 li 元素 | | siblings(selector) | $(“.class”).siblings(“.class2”) | 查找兄弟节点，不包括自己 | | nextAll([expr]) | $(“.class”).nextAll() | 查找当前元素之后的所有同级元素 | | prevtAll([expr]) | $(“.class”).prevAll() | 查找当前元素之前的所有同级元素 | | hasClass(class) | $(“div”).hasClass(“.class”) | 检查当前元素是否含有 .class 类，如果有就返回 true | | eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2)”)，索引从0开始 |
2. jQuery 样式操作
2.1 操作 css 方法
| 语法 | 用法 | 描述 |
|---|
| css(name) | $(this).css(“color”); | 返回属性值 | | css(name , value) | $(this).css(“color”,“red”); | 设置或修改样式，数字可以不加引号和单位 | | css(name : value , name : value ) | $(this).css(“color”:“red”,“font-size”:“20px”) | 参数以对象形式，设置多组样式 |
2.2 设置类样式方法
| 语法 | 用法 | 描述 |
|---|
| addClass() | $(“div”).addClass(“class”) | 添加类 | | removeClass() | $(“div”).removeClass(“class”) | 移除类 | | toggleClass() | $(“div”).toggleClass(“class”) | 切换类 |
2.3 类操作与 className 区别
- 原生 js 中 className 会覆盖元素原来里面的类名
- jQuery 里面类操作对指定类进行操作，不影响原来的类名
3. jQuery 效果
参数可以省略
- speed：速度（slow，normal，fast 或者毫秒值）
- easing：指定切换效果（swing（默认），linear）
- opacity：透明度（0-1之间）
- fn：回调函数
3.1. 显示隐藏效果
| 语法 | 用法 | 描述 |
|---|
| show() | $(“div”).show(speed,easing,fn); | 显示 | | hide() | $(“div”).hide(speed,easing,fn); | 隐藏 | | toggle() | $(“div”).toggle(speed,easing,fn); | 切换 |
3.2. 淡入淡出效果
| 语法 | 用法 | 描述 |
|---|
| fadeIn() | $(“div”).fadeIn(speed,easing,fn); | 淡入 | | fadeOut() | $(“div”).fadeOut(speed,easing,fn); | 淡出 | | fadeIToggle() | $(“div”).fadeIToggle(speed,easing,fn); | 切换 | | fadeTo | $(“div”).fadeTo(speed,opacity,easing,fn); | 渐变切换 |
3.3 滑动效果
| 语法 | 用法 | 描述 |
|---|
| slideDown() | $(“div”).slideDown(speed,easing,fn); | 下滑 | | slideUp() | $(“div”).slideUp(speed,easing,fn); | 上滑 | | slideToggle() | $(“div”).slideToggle(speed,easing,fn); | 切换 |
3.4 自定义动画
- params：动画 css 属性，对象形式（必须写）
| 语法 | 用法 | 描述 |
|---|
| animate() | $(“div”).slideDown(params,speed,easing,fn); | 自定义动画 |
3.5 事件切换
- over：鼠标移动到元素上触发的函数（相当于 mouseenter）
- out：鼠标移出元素触发的函数（相当于 mouseleave）
| 语法 | 用法 | 描述 |
|---|
| hover(over,out) | $(“div”).hover(fn1,fn2); | 鼠标事件切换 |
3.6 停止动画队列
| 语法 | 用法 | 描述 |
|---|
| stop() | $(“div”).stop() | 防止动画效果多次触发，将 stop() 写到动画效果前面会停止上一次动画 |
4. jQuery 属性操作
4.1 设置和获取元素固有属性
| 语法 | 用法 | 描述 |
|---|
| prop(name) | $(“a”).prop(“href”) | 获取属性 | | prop(name,value) | $(“input”).prop(“checked”,true) | 设置属性 |
4.2 设置和获取元素自定义属性值
| 语法 | 用法 | 描述 |
|---|
| attr(name) | $(“img”).attr(“src”) | 获取属性 | | attr(name,value) | $(“img”).attr(“width”,“200”) | 设置属性 |
4.3 数据缓存 data()
| 语法 | 用法 | 描述 |
|---|
| data(name) | $(“div”).attr(“data-temp”) | 获取属性 | | data(name,value) | $(“div”).attr(“data-temp”,1) | 设置属性 |
5. jQuery 内容文本值
5.1 普通元素内容 html()
| 语法 | 用法 | 描述 |
|---|
| html() | $(“p”).html() | 获取元素的内容 | | html(value) | $(“p”).html(“hello”) | 设置元素的内容 |
5.2 普通元素文本内容 text()
| 语法 | 用法 | 描述 |
|---|
| text() | $(“p”).text() | 获取元素的文本内容 | | text(value) | $(“p”).text(“hello”) | 设置元素的文本内容 |
5.3 文本框（表单）值 val()
| 语法 | 用法 | 描述 |
|---|
| val() | $(“input”).val() | 获取元素的文本框值 | | val(value) | $(“input”).val(“hello”) | 设置元素的文本框值 |
6. jQuery 元素操作
6.1 遍历元素
- index：每个元素的索引号
- domEle：每个 DOM 元素对象
- element：遍历的内容（值）
| 语法 | 用法 |
|---|
| each() | $(“div”).each(function (index,domEle){}) | | $.each() | $.each(object,function (index,element){}) |
6.2 创建元素
$("<li>hello<li>");
6.3 添加元素
- 内部添加（添加完是父子关系）
| 语法 | 用法 | 描述 |
|---|
| append(value) | $(“p”).append(value)： | 将内容添加到匹配元素（p）内部的最后面 | | prepend(value) | $(“p”).prepend(value)： | 将内容添加到匹配元素（p）内部的最前面 |
- 外部添加（添加完是兄弟关系）
| 语法 | 用法 | 描述 |
|---|
| after(value) | $(“p”).after(value)： | 将内容添加到目标元素（p）的后面 | | before(value) | $(“p”).before(value)： | 将内容添加到目标元素（p）的前面 |
6.4 删除元素
| 语法 | 用法 | 描述 |
|---|
| remove() | $(“p”).remove() | 删除匹配的元素包括自己 | | remove(“.class”) | $(“p”).remove(“.class”) | 删除匹配元素中含有 class 类的元素 | | empty() | $(“p”).empty() | 删除匹配的元素集合中所有的子节点 | | html(“”) | $(“p”).html(“”) | 清空匹配的元素内容（将内容改为空） |
7. jQuery 尺寸和位置操作
7.1 jQuery 尺寸
- 参数为空时，获取相应的值（返回的是数字类型）
- 参数为数字时，修改相应的值
- 参数不必写单位
| 语法 | 用法 | 描述 |
|---|
| width() / height() | $(“p”).width() / $(“p”).height() | 取得匹配元素的宽度值 / 高度值，只算 width / height | | innerWidth() / innerHeight() | $(“p”).innerWidth() / $(“p”).innerHeight() | 取得匹配元素的宽度值 / 高度值，包含 padding | | outerWidth() / outerHeight() | $(“p”).outerWidth() / $(“p”).outerHeight() | 取得匹配元素的宽度值 / 高度值，包含 padding，border | | outerWidth(options) / outerHeight(options) | $(“p”).outerWidth(true) / $(“p”).outerHeight(true) | 取得匹配元素的宽度值 / 高度值，包含 padding，border，margin，options为 true 时，计算边距在内 |
7.2 jQuery 位置
| 语法 | 用法 | 描述 |
|---|
| offset() | $(“div”).offset() | 获取匹配元素相对于文档的偏移坐标 | | offset(value) | $(“div”).offset({top:10,left:10}) | 设置匹配元素相对于文档的偏移坐标 | | position() | $(“div”).position() | 获取匹配元素相对于带有定位的父级元素的偏移坐标，不可以加参数 | | scrollTop() | $(“div”).scrollTop() | 获取匹配元素相对顶部的偏移（元素超出上边界的高度） | | scrollTop(value) | $(“div”).scrollTop(200) | 设置匹配元素相对顶部的偏移（元素超出上边界的高度） | | scrollLeft() | $(“div”).scrollLeft() | 获取匹配元素相对左侧的偏移（元素超出左边界的宽度） | | scrollLeft(value) | $(“div”).scrollLeft(200) | 设置匹配元素相对左侧的偏移（元素超出左边界的宽度） |
|