前端基础 -JQuery之 对属性的操作
2023-09-11 14:15:41 时间
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>
相关文章
- jQuery显示隐藏密码插件jquery.toggle-password演示
- zTree -- jQuery 树插件 使用方法与例子
- 如何利用 jQuery 修改 css 中带有 !important 的样式属性?
- Jquery插件 easyUI属性汇总
- jQuery获取兄弟标签的文本
- jQuery UI Datepicker使用介绍
- jQuery判断表单input
- JQuery的Ajax跨域请求的解决方案
- jQuery插件开发的模式和结构
- 电子签章盖章之jQuery插件jquery.zsign
- jQuery对象与dom对象的转换[转]
- jQuery Custom Selector JQuery自定义选择器
- 图片延迟加载并等比缩放,一个简单的JQuery插件
- jQuery元素属性attr设置多个键值或函数 删除属性removeAttr
- 【JavaScript】jQuery
- 【转】jQuery中的编程范式
- jquery获取data-xxx自定义属性的值遇到的问题
- 一个小时学会jQuery
- jQuery訪问属性,绝对定位
- 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连续7-电话问卷调查
- Jquery.Validate验证CheckBoxList,RadioButtonList,DropDownList是否选中
- jQuery 属性选择器
- jquery案例12——动态添加输入内容、创建元素、插入元素、删除元素
- jquery案例5——tab栏切换、菜单栏切换、选项卡、来回切换