jquery中如何获取和设置属性

发布网友发布时间：2022-04-24 15:12

共2个回答

懂视网时间：2022-04-29 10:47

获取和设置属性

要获取小图片的src属性，设置大图片的src属性值，使大图片不断切换，必须掌握jQuery获取和设置属性的方法。

例如：某幅图片的id为"pto"，在JavaScript中可以用以下方式获取src属性值。

var img=document.getElementById("pto");
var path=img.src;   //获取属性
img.src="路径";   //设置属性值
img.getAttribute("src");  //获取属性
img.getAttribute("src","路径"); //获取属性值

在jQuery中使用attr()方法来获取和设置元素属性。

要获取图片的src属性，只需给attr()方法传递一个参数，即属性名称。

var $img=$("#pto");  //获取图片<img>元素
var path=$img.attr("src"); //获取图片<img>元素节点src属性

如果要设置图片的src属性值，继续使用attr()方法，不同的是，要传递两个参数，即属性名和对应的值。

$img.attr("src","路径"); //设置图片<img>元素节点src属性值

如果需要一次性为同一个元素设置多个属性：

$img.attr({"src":"路径","title":"图片提示文字"}); //同时设置同一个元素多个属性

删除属性

删除文档中某元素的特定属性，可以使用removeAttr()方法来实现。

$("#pto").removeAttr("title")；

实现结果：

旧：<img src="01.jpg" title="123"> 新：<img src="01.jpg">

掌握了attr()和removeAttr()方法之后，可以实现一个鼠标移到某元素上改变属性值。

注：一定要引入jQuery文件才可以应用

/*html内容*/
<img src="img/img1/fw1.jpg" id="test" title="test"/><br /> /*大图*/
<div> /*小图*/
 <img src="img/img1/22.jpg" />
 <img src="img/img1/33.jpg" />
 <img src="img/img1/44.jpg" />
</div>

//jQuery内容
$(function(){
 $("div img").mouseover(function(){
	var big_src=$(this).attr("src"); //获取小图的src属性
	$("#test").attr("src",big_src); //设置大图的src属性
 });
});

此时运行程序会发现，光标移入某幅小图时，大图显示区域将会显示小图。

图片1.png

总结：

设置或获取属性及属性值使用attr()。

如果想要在同一个元素内设置多个属性需要给一个大括号里面放属性及属性值，属性与属性值之间用冒号，属性与属性之间用逗号。

删除属性直接用removeAttr("属性名")。

热心网友时间：2022-04-29 07:55

1、jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。

①、attr(属性名) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）

②、attr(属性名, 属性值) //设置属性的值（为所有匹配的元素设置一个属性值。）

③、attr(属性名,函数值) //设置属性的函数值（为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）

④、attr(properties) //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)

2、那么怎么删除属性呢?

jquery中删除属性的关键词是: removeAttr 注意A是大写的. 看看怎么用的:

同样是用法一中的html代码, 我想删掉li的title属性, 那么就这样:

$("ul li:eq(1)").removeAttr("title");

</script>

就这么简单， attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了。

3、那么是否有跟attr()相似的属性呢？

jquery中val()与之类似，

$(this).val();获取某个元素节点的value值，相当于$(this).attr("value");

$(this).val(value);设置某个元素节点的value值，相当于$(this).attr("value",value);