前端基础 -JQuery之 对属性的操作

JQuery属性操作

jquery对属性的操作：

• jquery对象.attr() 获取：jquery对象.attr(“属性名”) 赋值：jquery对象.attr(“属性名”,“属性值”)

• 对多个attr属性的操作： jquery对象.attr({ “属性1”：“属性值1”, “属性2”：“属性值2” })

• 删除属性： jquery对象.removeAttr(“属性名”);

• 对class属性的操作： 增加：jquery对象.addClass(“属性值”); 删除：jquery对象.removeClass(“属性值”);

效果图：

代码：

	
		
		Insert title here
		
		
			$(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());
			});
		
		
			.textClass {
				background-color: #ff0;
			}
		
	

	
		表单
		
			
				
					姓名
					
				
				
					密码
					
				
				
					性别
					
						男
						女
					
				

				
					
					
						普通按钮
						
						
					
				
			
		

		公告信息
		

			未满18慎进
		
		外span内超链