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;
width: 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;
width: 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
浙公网安备 33010602011771号