jQuery菜鸟学习实例 -

sgp420

浏览: 103922 次
性别:
来自: 深圳

最近访客更多访客>>

xubukang

陈时雨yeah

jiejiaohupo

ljxxjz

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery菜鸟学习实例

博客分类：

JQuery

引用的<script src="http://code.jquery.com/jquery-latest.js"></script>

例子<一>：实现字体变大或变小

1、主体部分：

<body>
   <a href="#" id="larger">Larger</a></br>
   <a href="#" id="smaller">Smaller</a>
   <p>when click Larger font change Big and click Smaller font change small;when click Larger font change Big and click Smaller font change small;</p>
</body>

2、jQ代码：

3、效果图：

例子<二>：实现图片切换的效果

1、主体部分：

2、jQ代码：

3、CSS代码

  <style type="text/css">
  #container{
   width:850px;
   text-align:center;
   margin:auto;
  }
  .wrap{
      width: 250px;
      height: 140px;
      position: relative;
      overflow: hidden;
      float: left;
  }

  img{
    position:absolute;
    top:0;
    left:0;
  }
</style>

4、效果图

例子<三>：实现添加与移出数据效果

1、主体部分：

<body>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    <a href="#" id="add">Add List Item</a><br>
    <a href="#" id="remove">Remove List Item</a>
</body>

2、jQ代码：

<script type="text/javascript">
    $(function(){
      var i = $('li').size()+1;
       $('a#add').click(function(){
          $('<li>'+i+'</li>').appendTo('ul');
          i++;
       });

       $('a#remove').click(function(){
         $('li:last').remove();
         if (i != 0){
           i--;
        }
       });
    });

</script>