美文网首页
原生JS与jQuery自定义属性的操作

原生JS与jQuery自定义属性的操作

作者: GoFzy | 来源:发表于2019-03-15 11:22 被阅读0次

一、自定义属性:

  首先我们来弄清楚什么是自定义属性:

<ul>
  <li age='10'>A</li>
  <li age='11'>B</li>
  <li age='12'>C</li>
  <li age='13'>D</li>
</ul>

  由html的基础知识我们知道,html标签是不存在age属性的,而此时我们自己添加上去的age属性就称之为自定义属性。由于DOM.的方式只能获取html标签原有的属性,因此自定义属性就不可以直接通过该方式进行操作,比如下面这段代码,就会输出undefined:

var list = document.getElementsByTagName('li');
for(let i = 0;i<list.length;i++){
  list[i].onclick = function(){
    console.log(this.age);  //结果为undefined
  }
}

二、原生JS操作自定义属性:

//自定义属性的获取:
对象.getAttribute('键');
//自定义属性的添加与修改
对象.setAttribute('键',值);
//自定义属性的删除:
对象.removeAttribute('键');

  需要注意的是get/set/removeAttribute方法不仅仅可以操作自定义属性,还可以对DOM的系统属性进行操作(系统属性.方式更便捷)

三、jQuery操作属性:

  jQuery中可以通过attr方法直接操作所有属性:

//属性的获取:
$('对象').attr(属性)
//属性的添加与修改
$('对象').attr(属性,值)
//属性的删除:
$('对象').removeAttr(属性);

  需要注意的是,jQuery中attr方法在操作表单元素选中属性时(selected、checked等)时返回的时undefined。这是就需要使用prop方法:

//属性的获取:
$('对象').prop(属性);
//属性的添加与修改
$('对象').prop(属性,值);

  tips:prop一般用来设置js对象的属性,故不会再html中显示;attr是这设置html属性,可显示

相关文章

  • [JavaScript] js设置和获取自定义属性的方法

    Js操作自定义属性的方法: Jquery操作自定义属性的方法:

  • 00-jQuery初识

    什么是jQuery jQuery是一个JavaScript库 jQuery可以简化原生JS的操作 对比原生JS,写...

  • js、jquery的属性操作方法总结

    目录 属性分为三种: js原生属性操作方法获取属性设置属性删除属性自定义数据属性 dataset获得自定义属性的值...

  • 原生JS与jQuery自定义属性的操作

    一、自定义属性:   首先我们来弄清楚什么是自定义属性:   由html的基础知识我们知道,html标签是不存在a...

  • jQuery

    jQuery简介 jQuery其实就是原生JS封装之后的一种方法。比起原生JS的操作要方便许多,原生JS的DOM操...

  • jQuery简介

    什么是jQuery? jQuery其实就是原生JS封装之后的一种方法。比起原生JS的操作要方便许多,原生JS的DO...

  • 20、jQuery 事件机制

    20、jQuery 事件机制 原生js事件与jQuery事件: (1)用原生的js给div注册事件 原生js注册相...

  • jquery实战

    jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件 自定义事件

  • jQuery常用方法

    jQuery操作标签的内容 html()方法 相当于原生JS中的innerHTML属性,用来获取或者设置标签内部的...

  • Jquery

    Jquery属性操作 1.属性 attr(attrName [,attrValue]) 操作所有属性(自定义和内置...

网友评论

      本文标题:原生JS与jQuery自定义属性的操作

      本文链接:https://www.haomeiwen.com/subject/clflmqtx.html