
测试的最开始,data()和dataset从html中读取的data-v值是一致的,但是当对值进行修改时,结果就不一样了。
另外,通过审查元素可以发现:
通过jquerydata方法设置data属性不会修改DOM;
而通过dataset方法则会同步修改DOM。
或许可以认为,jquery data的实现方式没有遵循html 5标准。
name是input标签的属性值,jQuery提供了attr() 方法用于设置/改变属性值
1
2
$("input:text")attr("name");
$("input:text")prop("name"); // 也可以使用prop()方法获取属性
示例代码如下
创建Html元素
1
2
3
4
5
6
7
<div class="box">
<span>点击按钮获取文本框的name属性值:</span>
<div class="content">
<input type="text" name="test" value="这个文本框的name属性值为test">
</div>
<input type="button" class="btn" value="获取文本框name值">
</div>
设置css样式
1
2
3
4
5
divbox{width:300px;height:250px;padding:10px 20px;margin:20px;border:4px dashed #ccc;}
divbox>span{color:#999;font-style:italic;}
divcontent{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}
input[type='text']{width:200px;height:30px;border:none;}
input[type='button']{width:120px;height:30px;margin:10px;border:2px solid #ebbcbe;}
编写jquery代码
1
2
3
4
5
$(function(){
$("input:button")click(function() {
alert($("input:text")attr("name"));
});
})
$("select option:selected")attr("自定义属性名");
//自定义属性名称前加data- 这样更符合html5的规范,例如
<option data-name="hi">XXX</option>,这样可以使用另一种方法获取自定义属性的值
$("select option:selected")data("name");//这样可以获取到上面data-name的值
div是没有value属性的,但是我们可以给它加上去也是可以获得的,在这里value只是一个自定义参数。
html代码
<div class="store" value="tanyu"></div>
jq代码
$(function(){
$("store")click(function(){
alert($(this)attr('value'));
});
});
使用JQuery给自定义属性赋值取值
jQuery 属性 *** 作 - attr() 方法
定义和用法
attr() 方法设置或返回被选元素的属性值。
一、返回属性值
返回被选元素的属性值。
语法
$(selector)attr(attribute)
参数描述
attribute 规定要获取其值的属性。
$(selector)attr(attribute)
<html><head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<script type="text/javascript">
$(document)ready(function(){
$("button")click(function(){
alert("Image width " + $("img")attr("width"));
});
});
</script>
</head>
<body>
<img src="/i/eg_smilegif" width="128" height="128" />
<br />
<button>返回图像的宽度</button>
</body>
</html>
二、设置属性/值
设置被选元素的属性和值。
语法
$(selector)attr(attribute,value)
参数描述
attribute 规定属性的名称。
value 规定属性的值。
$(selector)attr(attribute,value)
<html><head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<script type="text/javascript">
$(document)ready(function(){
$("button")click(function(){
$("img")attr("width","180");
});
});
</script>
</head>
<body>
<img src="/i/eg_smilegif" />
<br />
<button>设置图像的 width 属性</button>
</body>
</html>
以上就是关于jquery怎么设置dataset全部的内容,包括:jquery怎么设置dataset、如何获取data-name属性、Jquery怎么获取select选中项 自定义属性的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)