网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > jQuery

jQuery中使用attr函数如何给属性赋值?

2021/9/16 21:48:19

jQuery中为了实现给属性赋值需要用到attr函数,我们可以使用以下三种形式给属性赋值。 形式一:attr(属性名, 属性值) //设置属性的值 (为所有匹配的元素设置一个属性值。) 为了让大家明白jQuery中使用attr函数如何给属性赋值,我们列举了一个修改li titl…

        jQuery中为了实现给属性赋值需要用到attr函数,我们可以使用以下三种形式给属性赋值。

        形式一:attr(属性名, 属性值) //设置属性的值 (为所有匹配的元素设置一个属性值。)

        为了让大家明白jQuery中使用attr函数如何给属性赋值,我们列举了一个修改li title的例子,通过attr(name,value)函数修改ul里的第二个li的title值为:冲浪,原来的值是“乒乓球”。

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中使用attr函数如何给属性赋值?www.woaidaogu.com</title>
<style>
p{color:red;}
li{color:blue;}
</style>
<script src="scripts/jquery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("ul li:eq(1)").attr("title","冲浪");
alert($("ul li:eq(1)").attr("title"));
});
</script>
</head>
<body>
<p id="sp" title="你最喜欢什么运动?">你最喜欢什么运动?</p>
<ul>
<li title="羽毛球">羽毛球</li>
<li title="乒乓球" alt="国球">乒乓球</li>
<li title="游泳">游泳</li>
<li title="足球">足球</li>
</ul>
</body>
<html>

image.png

        形式二: attr(属性名,函数值)     //设置属性的函数值(为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。)

        把alt属性的值设置为title属性的值。

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中使用attr函数如何给属性赋值?www.woaidaogu.com</title>
<style>
p{color:red;}
li{color:blue;}
</style>
<script src="scripts/jquery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
	$("ul li:eq(1)").attr("title",function() { return $(this).attr("alt");});
	alert($("ul li:eq(1)").attr("title"));
});
</script>
</head>
<body>
<p id="sp" title="你最喜欢什么运动?">你最喜欢什么运动?</p>
<ul>
<li title="羽毛球">羽毛球</li>
<li title="乒乓球" alt="国球">乒乓球</li>
<li title="游泳">游泳</li>
<li title="足球">足球</li>
</ul>
</body>
<html>

image.png

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

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中使用attr函数如何给属性赋值?www.woaidaogu.com</title>
<style>
p{color:red;}
li{color:blue;}
</style>
<script src="scripts/jquery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("ul li:eq(1)").attr({title:"不打乒乓球",alt:"不打国球"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
});
</script>
</head>
<body>
<p id="sp" title="你最喜欢什么运动?">你最喜欢什么运动?</p>
<ul>
<li title="羽毛球">羽毛球</li>
<li title="乒乓球" alt="国球">乒乓球</li>
<li title="游泳">游泳</li>
<li title="足球">足球</li>
</ul>
</body>
<html>



image.png

        通过以上内容我们知道了jQuery中使用attr函数如何给属性赋值,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

    暂无相关的数据...