jQuery 的基本操作 属性 文本 元素 尺寸 位置

一、jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data()

获取属性： 传入一个参数，属性名
设置属性： 传入两个参数，属性名，属性值

1. 元素固有属性值 prop()
   注意： prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等
2. 元素自定义属性值 attr() 可以操作所有自定义属性
3. 数据缓存 data() 专门操作 data- 开头的自定义属性
   注意： 还可以读取 HTML5 自定义属性 data-index ，得到的是数字型

属性选择器： 例如 $('.box:checked')

二、jQuery 文本属性值

注意： 不传参数表示获取，传入参数表示设置
html() 可以识别标签，text() 不识别标签

1. 操作元素的 html 内容 html() 相当于 innerHTML
2. 操作元素纯文本的内容 text() 相当于 innerText
3. 操作表单元素的 value 的值 val()

三、Tips

• 获取所有祖父元素
  parents()
• 保留小数点后 N 位
  传入参数表示保留小数点后 N 位，number 的方法
  toFixed()

四、jQuery 元素操作

4.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作， 如果想要给同一类元素做不同操作，就需要用到遍历

• each() 方法
  $('div').each(function(index, element) {})

• $.each() 方法
  $.each($('div'), function(index, element) {})

这里面的回调函数，有多少元素就会执行都少次
​回调函数参数1： 索引，当前这次循环的索引
​回调函数参数2： DOM元素对象，当前这次循环取出的DOM元素对象

注意： 此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换

4.2 创建元素

$('<li>我是li</li>')

4.3 添加元素

• 内部添加 - 作为子元素添加
  .append('') 后面添加
  .prepend('') 前面添加
• 外部添加 - 作为兄弟添加
  .after('') 后面添加
  .before('') 前面添加

4.4 删除元素

.remove('') 删除自身
.empty('') 删除元素里面所有子节点
.html('') 清空元素内容
.empty('') 和 .html('') 都一样，只不过 .html('') 还可以设置内容

五、jQuery 尺寸、位置操作

尺寸操作

1. 操作宽高
   width()
   height()

2. 操作宽高 + padding
   innerWidth()
   innerHeight()

3. 操作宽高 + padding + border
   outerWidth()
   outerHeight()

4. 操作宽高 + padding + border + margin
   outerWidth(true)
   outerHeight(true)

• 以上参数为空就是获取数据，返回的数字型
• 如果参数为数字型就是改写
• 参数可以不带单位

位置操作

1. offset() 设置或获取元素偏移
   获取当前元素到文档的距离，就使用 offset()
   传入一个对象参数，可以设置元素的left和top值

2. position() 获取元素偏移
   获取当前元素到定位父元素的距离，就使用 position()

以上两个返回值都是对象，包含left、top，这两个属性都是 number 类型，可以直接使用

3. scrollTop() / scrollLeft() 设置或获取元素被卷去的部分

animate() 动画方法注意事项

animate() 只能让元素执行动画
window、document这些对象是不能执行动画的
如果需要让页面滚动就要给 html / body 设置动画