携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情
jQuery 操作元素属性
有以下几种属性操作
原生属性, id class src ...
自定义属性, getAttribute() ...
H5 自定义属性, dataset data-xxx
jQuery 有三种操作属性的方法
attr() 和 removeAttr()
prop() 和 removeProp()
data() 和 removeData()
1. attr() 和 removeAttr()
****1-1. attr()
使用方法: 元素集合.attr(属性名)
获取元素的该属性, 主要用来获取标签属性, 包括一些自定义属性
使用方法: 元素集合.attr(属性名, 属性值)
设置元素的标签属性, 只是把属性设置在标签上, 当作一个自定义属性使用
对于原生属性有些有用, 有些没有用
注意:
设置的时候, 需要两个参数
设置的不管是什么数据类型, 都会变成字符串类型
有的原生属性好使, 有的不好使
1-2. removeAttr()
使用方法: 元素集合.removeAttr(属性名)
删除元素身上的自定义属性
id class 等属性也可以删除
注意:
多用于删除 attr 方法设置的属性
// 1-1. attr() 获取 // console.log((′div′).attr(′class′)) //console.log(('div').attr('id')) // console.log($('div').attr('hello'))
// 1-1. attr() 获取
console.log($('div').attr('class'))
console.log($('div').attr('id'))
console.log($('div').attr('hello'))
// attr() 设置
$('div').attr('a', '你好 世界')
$('div').attr('id', '你好 世界')
$('div').attr('a', 100)
console.log($('div').attr('a'))
// removeAttr()
$('div').removeAttr('class')
$('div').removeAttr('id')
$('div').removeAttr('hello')
2. prop() 和 removeProp()
2-1. prop()
使用方法: 元素集合.prop(属性名)
即获取元素的原生属性, 也可获取元素的自定义属性
但 attr 方法设置的自定义属性他获取不到
使用方法: 元素集合.prop(属性名, 属性值)
主要设置元素的原生属性, 也可以设置自定义属性
他设置的自定义属性不会显示在标签上, 而是存储在元素身上
注意:
设置的自定义属性不会显示在标签上
你设置的时候是什么数据类型, 获取到的时候还是什么数据类型
attr 设置的自定义属性他拿不到
2-2. removeProp()
使用语法: 元素集合.removeProp(属性名)
删除元素的属性, 但是只能删除由 prop 设置的自定义属性
原生属性 id class ... 不能删除
// 2-1. prop()
$('div').prop('id', 'abcdefg')
// 使用 prop 设置了一个自定义属性
$('div').prop('abc', 100)
$('div').prop('aa', 200)
console.log(typeof $('div').prop('abc'))
// attr 设置的他拿不到
$('div').attr('bcd', 'hello')
console.log($('div').prop('bcd'))
// 2-2. removeProp()
$('div').removeProp('abc')
$('div').removeProp('id')
console.dir($('div'))
3. data() 和 removeData()
3-1. data()
使用方法: 元素集合.data(属性名)
获取使用 data() 方法存储的数据, 获取元素身上 data-xxx 的属性
使用方法: 元素集合.data(属性名, 属性值)
设置的时候, 只是把数据存储在元素身上的某一个对象空间内
但是不会出现在标签上, 不会由 data-xxx 的属性出现
注意:
可以获取元素标签上 data-xxx 的属性
但是不能设置标签上 data-xxx 的属性
3-2. removeData()
只能删除由 data() 方法设置的属性
不能删除元素身上 data-xxx 的属性
// 3-1. data() 获取
console.log($('div').data('index'))
// 3-2. data() 设置
$('div').data('abcde', 200)
// 3-3. removeData()
$('div').removeData('index')
$('div').removeData('abcde')
console.log($('div'))
jQuery 获取元素尺寸
获取元素尺寸有三套方法四种使用方式
不管在页面是不是占位, 这些方法都是获取元素的尺寸
1. width() 和 height()
使用方法: 元素集合.width() 或者 元素集合.height()
获取的是元素内容位置的尺寸
console.log('width: ', $('div').width())\
console.log('height: ', $('div').height())\
2. innerWidth() 和 innerHeight()
使用方法: 元素集合.innerWidth() 或者 元素集合.innerHeight()
获取的是元素 内容 + padding 区域的尺寸
console.log('innerWidth: ', $('div').innerWidth())\
console.log('innerHeight: ', $('div').innerHeight())\
3. outerWidth() 和 outerHeight()
使用方法: 元素集合.outerWidth() 或者 元素集合.outerHeight()
获取的是元素 内容 + padding + border 区域的尺寸
console.log('outerWidth: ', $('div').outerWidth())\
console.log('outerHeight: ', $('div').outerHeight())\
4. outerWidth(true) 和 outerHeight(true)
使用方法: 元素集合.outerWidth(true) 或者 元素集合.outerHeight(true)
获取的是元素 内容 + padding + border + margin 区域的尺寸
console.log('outerWidth(true): ', $('div').outerWidth(true))
console.log('outerHeight(true): ', $('div').outerHeight(true))\
jQuery 操作元素位置
操作元素相对于某一个点的位置关系
1. offset()
一个读写方法
使用方法: 元素集合.offset()
返回值: 一个对象, 里面包含一个 x 信息一个 y 信息
相对谁: 相对页面左上角的绝对坐标
注意: 读取出来是一个对象, 需要值得时候 要继续 .
不能继续链式编程
console.log('offset: ', $('div').offset().top)\
console.log('offset: ', $('div').offset().left)\
设置
使用方法: 元素集合.offset({ top: xxx, left: xxx })
设置: 是相对于页面左上角的绝对位置
举例: $('div').offset({ top: 30, left: 30 })
一定会把这个 div 放在距离页面左上角 30 30 的位置
注意: 设置的时候, 父子元素都要动要考虑先后顺序
$('div').offset({ top: 30, left: 30 })\
\
2. position()
一个只读的方法
使用方法: 元素集合.position()
返回值: 一个对象, 里面包含一个 x 信息一个 y 信息
就是元素的定位关系
如果你定位的是 right 和 bottom, 那么会自动计算成 left 和 top
console.log($('div').position())\
console.log($('p').position())\
$('p').position()
