jQuery 操作元素

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(${(}^{\prime }di{v}^{\prime }).attr{(}^{\prime }clas{s}^{\prime }))//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()