zoukankan html css js c++ java

05-jQuery案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<style type="text/css">
body {
	font-size: 16px;
	background-color: #FFF;
}

ul li {
	list-style: inside;
	margin-left: 20px;
	list-style: none;
}

#content {
	position: absolute;
	left: 400px;
	top: 20px;
	 500px;
	height: 400px;
	border: 1px solid #cccccc;
}

#tips {
	position: absolute;
	z-index: 1;
	border: 1px solid #cccccc;
	background-color: #FFC;
	display: none;
	font-size: 14px;
}

.lightlabel {
	color: red;
	text-decoration: underline;
	cursor: pointer;
}
</style>
<title>JQUERY树状菜单</title>
<script type="text/javascript" src="script/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
  //实现每颗树的显示或者隐藏
  $(function(){
	  //ID选择器
	  //组合选择器
	  $("#lblNews,#lblProducts").click(function(){
		 //var obj=$("#lblNews").siblings();//siblings():获取到同辈元素的元素集合  div    img
		  //var containerDiv=$("#lblNews").siblings("div");//div
		  //var img=$("#lblNews").siblings("#imgOnOff");//img
		  var containerDiv=$(this).siblings("div");// div this:是当前事件触发的元素对象  $(this)--->jq对象
		  var img=$(this).siblings("#imgOnOff");//img this:是当前事件触发的元素对象  $(this)--->jq对象
		 // console.info(containerDiv);
		 //console.info(img);
		 
		 //进行效果显示控制
		  //alert(containerDiv.css("display"));//获取CSS样式属性
		 
		 if(containerDiv.css("display")=="block"){//显示----》隐藏
			 //containerDiv.hide(1000);//隐藏动画
			 containerDiv.slideUp(1000);//滑上
			 img.attr("src","img/close.gif");
		 }else{//隐藏----》显示
			 //containerDiv.show(1000);//显示动画
			 containerDiv.slideDown(1000);//滑下
			 img.attr("src","img/open.gif");
		 }
	  });
  });
  
  //实现所有树的显示或者隐藏
  $(function(){
	  $("#openclose").click(function(){
		  //获取元素对象    4个   2个div   2个img
		  //属性选择器    全匹配   首匹配   尾匹配   模糊匹配
		  //$("div[name^=div]");// 首匹配 
		  //$("div[name$=Container]");//尾匹配
		 var div= $("div[name*=Contain]");// 模糊匹配 2个div 
		 
		 var img=$("img[name='imgOnOff']");//全匹配  
		// console.info(img);
		 //console.info(div);
		 
		 //进行显示控制
		 //注意：div中有两个以上的元素对象时，获取样式属性的时候，会以第一个div元素为基准点进行判断
		 if(div.css("display")=="block"){//显示----》隐藏  
			 div.fadeOut(1000);//滑上
			 img.attr("src","img/close.gif");
		 }else{//隐藏----》显示
			 div.fadeIn(1000);//滑下
			 img.attr("src","img/open.gif");
		 }
	  });
  });
  
  //实现横向排列  和纵向排列
  $(function(){
	  //实现横向排列   
	  $("#horder").click(function(){
		  //子对象选择器    层级选择器
		 var li= $("ul>div>li");//8个
		 
		 
		 //进行效果显示控制
		 //实现横向排列实际就是操作li标签的css样式属性中的浮动属性,值为左浮动
		 li.css("float","left");//设置
	  });
	  
	  //实现纵向排列
	  $("#vorder").click(function(){
		  //层级选择器
		  var li=$("ul li");//8个
		  
		//进行效果显示控制
	    //实现纵向排列实际就是操作li标签的css样式属性中的浮动属性,清除左浮动
	   li.css("float","none");
	  });
  });
  
  //提示信息的实现     鼠标移上去mouseover():给出提示信息   鼠标离开mouseout():的时候清空提示信息      event对象：事件触发过程中由浏览器产生，我们直接使用即可
  $(function(){
	  //鼠标移上去mouseover():给出提示信息
	  $("ul div li label").mouseover(function(event){
		  //获取label标签的文本值
		  var txt=$(this).text();
		  //获取用于信息的提示的元素对象，设置提示信息
		  $("#tips").html("<b>点击查看【"+txt+"】信息</b>");
		  
		  //控制提示信息显示的位置  left  top
		  $("#tips").css("left",event.pageX+10);
		  $("#tips").css("top",event.pageY+5);
		  
		  //显示
		  $("#tips").show();
		  
		  //为当前的label标签增加一个class样式
		  $(this).addClass("lightlabel");
	  });
	  
	  //鼠标离开mouseout():的时候清空提示信息 
	  $("ul div li label").mouseout(function(){
		  //获取用于信息的提示的元素对象，清空提示信息
		  $("#tips").html("");
		  
		  //设置提示信息的位置   归于原点   0  0
		   $("#tips").css({left:"0","top":"0"});
		  
		  //将提示的元素对象div隐藏
		  $("#tips").hide();
		  //为当前的label标签移除一个class样式  lightlabel
		  $(this).removeClass("lightlabel");
	  });
  });
  
  //获取新闻
  $(function(){
	  $("div[name='divNewsContainer'] label").click(function(){
		   var ntype=$(this).attr("ntype");
		  //发送ajax请求
		  $.ajax({
			  url:"news.action",
			  type:"get",
			  data:{"ntype":ntype},
			  dataType:"json",
			  success:function(result){
				  //进行页面显示控制
				  
				  var content=$("#content");
				  content.empty();
				  //遍历进行新闻追加
				  for(var i=0;i<result.length;i++){
					  var news=result[i];
					  content.append("<a href='#'>"+news.title+"("+news.time+")"+"</a><br/>"); 
				  }
			  },
			  error:function(xhr,text,message){
				  console.info(xhr);
				  //console.info(text);
				  //console.info(message);
				  if(xhr.status==500){
					  alert("服务器异常，请联系管理员");
				  }
			  }
		  });
	  });
  });
  
  
  //获取产品log
  $(function(){
	  $("div[name='divProductsContainer'] label").click(function(){
		  //获取产品 牌名称
		  var p=$(this).attr("product");
		  var url="product.action";
		  var data={"p":p};
		  //进行显示控制
		  $("#content").load(url,data);
	  });
  });
