14.属性和样式的操作

属性：

　　attr()：设置或者获取指定的属性

　　　　attr(key):获取指定的属性

　　　　attr(key,value):设置属性

　　　　attr(json):设置多个属性

　　removeAttr(key)：移除指定属性

Class：

　　addClass(name)

　　removeClass(name)

　　toggleClass(name)：切换class，若有指定的class则移除，否则添加

HTML代码/文本/值

　　共同点：

　　　　xxx()：获取

　　　　xxx("")：设置

　　html():设置或者获取标签体的内容

　　text():设置或者获取标签体的内容

　　　　区别：

　　　　　　设置值：html会把字符串解析，text只是作为普通文本

　　　　　　获取值：html会把标签解析，text只获取文本内容

　　val():设置或者获取value属性

CSS：

　　css():设置或者获取指定css

　　　　css(key):获取指定样式的值

　　　　css(key,value):设置指定样式的值

　　　　css(json):设置多个样式

　　offset():获取元素的位置(了解)

　　height()

　　width()

<!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.8.3.js"></script>
	<script type="text/javascript"> 
		$(document).ready(function(){
		//1.1给username添加title属性
			var $username=$("input[name='username']");
			$username.attr("title","姓名"); 
		//1.2获取username的title属性
		//	alert($username.attr("title"));
		//1.3给username添加value和class属性
		/*	$username.attr(
				{
					"value":"张三",
					"class":"textClass"
				}
			);
			alert($username.attr("value"));*/
		//1.4删除username的class属性
			$username.removeAttr("class");
			
		//2.1给username添加一个名为textClass的样式
			$username.addClass("textClass");
		//2.2删除username的名为textClass的样式
			$username.removeClass("textClass");
		//2.3点击按钮切换username的样式
			$("button").click(function(){
				$username.toggleClass("textClass");
			});
			
		//3.1 通过val()获取 username的value属性的值
		//	alert($username.val());
		//3.2 通过val()设置 username的默认值为"许多多"
		//	$username.val("许多多");
		
		//3.3通过html获取div标签体的内容
		//	alert($("div").html());
		//3.4通过html设置div标签体的内容
		//	$("div").html("已经18岁了");
		
		//3.5通过text获取div标签体的内容
		//	alert($("div").text());
		//3.6通过text设置div标签体的内容
		//	$("div").text("已经18岁了");
		
		//3.7 两者设置值的区别
		//	$("div").html("<a href='#'>html</a>");   //解析字符串
		//	$("div").text("<a href='#'>html</a>")    //显示字符串
			
		//3.8 两者获取值的区别
		//	alert($("#sp").html()); 
		//	alert($("#sp").text());
		
		
		//4.1 给div添加边框样式
		//	$("div").css("border","1px solid red");
		//4.2 获取div的表框样式
		//	alert($("div").css("border"));
		//4.3 给div添加多种样式
		/*	$("div").css(
				{
					"backgroundColor":"#ff0",
					"height":"100",
					"width":"100"
				}
			);*/
		//5 获取div的位置
			var off=$("div").offset();
			alert(off.top);
			alert(off.left);
		//6 获取div的高和宽
		//	alert($("div").height());
		//	alert($("div").width());
		});	
	</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>

　　

 

posted @ 2018-02-23 14:22  一日看尽长安花cxjj  阅读(116)  评论(0)    收藏  举报