jquery中各个属性的应用

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jquery_shuxing.html</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//addClass function test
				$(".addClassButton").click(function(){
					$("p:first").addClass("intro note");//注意第一个p的调用方式
				});
				//use function in the addClass function
				$(".buttonpart_n").click(function(){
					$("p").addClass(function(n){
						return 'part_'+n;//把遍历的css类返回到addClass里面作为参数
					});
				});

				//use function in the html function
				$(".htmlButton").click(function(){
					$("p").html(function(n){
						return "The index of the p element is " + n;
					});
				});

				//attr function test
				$(".imgattr").click(function(){
					$(".imgattr").attr("width","1000px");
					// alert($(".imgattr").attr("width"));
				});

				//dbclick funtion test
				$(".imgattr").dblclick(function(){//注意dblclick中不能忘记了l
					$(".imgattr").attr("width","500");
				});

				//val function test
				$(".textbutton").click(function(){
					$(":text").val("good morning.");
				});

				//elements in val function test
				$(".textbutton2").click(function(){
					$(":text").val(function(n,c){
						return c+"hello.";
					});
				});
			});
		</script>
		<style type="text/css">
			.intro{
				font-size:120%;
				color:green;
			}
			.note{
				background-color:yellow;
			}
			.part_0{
				color:red;
			}
			.part_1{
				color:blue;
			}
			.part_2}{
				color:green;
			}
		</style>
	</head>
	<body>
		<div>
			<p>This is the first line.</p>
			<p>This is the second line.</p>
			<p>This is the third lime.</p>
			<p>This is the fourth lime.</p>
			<button class="addClassButton">add class for the first p</button>
			<button class="buttonpart_n">use part_n</button>
			<button class="htmlButton">use funtion in the html</button>
		</div>
		<br/>
		<div>
			<a href="#"><img class="imgattr" src="tubiao.jpg"/></a>
		</div>
		<div>
			<input type="text" class="inputtext" value="hello world."/>
			<button class="textbutton">改变文本域的值</button>
			<button class="textbutton2">elements in the val function</button>
		</div>
	</body>
</html>