版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/88616457
JQuery属性操作
jquery对属性的操作：
-
jquery对象.attr()
获取：jquery对象.attr(“属性名”)
赋值：jquery对象.attr(“属性名”,“属性值”) -
对多个attr属性的操作：
jquery对象.attr({
“属性1”：“属性值1”,
“属性2”：“属性值2”
}) -
删除属性：
jquery对象.removeAttr(“属性名”); -
对class属性的操作：
增加：jquery对象.addClass(“属性值”);
删除：jquery对象.removeClass(“属性值”);
效果图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//1.1给username添加title属性
$("[name=username]").attr("title", "邪恶小法师");
//1.2获取username的title属性
//alert($("[name=username]").attr("title"));
//1.3给username添加value和class属性
$("[name=username]").attr({
"value": "寒冰",
"class": "textClass"
});
//1.4删除username的class属性
$("[name=username]").removeAttr("class");
//2.1给username添加一个名为textClass的样式
$("[name=username]").addClass("textClass");
//2.2删除username的名为textClass的样式
$("[name=username]").removeClass("textClass");
//4.1 给div添加边框样式
$("div").css("border", "1px solid red");
//4.2 获取div的边框样式
//alert($("div").css("border"));
//4.3 给div添加多种样式
$("div").css({
"width": "200px",
"height": "200px"
});
//5 获取div的位置
var $obj = $("div").offset();
//alert($obj.top+" : "+$obj.left);
//6 获取div的高和宽
//alert($("div").width()+" : "+$("div").height());
});
</script>
<style type="text/css">
.textClass {
background-color: #ff0;
}
</style>
</head>
<body>
<h3>表单</h3>
<form action="">
<table border="1">
<tr id="tr1">
<td><label>姓名</label></td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td><span>密码</span></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td></td>
<td>
<button type="button">普通按钮</button>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
</td>
</tr>
</table>
</form>
<h3>公告信息</h3>
<div>
未满18慎进
</div>
<span id="sp">外span<a href='#'>内超链</a></span>
</body>
</html>