</script>
<body>
	<p>
		<input type="button" name="openclose" id="openclose" value="展开/折叠" />
		<input type="button" name="horder" id="horder" value="横向排列" /> 
		<input type="button" name="vorder" id="vorder" value="纵向排列" />
	</p>
	<ul>
		<img id="imgOnOff" name="imgOnOff" src="img/open.gif" />
		<label id="lblNews"> 国际动态</label>
		<div name="divNewsContainer">
			<li><img src="img/item.gif" /><label id="lblLocal" ntype="local">国内新闻</label></li>
			<li><img src="img/item.gif" /><label id="lblInternational" ntype="international">国际新闻</label></li>
		</div>
	</ul>
	<br />
	<ul>
		<img id="imgOnOff" name="imgOnOff" src="img/open.gif" />
		<label id="lblProducts"> 产品展示</label>
		<div name="divProductsContainer">
			<li><img src="img/item.gif" /><label id="lblAdidas" product="adidas">阿迪达斯</label></li>
			<li><img src="img/item.gif" /><label id="lblNike" product="nike">NIKE</label></li>
			<li><img src="img/item.gif" /><label id="lblKuangWei" product="converse">匡威</label></li>
			<li><img src="img/item.gif" /><label id="lblAddNice" product="addnice">AddNice</label></li>
			<li><img src="img/item.gif" /><label id="lblLiNing" product="lining">李宁</label></li>
			<li><img src="img/item.gif" /><label id="lblLee" product="lee">Lee</label></li>
		</div>
	</ul>
	<div id="tips"></div>
	<div id="content"></div>
</body>
</html>
item.gif

close.gif

open.gif

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<style type="text/css">
body {
	font-size: 16px;
	background-color: #FFF;
}

ul li {
	list-style: inside;
	margin-left: 20px;
	list-style: none;
}

#content {
	position: absolute;
	left: 400px;
	top: 20px;
	 500px;
	height: 400px;
	border: 1px solid #cccccc;
}

#tips {
	position: absolute;
	z-index: 1;
	border: 1px solid #cccccc;
	background-color: #FFC;
	display: none;
	font-size: 14px;
}

