P2M5T1~T4

jQuery 的常用操作

在 jQuery 中 只有一个全局变量 $，它和 jQuery() 通用

jQuery 对象

通过 $() 获取的对象，是jQuery 对象，其中封装了大量的专用方法，比如 .css()、.html()

jQuery 对象只能使用 jQuery 对象的方法，不能使用原生 js 元素对象的方法；原生 JS 对象也不能使用 jQuery 的方法

通过 $() 获取的 jQuery 对象是成组的元素，进行操作时是批量操作。实际上它是一个类数组对象，包含了选中的元素和其他的 jQuery 方法、属性。

jQuery 对象和原生对象的转换#5

获取 jQuery 对象长度（个数）的方法：$().length $().size()

jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象

原生转 jQuery：将原生对象用 $() 方法包裹即可。

jQuery 选择器#6

大部分 CSS2.1 和 CSS3 选择器都是支持的

特例：

• :input 选中所有的表单元素，包括 input、textarea、button

筛选选择器#7

过滤选择器，为 jQuery 新增的功能

• $(":first") 第一个
• $(":last") 最后一个
• $(":eq(index)") 下标为 index 的项
• $(":gt(index)") 大于下标为 index 的项
• $(":lt(index)") 小于下标为 index 的项
• $(":odd") 下标为奇数的项
• $(":even") 下标为偶数的项
• $(":not(selector)") 排除所有与给定选择器匹配的元素

筛选方法

• $("p").first()
• $("p").last()
• $("p").eq(3)

jQuery 案例

插件

修改元素内容的方法

html() 方法#1

相当于 innerHTML

• 参数：字符串，用于修改元素内容
  • 批量修改
  • 字符串内含有的标签元素会按照 HTML 加载
• 返回值：无实参时，返回获取到的第一个元素的内容

text() 方法#2

相当于 innerText

• 参数：字符串

val() 方法#3

针对单标签元素，例如<input>。相当于 JavaScript 中元素对象的 value 属性。

对<select>使用时，获取的是当前选中的<option>的 value 值。

jQuery 操作标签的属性

attr() 方法

• 参数：
  1. 属性名，字符串
  2. （可选）要修改为的属性值，字符串

获取单值属性时，无法得到布尔值

removeAttr() 方法

删除属性

• 参数：属性名，字符串

prop() 方法

获取单值属性，包括 selected、checked、disabled，能得到布尔值

• 参数：

  1. 属性名，字符串

  2. （可选）要修改为的属性值，布尔值

操作 CSS 样式

css() 方法

• 获取对应CSS样式属性值
• 更改属性值

设置多条 CSS 属性，可以以对象形式传参

操作类名的方法

addClass() 方法

removeClass() 方法

• 参数：要删除的类名，字符串

  没有参数时，删除所有类名

toggleClass() 方法

有则删除，无则添加

• 参数：一个类名，字符串

hasClass() 方法

判断某类名在对象上是否存在

• 返回值：布尔值

常用作判断条件

事件方法#9

支持原生事件，不需加 ’on'

新增：

• mouseenter()，mouseleave()

  没有事件冒泡现象，根据实际情况使用。

  需要事件冒泡时，还用 mouseover() 和 mouseout()

• hover()

  参数有两个函数，前后分别对应鼠标移上、鼠标移出。

  相当于合并了 mouseenter() 和 mouseleave()

节点关系查找方法

要使用 jQuery 方法，this 需要转换成 jQuery 对象 $(this)

• parent()

  获得该对象的父级元素对象

• children()

  获得该对象的子级元素组成的对象

  参数：

  • （可选）选择器，字符串。在子级中二次筛选。

• siblings()

  获得除自身外的其他兄弟元素组成的对象

  参数：

  • 同 children()

链式调用#12

jQuery 的方法（除了节点关系方法）执行完后，都会有一个返回值，就是 jQuery 对象自己，方便接续调用 jQuery 方法和属性。

其他节点关系方法#13

• find()

  选中所有后代中符合条件的对象

  参数：

  • 选择器，字符串。

• next()、prev()

  选中下一个或前一个兄弟元素对象

  参数：（可选）选择器

• nextAll()、prevAll()

  选中后面或前面的所有兄弟元素对象

  参数：（可选） 选择器

• parents()

  选中所有的祖先级元素对象，不限于父级。

综合案例

• 验证码发送按钮#13
• 放大镜切换项#14

jQuery 对象中的排序

eq() 大排序 #1

eq() 在 jQuery 对象中通过下标获取某个对象，参数是调用者 jQuery 对象中所有元素的下标排序，这个排序与 HTML 中的层级结构没有关系。

index() 在兄弟中的排序 #2

index() 返回该元素对象在 HTML 下兄弟元素中的下标位置。

jQuery 中的排他效果 #3

一步完成：this 特殊设置，兄弟 siblings 设置为默认。

【案例】tab 栏

• 依然是为元素添加下标属性，利用同下标位置为对应元素设置
• 选择对应位置的同步元素时，可以利用节点关系选中，避免使用 CSS 选择器选中范围过大。

each() 遍历 #5

• 参数：对每一项成员对象执行的操作，函数

  执行函数

  • 可传参 i，代表本次循环的对象在整体大排序中的下标位置。

  • 内部 this 指向每一次循环的对象

【案例】表格隔列变色 #6

对一整个表格做隔列变色，

使用 each() 方法以行为单位，选中奇数或偶数单元格。

jQuery 入口函数 #7

原生 JavaScript 的入口函数：window.onload

• 等待 DOM 树、音频、视频、图片等资源全部加载完毕后执行
• 页面中只能出现一次

