jQuery获取方法
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
js获取data-的方式
通过dataset属性访问
//HTML代码
<div id="myDiv" data-appid="123" data-myname="lsxj"></div>
//js代码
var div = documentgetElementById("myDiv");
var appId = divdatasetappid;//获取data-appid的值
var myName = divdatasetmyname;//获取data-myname的值
//设置值
divdatasetappid = 456;
divdatasetmyname = "newname";
//最终HTML结果
<div id="myDiv" data-appid="456" data-myname="newname"></div>
dataset属性的值是DOMStringMap的一个实例，名值对的映射。每个data-name形式的属性都有一个对应的属性，只不过该属性名没有data-前缀。
兼容性：
需要注意的是，dataset中大小写的问题。带连字符连接的名称在使用的时候需要命名驼峰化。例如data-my-name对应的是datasetmyName的值。可看以下代码
//将上面代码的设置值部分进行修改divdatasetappId = 789;
divdatasetmyName = "secondname";
//最终结果
<div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div>
获取对象后，调用如下方法：
function allPrpos(obj) {
// 用来保存所有的属性名称和值
var props = "";
// 开始遍历
for(var p in obj){
// 方法
if(typeof(obj[p])=="function"){
// obj[p]();
}else{
// p 为属性名称，obj[p]为对应属性的值
props+= p + "=" + obj[p] + ""t";
}
}
// 最后显示所有的属性
alert(props);
}
用jQuery自带方法/函数来获取outerHTML属性的方法：
1、定义方法outerHTML：
jQueryfnouterHTML = function(s) {
return s
thisbefore(s)remove()
: jQuery("<p>")append(thiseq(0)clone())html();
};
2、举例如下：
有如下html标签：<div id="xxx"><p>Hello World</p></div>获取Hello World的方法：
outerHTML('<p>Hello World</p>');
3、输出结果：
Hello World
css方法：
1、取得第一个段落的color样式属性的值。
$("p")css("color");2、将所有段落的字体颜色设为红色并且背景为蓝色。
$("p")css({ color: "#ff0011", background: "blue" });<html><head>
<title>JQuery中如何获取样式属性的值</title>
<script type="text/javascript" src="jqueryjs"></script>
<style>
top {
background: url(Tupianjpg) no-repeat;
width: 75px;
height: 90px;
}
</style>
<script type="text/javascript">
$(function () {
var url = $("divtop")css("background-image");
alert(url);
})
</script>
</head>
<body>
<div class="top"></div>
</body>
</html>
以上就是关于jquery怎么获得元素data属性值全部的内容，包括:jquery怎么获得元素data属性值、jquery 怎样获取一个元素的所有属性比如<div id="T" key='3321' val="234" pid="445"></div>、怎样用jQuery自带方法/函数来获取outerHTML属性等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）