.lightlabel {
	color: red;
	text-decoration: underline;
	cursor: pointer;
}
</style>
<title>JQUERY树状菜单</title>
<script type="text/javascript" src="script/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
  //实现每颗树的显示或者隐藏
  $(function(){
	  //ID选择器
	  //组合选择器
	  $("#lblNews,#lblProducts").click(function(){
		 //var obj=$("#lblNews").siblings();//siblings():获取到同辈元素的元素集合  div    img
		  //var containerDiv=$("#lblNews").siblings("div");//div
		  //var img=$("#lblNews").siblings("#imgOnOff");//img
		  var containerDiv=$(this).siblings("div");// div this:是当前事件触发的元素对象  $(this)--->jq对象
		  var img=$(this).siblings("#imgOnOff");//img this:是当前事件触发的元素对象  $(this)--->jq对象
		 // console.info(containerDiv);
		 //console.info(img);
		 
		 //进行效果显示控制
		  //alert(containerDiv.css("display"));//获取CSS样式属性
		 
		 if(containerDiv.css("display")=="block"){//显示----》隐藏
			 //containerDiv.hide(1000);//隐藏动画
			 containerDiv.slideUp(1000);//滑上
			 img.attr("src","img/close.gif");
		 }else{//隐藏----》显示
			 //containerDiv.show(1000);//显示动画
			 containerDiv.slideDown(1000);//滑下
			 img.attr("src","img/open.gif");
		 }
	  });
  });
  
  //实现所有树的显示或者隐藏
  $(function(){
	  $("#openclose").click(function(){
		  //获取元素对象    4个   2个div   2个img
		  //属性选择器    全匹配   首匹配   尾匹配   模糊匹配
		  //$("div[name^=div]");// 首匹配 
		  //$("div[name$=Container]");//尾匹配
		 var div= $("div[name*=Contain]");// 模糊匹配 2个div 
		 
		 var img=$("img[name='imgOnOff']");//全匹配  
		// console.info(img);
		 //console.info(div);
		 
		 //进行显示控制
		 //注意：div中有两个以上的元素对象时，获取样式属性的时候，会以第一个div元素为基准点进行判断
		 if(div.css("display")=="block"){//显示----》隐藏  
			 div.fadeOut(1000);//滑上
			 img.attr("src","img/close.gif");
		 }else{//隐藏----》显示
			 div.fadeIn(1000);//滑下
			 img.attr("src","img/open.gif");
		 }
	  });
  });
  
  //实现横向排列  和纵向排列
  $(function(){
	  //实现横向排列   
	  $("#horder").click(function(){
		  //子对象选择器    层级选择器
		 var li= $("ul>div>li");//8个
		 
		 
		 //进行效果显示控制
		 //实现横向排列实际就是操作li标签的css样式属性中的浮动属性,值为左浮动
		 li.css("float","left");//设置
	  });
	  
	  //实现纵向排列
	  $("#vorder").click(function(){
		  //层级选择器
		  var li=$("ul li");//8个
		  
		//进行效果显示控制
	    //实现纵向排列实际就是操作li标签的css样式属性中的浮动属性,清除左浮动
	   li.css("float","none");
	  });
  });
  
  //提示信息的实现     鼠标移上去mouseover():给出提示信息   鼠标离开mouseout():的时候清空提示信息      event对象：事件触发过程中由浏览器产生，我们直接使用即可
  $(function(){
	  //鼠标移上去mouseover():给出提示信息
	  $("ul div li label").mouseover(function(event){
		  //获取label标签的文本值
		  var txt=$(this).text();
		  //获取用于信息的提示的元素对象，设置提示信息
		  $("#tips").html("<b>点击查看【"+txt+"】信息</b>");
		  
		  //控制提示信息显示的位置  left  top
		  $("#tips").css("left",event.pageX+10);
		  $("#tips").css("top",event.pageY+5);
		  
		  //显示
		  $("#tips").show();
		  
		  //为当前的label标签增加一个class样式
		  $(this).addClass("lightlabel");
	  });
	  
	  //鼠标离开mouseout():的时候清空提示信息 
	  $("ul div li label").mouseout(function(){
		  //获取用于信息的提示的元素对象，清空提示信息
		  $("#tips").html("");
		  
		  //设置提示信息的位置   归于原点   0  0
		   $("#tips").css({left:"0","top":"0"});
		  
		  //将提示的元素对象div隐藏
		  $("#tips").hide();
		  //为当前的label标签移除一个class样式  lightlabel
		  $(this).removeClass("lightlabel");
	  });
  });
  
  //获取新闻
  $(function(){
	  $("div[name='divNewsContainer'] label").click(function(){
		   var ntype=$(this).attr("ntype");
		  //发送ajax请求
		  $.ajax({
			  url:"news.action",
			  type:"get",
			  data:{"ntype":ntype},
			  dataType:"json",
			  success:function(result){
				  //进行页面显示控制
				  
				  var content=$("#content");
				  content.empty();
				  //遍历进行新闻追加
				  for(var i=0;i<result.length;i++){
					  var news=result[i];
					  content.append("<a href='#'>"+news.title+"("+news.time+")"+"</a><br/>"); 
				  }
			  },
			  error:function(xhr,text,message){
				  console.info(xhr);
				  //console.info(text);
				  //console.info(message);
				  if(xhr.status==500){
					  alert("服务器异常，请联系管理员");
				  }
			  }
		  });
	  });
  });
  
  
  //获取产品log
  $(function(){
	  $("div[name='divProductsContainer'] label").click(function(){
		  //获取产品 牌名称
		  var p=$(this).attr("product");
		  var url="product.action";
		  var data={"p":p};
		  //进行显示控制
		  $("#content").load(url,data);
	  });
  });