jQuery 入口函数：$(document).ready(function () {});

简化写法：$(function () {});

• 等待 DOM 树加载完即执行
• 页面中可以有多个 jQuery 入口函数，按先后顺序执行

jQuery 中切换效果的方法 #8

元素显示和隐藏方法 #8

方法：

• hide() 隐藏元素。前提是元素 display:block；

• show() 显示元素，前提是元素 display:none;

• toggle() 自动切换隐藏和显示

效果：显示切换过程中，伴随着宽度和高度以及透明度的变化。

参数：

• speed：动画时间。默认值：'normal'
  • 关键字：'normal'、'slow'、'fast'
  • 数字：以毫秒为单位的时间
• easing：动画速度。关键字：'linear'、'swing'等

滑动显示隐藏 #9

方法：slideDown() 滑动显示、

​ slideUp() 滑动隐藏

效果：有 width，仅高度变化的上下垂直方向的展开、收起；

​ 没有 width，宽高同时变化的缩放效果。

参数：同上，不传参默认400ms

【注意】展开收起方向可能发生变化，比如元素依 bottom 定位脱标，展开变为从下往上，即从参考点开始。默认参考点都是左上角。

淡入淡出 #10

方法：fadeIn() 淡入，透明度逐渐增大最终显示

​ fadeOut() 淡出，透明度逐渐降低最终隐藏

​ fadeToggle() 自动切换

效果：透明度渐变

参数：同上，不传参默认400ms

fadeTo() 淡入或淡出到某个指定的透明度，第一个参数控制速度，第二个参数为0~1之间的透明度

jQuery 中的动画

animate() 动画方法 #11

$(selector).animate(*styles,speed,easing,callback)

参数：

• styles：CSS 样式，对象。必填

  【注意】bakcground-color 等属性没有动画效果，因此不支持 animate() 改变。

• speed

  【常用】时间参数常放入 during 变量中。

• easing

• callback：动画完毕后要执行的函数。

动画排队 #12

同一对象多次调用动画，动画会按先后顺序排队执行，包括 animate()、fadeIn() 等。非运动相关的命令不受影响。

对不同对象的动画，不会排队，同时开始。

【常用】同一对象的动画写为链式调用（也会排队）

delay() 动画延迟 #13

在动画调用前调用 delay()，参数为毫秒时间

stop() 动画停止 #14

stop(p1,p2)

参数：

• p1：是否清空后面的动画排队，布尔值。默认值：false

  • true：清空后面的动画排队
  • false：只结束当前动画，即提前进入下一动画

• p2：当前动画是否立即完成，布尔值。默认值：false

  • true：当前动画立即完成，对象会立刻走到结束位置
  • false：不完成当前动画，立即停止在当前位置

  一共有四种停止方式

【常用】工作中，常用需求是清空列队并停止在当前位置，即 stop(true)

清空动画排队 #15

避免事件函数多次触发造成的动画累积

• 法一：

  在每次的个运动函数之前都增加一个 stop(true)，表示在运动执行之前，会将前面排队的动画清空，然后停止在当前位置。

• 法二：

  函数节流方法，如果元素在运动，直接 return，不要执行后面的运动代码

  在每个事件函数内，加前置判断，is(':animated') 作判断条件，若为真即 return

综合案例

• 下拉菜单
• 手风琴轮播图
• 淡入淡出轮播

jQuery 节点操作

• 创建元素节点

  $('

  ')

  参数：创建的元素 HTML 代码，字符串。

追加元素

• 将创建的元素节点添加到某一元素（父元素）下：

  • 父元素对象调用方法：

    $parent.append($child)、$parent.prepend($child)

    添加到父元素下最后或最前，参数是 jQuery 对象。

  • 子元素对象调用方法：

    $child.appendTo($parent)、$child.prependTo($parent)

    添加到父元素下最后或最前，参数可以是 jQuery 对象或字符串形式的 CSS 选择器。

• 将新创建元素节点添加到某一元素（兄弟元素）同级：

  • 目标位置元素对象调用方法：

    $brother.after($new)、$brother.before($new)

    在该元素后或前插入新元素

  • 新建元素对象调用方法：

  ​ $new.insertAfter($brother)、$new.insertBefore($brother)

  ​ 将新元素插入到目标元素后面或前面，参数可以是 jQuery 对象或字符串形式的 CSS 选择器。

删除元素

remove()

清空元素

• empty() 清空调用者对象内部的所有元素即元素相关的事件。【常用】

• $obj.html('') 替换 HTML 内容为空，仅清空内部元素，不清理内存中的相关事件

克隆元素

clone()

参数：布尔值。默认值：false

• true：克隆内容和事件
• false：仅克隆内容

返回值：克隆出来的新元素

jQuery 操作元素的尺寸

元素的宽高

• width()、height()

  content 区域的宽高

  返回不带单位的宽高数值，也可传入参数来设置宽高

• innerWidth()、innerHeight()

  返回 content 和 padding 的宽高

  传参修改时，padding 不变，content 的宽高变化

• outerWidth()、outerHeight()

  返回 content、padding、border 的宽高

  传参修改时，padding、border 不变，content 的宽高变化

jQuery 操作元素的位置

获取元素位置 #5

• offset()

  返回值：元素位置，一个包含 left、top 的对象

  ​ 【注意】其参考对象始终是 document，与定位无关。

• position()

  返回值：以最近定位元素为参考的位置，一个包含 left、top 的对象

获取滚动距离

scrollTop()

返回滚动条距离顶部的距离

可以传数字修改

综合案例

• 固定导航
• 返回顶部
• 楼梯效果