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>
