对属性的操作:
attr(): 设置或者获取元素的属性
方式1:获取
attr("属性名称")
方式2:设置一个属性
attr("属性名称","属性值");
方式3:设置多个属性 json
attr({
"属性1" : "值1",
"属性2" : "值2"
})
removeAttr("属性名称"):移除指定属性
添加class属性时
方式1: attr("class","值");
方式2: addClass("指定的样式值")
removeClass("指定的样式值")
对css操作:操作元素的style属性
css():获取或设置css样式
方式1:获取
css("属性名称")
方式2:设置一个属性
css("属性名称","属性值");
方式3:设置多个属性 json
css({
"属性1" : "值1",
"属性2" : "值2"
});
获取元素的尺寸:
width()
height()
<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"> $(function(){ //1.1给username添加title属性 var $username = $("[name = ‘username‘]") $username.attr("title","姓名"); //1.2获取username的title属性 alert($username.attr("title")); //1.3给username添加value和class属性 $username.attr({ "value":"yisen", "class":"textClass" }); alert($username.val()); //1.4删除username的class属性 $username.removeAttr("class"); //2.1给username添加一个名为textClass的样式 $username.addClass("textClass"); //2.2删除username的名为textClass的样式 $username.removeClass("textClass"); //4.1 给div添加边框样式 var $div = $("div"); $div.css("border","1px solid red"); //4.2 获取div的边框样式 alert($div.css("border")); //4.3 给div添加多种样式 $div.css({ "width":"100px", "height":"100px", "background-color":"yellow" }); //5 获取div的位置 alert($div.offset().left); //6 获取div的高和宽 alert($div.width()); alert($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>
操作元素的style属性