您的位置：首页 > Web前端 > JQuery

jquery学习第一天：隔行变色、文本框聚焦清空、展示收缩效果

2013-01-17 00:00 344 查看

jquery也是经常用，还有prototype和mootools等，真心没系统认真的看过jquery的选择器，DOM以及动画效果，买了本书，想在这个月看完，表示我看完选择器了，偶尔记录一些常用的效果，不做细节说明了，以后想用自己拿来就行：
1.jquery隔行变色效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>  </title>
  <meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
  <script src="./jquery/jquery-1.8.2.min.js"></script>
  <style>www.phpddt.com</style>
  <script>
	$(function(){
		$("#tb tr:odd").css("backgroundColor","#a9a9a9");
	});
  </script>
</head>      
<body>
<table id="tb" width="40%" border=1 cellpadding=10 cellspacing=0>
<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
	<td>4</td>
</tr>
<tr>
	<td>5</td>
	<td>6</td>
	<td>7</td>
	<td>8</td>
</tr>
<tr>
	<td>9</td>
	<td>10</td>
	<td>11</td>
	<td>12</td>
</tr>
<tr>
	<td>13</td>
	<td>14</td>
	<td>15</td>
	<td>16</td>
</tr>
<tr>
	<td>11</td>
	<td>11</td>
	<td>11</td>
	<td>11</td>
</tr>
<tr>
	<td>11</td>
	<td>11</td>
	<td>11</td>
	<td>11</td>
</tr>
<tr>
	<td>11</td>
	<td>11</td>
	<td>11</td>
	<td>11</td>
</tr>
</table>
</body>
</html>

效果图如下：

2.jquery实现文本框聚焦清空，失去焦点赋值

<html>
<head>
<title>  </title>
  <meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
  <script src="./jquery/jquery-1.8.2.min.js"></script>
  <style>www.phpddt.com</style>
  <script>
	$(function(){
		$("#account").focus(function(){
			var account_value=$(this).val();
			if(account_value=="请输入账号"){
				$(this).val("");
			}
		});
		$("#account").blur(function(){
			var account_value=$(this).val();
			if(account_value==""){
				$(this).val("请输入账号");
			}
		});
	});
  </script>
</head>      
<body>
账号：<input id="account" type="text" value="请输入账号" />
</body>
</html>

效果图：

3.jquery实现常见的展开收缩效果

<html>
<head>
<title>www.phpddt.com</title>
  <meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
  <script src="./jquery/jquery-1.8.2.min.js"></script>
  <style>.ht{color:red;font-size:14px;}</style>
  <script>
	$(function(){
		var $category = $("ul li:gt(3):not(:last)");
		$category.hide();
		$("#btn").click(function(){
			if($category.is(":visible")){
				$category.hide();
				$("ul li").removeClass("ht");
				$("#btn").val("点击展示");
			}else{
				$category.show();
				$("ul li").addClass("ht");
				$(this).val("点击收缩");
			}
		});
	});
  </script>
</head>      
<body>
<ul>
	<li title="属性1内容">li1的内容</li>
	<li title="属性2内容">li2的内容</li>
	<li>li3的内容</li>
	<li>li4的内容</li>
	<li>li5的内容</li>
	<li>li6的内容</li>
	<li>li7的内容</li>
	<li>li8的内容</li>
	<li>更多内容</li>
</ul>
<input type="button" id="btn" value="点击展开"/>
</body>
</html>

效果图：
点击前：

点击后：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航