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

查看全文

相关阅读:
Asp.Net Core MVC + Code First + Mysql 项目创建以及相关配置
 linux安装 docker compose v2
压缩、解压解决客户端查询大批量数据时等待时间过长的问题
 c# 通过经纬度查询地址、区域信息
 excel 文件转 dataset ，jqgrid 中模糊查询与下拉联动的实现
 jqgrid mvc 导出excel
SQL学习笔记三表的字段操作
 SQL学习笔记高级教程
 安装docker
SQL学习笔记一数据类型

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