• 10. jQuery 对元素属性的操作~ 一篇就够.


    jQuery 对元素属性的操作~ 一篇就够.

    主要讲解三个JQ的方法:

    我们先来看看原生 JS 对元素操作有什么:

    几种属性操作
    => 原生属性, id class src ...
    => 自定义属性, getAttribute() ...

    jQuery 有三种操作属性的方法
    => attr() 和 removeAttr()
    => prop() 和 removeProp()
    => data() 和 removeData()


       1. attr() 和 removeAttr()

    1-1. attr()
    => 语法: 元素集合.attr(属性名)
    -> 获取元素的该属性, 主要用来获取标签属性, 包括一些自定义属性


    => 语法: 元素集合.attr(属性名, 属性值)
    -> 设置元素的标签属性, 只是把属性设置在标签上, 当作一个自定义属性使用
    -> 对于原生属性有些有用, 有些没有用()
    => 注意:
    -> 设置的时候, 需要两个参数
    -> 设置的不管是什么数据类型, 都会变成字符串类型
    -> 有的原生属性好使, 有的不好使 (自己试一下input的单选框即可)


    1-2. removeAttr()
    => 语法: 元素集合.removeAttr(属性名)
    -> 删除元素身上的自定义属性  id class 等属性也可以删除

    -> 多用于删除 attr 方法设置的属性


    2. prop() 和 removeProp()


    2-1. prop()
    => 语法: 元素集合.prop(属性名)
    -> 获取元素的原生属性, 也可以获取元素的自定义属性
    -> 但是 attr 方法设置的自定义属性他获取不到


    => 语法: 元素集合.prop(属性名, 属性值)
    -> 主要设置元素的原生属性, 也可以设置自定义属性
    -> 他设置的自定义属性不会显示在标签上, 而是存储在元素身上  (意思是自定义的属性(原生的会!!)他不会在标签上显示 他会在元素里面显示(可以打印元素后自己翻翻)!! 但是可以用prop正常获取到)
    => 注意:
    -> 设置的自定义属性不会显示在标签上  (!!)
    -> 你设置的时候是什么数据类型, 获取到的时候还是什么数据类型  (attr 始终返回的是string类型 但是我prop返回的就是你设置的什么属性我就返回什么属性)
    -> attr 设置的自定义属性他拿不到(不包括原生的属性  意思是 你用attr定义的自定义属性 我prop是获取不了的)


    2-2. removeProp()
    => 语法: 元素集合.removeProp(属性名)
    -> 删除元素的属性, 但是只能删除由 prop 设置的自定义属性
    -> 原生属性 id class ... 不能删除

    可以理解为 只能删除常用Prop自定义的属性 其他一律不能删


    3. data() 和 removeData()

    3-1. data()
    => 语法: 元素集合.data(属性名)
    -> 获取使用 data() 方法存储的数据, 获取元素身上 data-xxx 的属性 记住啊! 属性名字不用加 data-  前缀!!


    => 语法: 元素集合.data(属性名, 属性值)
    -> 设置的时候, 只是把数据存储在元素身上的某一个对象空间内(意思是不会在标签上显示 他会在元素中自动生成一个我也看不懂的键 - 值 存储)
    -> 但是不会出现在标签上, 不会由 data-xxx 的属性出现
    => 注意:
    -> 可以获取元素标签上 data-xxx 的属性
    -> 但是不能设置标签上 data-xxx 的属性

    3-2. removeData()
    -> 只能删除由 data() 方法设置的属性 意思是  你是data 方法设置的我才可以用removeData方法移除 不然的话 你直接在标签上设置的 data-xxx 就不能移除标签上的任何 data-xxx
    -> 不能删除元素身上 data-xxx 的属性 


     注意啊 都是有隐式迭代的啊~

    属性操作大概讲那么多 其实主要还是他们的区别  谁能删谁的 谁不能删谁的  我设置谁的 我怎么设置的  搞懂即可

    本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/14807475.html

  • 相关阅读:
    shell script-条件语句、循环语句
    shell script-判断式
    shell script
    AngularJs(Part 11)--自定义Directive
    AngularJS中的DI
    javascript的DI
    一些奇怪的Javascript用法
    AngularJS(Part 10)--页面导航
    URL中#符号的作用
    AngularJs(Part 9)--AngularJS 表单
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14807475.html
Copyright © 2020-2023  润新知