<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>
jquery对样式(css)和属性(attr)的使用
猜你喜欢
转载自blog.csdn.net/qq_44063001/article/details/87879342
今日推荐
周排行