区别:attr()主要是针对标签元素的属性进行操作(和Html标签有关),如img的src属性和alt属性,a链接的href属性等等;而css()修改的是样式里面的属性(和style有关),即是style里面的属性。

本教程操作环境:windows7系统、jquery1.10.0版本、Dell G3电脑。 jquery中有attr()和css()两种方法: attr是attribute的缩写,意思是标签属性。css是,样式,意思是元素的style样式的。 jquery attr()方法 attr() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值,则返回第一个匹配元素的值。 当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。 语法 返回属性的值: $(selector).attr(attribute) 设置属性和值: $(selector).attr(attribute,value) attribute:规定属性的名称。 value:规定属性的值。 jquery css()方法 css() 方法返回或设置匹配的元素的一个或多个样式属性。 返回第一个匹配元素的 CSS 属性值。 注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border")。 $(selector).css(name) name:必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。 jquery中attr()与css()的区别 jquery中attr()是获取/修改元素的属性和值(和Html标签有关);css()是获取/修改元素的样式属性(和style有关)。 attr()主要是针对元素的属性进行操作,如img的src属性和alt属性,a链接的href属性等等; css()修改的是样式里面的属性,即是style里面的属性。 前者可以修改<img>的src属性,可以修改<a>的href属性, 可以修改<input>的title属性。然而后者却不行,他它只能修改样式相关的特征。 所以,后者是前者的子集,只是对 style这个特定的属性进行操作。 示例: HTML <div style="color:red;font-weight:bold;" id="a" data-id="1" class="mystyle">Hello</div> Javascript <script type="text/javascript">
$(function() {
//css()
var color = $("#a").css("color"); //只有一个参数时,是获取div#a的color,返回red
$("#a").css("color", "blue"); //两个参数时,是设置对应的 样式属性,这里是这只文本color为blue
// $("#a").css({"color":"blue","fontWeight":"normal"});//也支持对象形式进行设置样式
//attr()
//获取div#a上面的data-id属性的值;当然,style,class,id这三个都可以获取到,因为这些都是Html元素的 属性
var id = $("#a").attr("data-id");
//$("#a").attr("data-id",2);//设置div#a上面的data-id属性为2,
//假如是一个不存在的属性,使用这个代码,就会添加这个属性到匹配到的元素上面
//如$("#a").attr("data-width","100px");,使用这个,div#aHtml元素上面就会新增一个data-width的属性
});
</script>总结 css()方法是获取/修改样式属性(和style有关)的方法; attr()是获取/修改元素的属性(和Html标签有关)的方法; attr()和css()对style的操作都是针对行内样式。 style也是元素的属性,attr()同样可以对他进行操作,所以在功能上css()可以看成是attr()的子集。 attr()操作返回的是string,css()操作返回的是object。 相关视频教程推荐:jQuery教程(视频) 以上就是jquery css()和attr()的区别是什么的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |