jQuery获取data-*属性值

下面就详细介绍四种方法获取data-*属性的值

<li id="getId" data-id="122" data-vice-id="11">获取id</li>

需要获取的就是data-id 和 dtat-vice-id的值



一:getAttribute()方法

const getId = document.getElementById(‘getId‘);
// //getAttribute()取值属性
console.log(getId.getAttribute("data-id"));//122
console.log(getId.getAttribute("data-vice-id"));//11
// //setAttribute()赋值属性
getId.setAttribute("data-id","48");
console.log(getId.getAttribute("data-id"));//48

二:dataset()方法

//data-前缀属性可以在JS中通过dataset取值,更加方便
console.log(getId.dataset.id);//112
//data-vice-id连接取值使用驼峰命名法取值
console.log(getId.dataset.viceId);//11

//赋值
getId.dataset.id = "113";//113
getId.dataset.viceId--;//10

//新增data属性
getId.dataset.id2 = "100";//100

//删除,设置成null,或者delete
getId.dataset.id2 = null;//null
delete getId.dataset.id2;//undefind

三:jquery data()方法

var id = $("#getId").data("id"); //122
var viceId = $("#getId").data("vice-id"); //11
//赋值
$("#getId").data("id","100");//100

jquery data 是一种缓存机制

用法如下:

data()方法

//HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div>

//获取属性
var appid = $("#myDiv").data("appid"); //123
var app-id = $("#myDiv").data("app-id"); //456

//属性赋值 $("#myDiv").data("appid","666");

//最终HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div>

需要注意的是,data()的值进行修改并不会影响到DOM元素上的data-*属性的改变。data()的本质其实是将一个 “cache” 附加到了对象上,并使用了一个特殊的属性名称。

所以上述代码中,虽然对div进行了data()赋值操作,但HTML代码中div的data-appid的值仍然为123,因为data()只是修改了缓存的那个值,此时进行$(‘#myDiv‘).data("appid")的操作,输出的结果为666.

四:jquery attr()方法

var id = $("#getId").attr("data-id"); //122
var viceId = $("#getId").attr("data-vice-id"); //11
//赋值
$("#getId").attr("data-id","100");//100

参考:

http://www.cnblogs.com/lzijian/p/6322868.html

https://blog.csdn.net/jx950915/article/details/78931509

原文地址:https://www.cnblogs.com/mingmingmomo/p/9484251.html

时间: 2024-10-12 09:57:19

jQuery获取data-*属性值的相关文章

jQuery 获取标签属性值的问题

jquery attr()无法获取属性值问题 css里明明已经设置过了: 可还是获取不了: 求指导. 一定是undefined,attr是用来获得或设置标签属性的,不是用来获得CSS属性的.如果你有id是nn1的标签,可以用ww=$("#nn1").css("top");来获得CSS属性. 标签属性和css属性怎么区别 追答 <script type="text/javascript"> $(document).ready(funct

jquery 获取textarea文本值详解

今天用jquery获取textarea文本值,遇到这么一个问题: 一开始用val()方法报错,后面使用text(),可以运行,但是获取的值永远为空,最后在改成val(),可以正常使用. 于是乎:为了把这个问题弄清楚,开始了遥远的解读jQuery源码之旅 步骤: 1. 给textarea设置默认值,分别输出text()和value()值 2. 改变textarea的文本值,在分别输出text()和value()值 例子: 代码: 1 <!doctype html> 2 <html lang

使用jquery获取radio的值

使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1.<input type="radio" name="testradio" value="jquery获取radio的值" />jquery获取radio的值<br /> 2.<input type="radio

IE8和IE7如何获取background-position属性值

IE8和IE7如何获取background-position属性值:之所以要单独介绍一下如何获取background-position属性值,是因为在IE8和IE8以下浏览器中存在一定的兼容性问题,下面对此做一下简单介绍,希望能够给需要的朋友带来帮助.一.使用style方式:此方式只能够获取使用style方式定义的css样式属性,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&

jquery设置href属性值

jquery设置href属性值:有时候往往要动态设置链接的href属性值,下面就简单介绍一下.方法十分的简单,直接上代码了: $('#link').attr('href','http://www.softwhy.com'); 更多相关内容可以参阅jQuery的attr()方法一章节 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8124 更多内容可以参阅:http://www.softwhy.com/jquery/

JavaScript和JQuery获取DIV的值

1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

jquery获取元素索引值index()

jquery获取元素索引值index()方法实例. jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则

JavaScript or jQuery 获取option value值 以及文本内容的方法

1.html <div class="form-group"> <label>保险公司</label> <select class="form-control" id="testSelect"> <option value="平安">平安保险</option> <option value="太平洋">太平洋保险</op

C#利用反射获取对象属性值

public static string GetObjectPropertyValue<T>(T t, string propertyname){     Type type = typeof(T); PropertyInfo property = type.GetProperty(propertyname); if (property == null) return string.Empty; object o = property.GetValue(t, null); if (o == n

c# 如何通过反射 获取\设置属性值

c# 如何通过反射 获取\设置属性值 //定义类public class MyClass{public int Property1 { get; set; }}static void Main(){MyClass tmp_Class = new MyClass();tmp_Class.Property1 = 2;Type type = tmp_Class.GetType(); //获取类型System.Reflection.PropertyInfo propertyInfo = type.Get