JQ之小白计划七（做一些小例子）

最新推荐文章于 2024-07-24 15:07:38 发布

___Alive___

最新推荐文章于 2024-07-24 15:07:38 发布

阅读量339

点赞数

分类专栏： JQ jQuery之小白计划

本文链接：https://blog.csdn.net/YU_M_K/article/details/83449264

版权

JQ 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

jQuery之小白计划

11 篇文章 1 订阅

订阅专栏

1：控制字体大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字体变大变小</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<style type="text/css">
	span{
		display: inline-block;
		width: 80px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		background-color: #F296B2;	
	}
</style>
 
 <script type="text/javascript">
	$(function(){
		$("span").click(function(){
			var thisEle = $("#para").css("font-size");//获取当前段落字体大小
			var textFontSize = parseInt(thisEle , 10);//函数可解析一个字符串，并返回一个整数。10代表进行10进制解析
			var unit = thisEle.slice(-2); //获取单位 例如px
			
			var cName = $(this).attr("class");//获取当前的类
			if(cName == "bigger"){
				   if( textFontSize <= 22 ){
						textFontSize += 2;
					}
			}else if(cName == "smaller"){
				   if( textFontSize >= 12  ){
						textFontSize -= 2;
					}
			}
			$("#para").css("font-size",  textFontSize + unit);
		});
	});
  </script>
</head>
<body>

<div class="msg">
	<div class="msg_caption">
		<span class="bigger" >放大</span>
		<span class="smaller" >缩小</span>
	</div>
	<div>
		<p id="para">
		  Failure is probably the fortification in your pole. It is like a peek your wallet as the thief
		</p>
	</div>
</div>

</body>
</html>

2: 选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
        <style type="text/css">
        		 *{ margin:0; padding:0;}
			 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
			 .tab { width:240px;margin:50px;}
			 .tab_menu { clear:both;}
			 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
			 .tab_menu li.hover { background:#F296B2;}
			 .tab_menu li.selected { color:#FFF; background:#FF5500;}
			 .tab_box { clear:both; border:1px solid #898989; height:100px;}
			 .hide{display:none}
        </style>
        
		<script type="text/javascript" >
		$(function(){
		    var $div_li =$("div.tab_menu ul li");
		    $div_li.click(function(){//添加点击事件
				$(this).addClass("selected")      //当前选项添加样式
					   .siblings().removeClass("selected");  //同辈的li都除去样式
	            var index =  $div_li.index(this);  //获取当前li的索引
				$("div.tab_box > div")   //内容区
						.eq(index).show()   //等于当前选项卡的索引显示
						.siblings().hide(); // 同辈的div隐藏
			}).hover(function(){//链式调用
				$(this).addClass("hover");
			},function(){
				$(this).removeClass("hover");
			})
		})

		</script>
	</head>
<body>

<div class="tab">
	<div class="tab_menu">
		<ul>
			<li class="selected">选项1</li>
			<li>选项2</li>
			<li>选项3</li>
		</ul>
	</div>
	<div class="tab_box"> 
		 <div>内容1</div>
		 <div class="hide">内容2</div>
		 <div class="hide">内容3</div>
	</div>
</div>

</body>
</html>
</html>

3：表格内容过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
		<style type="text/css">
			table{ border:0;border-collapse:collapse;}
			div{font:normal 12px/17px Arial;}
			td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
			th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
		</style>
		<script type="text/javascript">
		  $(function(){
		       $("#filterName").keyup(function(){//按下按键时
			      $("table tbody tr")
					.hide()//隐藏所有tr
					.filter(":contains('"+( $(this).val() )+"')") 
					.show();
					//$(this).val()获取输入框的值  
					//:contains() 选择器选取包含指定字符串的元素。
					//filter() 方法返回符合一定条件的元素。
			   }).keyup();
		  })
		</script>
	</head>
<body>
<div>
<br/>

筛选<input id="filterName" />

<br/>

</div>

<table>
	<thead>
		<tr><th>姓名</th><th>性别</th><th>地址</th></tr>
	</thead>
	<tbody>
		<tr><td>张三</td><td>男</td><td>北京</td></tr>
		<tr><td>李四</td><td>男</td><td>上海</td></tr>
		<tr><td>沙金</td><td>女</td><td>周口</td></tr>
	</tbody>
</table>

</body>
</html>