</script>
<body>
	<p>
		<input type="button" name="openclose" id="openclose" value="展开/折叠" />
		<input type="button" name="horder" id="horder" value="横向排列" /> 
		<input type="button" name="vorder" id="vorder" value="纵向排列" />
	</p>
	<ul>
		<img id="imgOnOff" name="imgOnOff" src="img/open.gif" />
		<label id="lblNews"> 国际动态</label>
		<div name="divNewsContainer">
			<li><img src="img/item.gif" /><label id="lblLocal" ntype="local">国内新闻</label></li>
			<li><img src="img/item.gif" /><label id="lblInternational" ntype="international">国际新闻</label></li>
		</div>
	</ul>
	<br />
	<ul>
		<img id="imgOnOff" name="imgOnOff" src="img/open.gif" />
		<label id="lblProducts"> 产品展示</label>
		<div name="divProductsContainer">
			<li><img src="img/item.gif" /><label id="lblAdidas" product="adidas">阿迪达斯</label></li>
			<li><img src="img/item.gif" /><label id="lblNike" product="nike">NIKE</label></li>
			<li><img src="img/item.gif" /><label id="lblKuangWei" product="converse">匡威</label></li>
			<li><img src="img/item.gif" /><label id="lblAddNice" product="addnice">AddNice</label></li>
			<li><img src="img/item.gif" /><label id="lblLiNing" product="lining">李宁</label></li>
			<li><img src="img/item.gif" /><label id="lblLee" product="lee">Lee</label></li>
		</div>
	</ul>
	<div id="tips"></div>
	<div id="content"></div>
</body>
</html>

item.gif

close.gif

open.gif

查看全文

相关阅读:
在C#代码中应用Log4Net（二）典型的使用方式
 在C#代码中应用Log4Net（一）简单使用Log4Net
Windows Azure Active Directory (2) Windows Azure AD基础
 Windows Azure Virtual Network (6) 设置Azure Virtual Machine固定公网IP (Virtual IP Address, VIP) (1)
Windows Azure Active Directory (1) 前言
 Azure China (6) SAP 应用在华登陆 Windows Azure 公有云
 Microsoft Azure News(3) Azure新的基本实例上线 (Basic Virtual Machine)
Microsoft Azure News(2) 在Microsoft Azure上运行SAP应用程序
 Microsoft Azure News(1) 新的数据中心Japan East, Japan West and Brazil South
Windows Azure HandBook (2) Azure China提供的服务

原文地址：https://www.cnblogs.com/wcyMiracle/p/12411581.html