JQuery案例

 

想使用Jquery ，必须要导入Jquery的库文件jquery-1.7.2.min.js：​

 

1.鼠标经过图片切换

运行效果图

杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]_jquery

示例代码：

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>鼠标经过图片切换</title>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
//从哪下手写程序? 从事件着手
/*$('img').mouseover(function(){
      $(this).attr('src','images/3.jpg');
    }).mouseout(function(){
      $(this).attr('src','images/1.jpg');
    });*/
//如果hover 里边鼠标经过和离开时一样的事件指令，那么可以写一个
//如果hover事件不同
$('img').hover(function(){
$(this).attr('src','images/3.jpg');
    },function(){
$(this).attr('src','images/1.jpg');
    });
  });
</script>
</head>
<body>
<img src="img/1.jpg" height="320" width="400" alt="" />
</body>
</html>

Img素材

杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]_JQuery案例_02杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]_3c_03

jQuery控制css类选择器的切换

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>类的切换</title>
<style>
div{
width:200px;
height:200px;
background: #ccc;
  }
.box{
border:1px solid #000;
  }
.changeColor{
border:1px solid #000;
background:pink;
  }
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
$('button:eq(0)').click(function(){
$('div').addClass('box');
    });
$('button:eq(1)').click(function(){
$('div').removeClass('box');
    });
$('button:eq(2)').click(function(){
$('div').toggleClass('changeColor');
    })
  })
</script>
</head>
<body>
<button>添加类</button>
<button>移除类</button>
<button>切换类</button>
<div></div>
</body>
</html>

淘宝商品菜单展示

运行效果图：

杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]_3c_04

示例代码：

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>淘宝商品展示</title>
<style>
  *{
margin:0;
padding:0;
list-style: none;
  }
div{
width:600px;
margin:50px auto;
border:1px solid #000;
padding:10px;
  }
div ul{
overflow: hidden;
  }
div li{
float:left;
width:200px;
height: 30px;
text-align: center;
line-height: 30px;
  }
div p{
width:200px;
height:30px;
line-height: 30px;
text-align: center;
border:1px solid #000;
margin:0 auto;
cursor: pointer;
  }
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
$('li:gt(2):not(:last)').hide();
//点击显示
$('p').click(function(){
$('li:gt(2):not(:last)').slideToggle(500);
//如果点击的时候，当前是‘显示所有内容’ 就变为  ‘隐藏所有内容’  否则‘显示所有内容’
if( $('p').html() == '显示所有内容' ){
$('p').html('隐藏所有内容');
      }else{
$('p').html('显示所有内容');
      }
    });
  })
</script>
</head>
<body>
<div>
<ul>
<li>佳能</li>
<li>索尼</li>
<li>三星</li>
<li>尼康</li>
<li>松下</li>
<li>卡西欧</li>
<li>富士</li>
<li>可达</li>
<li>宾得</li>
<li>理光</li>
<li>奥林巴斯</li>
<li>明基</li>
<li>显示其它品牌</li>
</ul>
<p>显示所有内容</p>
</div>
</body>
</html>

百度风云榜

运行效果图：

杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]_jquery_05

示例代码：

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>百度风云榜</title>
<style>
  *{
margin:0;
padding:0;
list-style: none;
  }
.box{
width: 100px;
border:1px solid #000;
background:#06f;
margin:100px;
color:#fff;
padding:10px;
  }
.box li{
cursor: pointer;
  }
.box span{
background:url(images/close.gif) no-repeat left center;
padding-left:14px;
  }
.box ul{
padding-left:14px;
display: none;
  }
.box .current ul{
display: block;
  }
.box .current span{
background:url(images/open.gif) no-repeat left center;
  }
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
/*$('.box>li').click(function(){
      $(this).toggleClass('current').siblings().removeClass('current');
    });*/
$('.box span').click(function(){
$(this).parent().toggleClass('current').siblings().removeClass('current');
    });
  })
</script>
</head>
<body>
<ul class="box">
<li>
<span>事件</span>
<ul>
<li>上周</li>
<li>最近</li>
<li>上月</li>
</ul>
</li>
<li>
<span>娱乐</span>
<ul>
<li>游戏</li>
<li>电视</li>
<li>电影</li>
</ul>
</li>
<li>
<span>人物</span>
<ul>
<li>美女</li>
<li>帅哥</li>
<li>明星</li>
</ul>
</li>
</ul>
</body>
</html>

 

 

回到顶端

运行效果图：

杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]_JQuery案例_06

示例代码：

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>回到顶部</title>
<style>
a{
width: 100px;
height: 100px;

position: fixed;
right: 20px;
bottom: 20px;
  }
</style>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function() {
$('p').html('这是文字内容');
  });
</script>
</head>
<body>
<a href="#"><i class="fa fa-rocket fa-3x" style="transform: rotate(-45deg); color:#ccc;"></i></a>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>

素材：font-awesome.min.css

​

 

未完，会持续补入后续案例！

 

如果有需要查看JQueryAPI文档的童鞋，可以移步这里进行下载：

 

作者： 杨校


Java互联网交流学习群：827829292