jquery serialize()函数用法

jquery serialize()函数用法

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").text($("form").serialize());
  });
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>

<button>序列化表单值</button>
<div></div>
</body>
</html>

ps:注意必须所有控件在form表单内才可以获取到

使用jquery操作iframe中的元素

使用jquery操作iframe中的元素

<script>
window.onload = function() {
    $( "#frameTHY" ).contents().find( "a" ).css( "background-color", "red" );
};
</script>

另外这里说一下,iframe的src的地址必须是当前站点域名内的才能够被访问到,否在的话是访问不到的,比如下面这种情况。
还有一点需要注意,如果你要获取iframe中的元素,那么必须使用window.onload,必须是这个页面加载完后执行,一定不能是页面初始化 不然没效果的

jquery换一批的写法

jquery换一批的写法

  <img src="{$yuming}/images/3/huanyipi.png" alt="" currentindex="1" count="3" class="huanyipi">
 $('.huanyipi').on('click',function () {
         var currentindex=parseInt($(this).attr('currentindex'));
         var count=parseInt($(this).attr('count'));
        currentindex++;
        if(currentindex>count){
            currentindex=1;
        }
        $(this).attr('currentindex',currentindex);
        $('.bufenlist').css('display','none');
        $('.bufen'+currentindex).fadeIn();
    })

点一次一次currentindex+1 来判断 就行了

jquery swiper入场和出场动画

jquery swiper入场和出场动画

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
    <link rel="stylesheet" href="path/to/animate.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
    <script src="path/to/swiper.animate-twice.min.js"></script>
</body>
</html>
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  } 
  })        
  </script>

<div class="swiper-slide a">
            <div class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">内容1</div>
        </div>

4.说明

在每个要动画的类上面添加一个 ani的类名 然后在后面的DATA内 多了两个参数 data-slide-in 进场动画和 data-slide-out出场动画
参数是一致的。

at 500 from bounceInRight use swing during 500
在 多少时间开始 以 什么动画 使用 什么速度 动画用时 多少 (force 是否使用 只在出场的时候判断)

at 后面跟的是 动画延迟时间
from 后面跟的是 动画样式
use 后面跟的是 动画力度
during 后面跟的是 动画持续时间
force 后面跟的是 是否使用 只有在出场动画的时候使用。进场动画无效。。
出场动画执行时间 =进场等待时间(at)+进场动画执行时间(during)+出场等待时间(at)

jquery on绑定事件叠加解决方法

jquery on绑定事件叠加解决方法

代码如下

  $('.maoqiu').each(function () {
        var is_bind = $(this).attr('is_bind');
        if (is_bind != 1) {
            $(this).attr('is_bind', 1);
            $(this).on('touchend', function () {

                var that = $(this);
                that.addClass('fadeOutRight animated');

                mcount++;

                setTimeout(function () {
                    that.remove();
                    $('.p3_wz2').text(mcount);

                }, 500)

            })
        }

    });

jquery swiper自定义pagination的方法

jquery swiper自定义pagination的方法

<script>
var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  paginationBulletRender: function (swiper, index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});  
</script>

具体详情http://www.swiper.com.cn/api/pagination/2014/1217/70.html

ps:自定义classname方法

   bulletClass: 'chanpin-bullet',
        bulletActiveClass: 'chanpin-bullet-active',

jquery鼠标经过弹出层写法

jquery鼠标经过弹出层写法

<div class="navitem"><a href="/index.php?c=news&amp;a=index&amp;id=52">新闻中心</a>
<div class="navitemlist" style="display: none;">
<a href="/index.php?c=news&amp;a=index&amp;id=52">公司新闻</a>
<a href="/index.php?c=news&amp;a=index&amp;id=53">媒体报道</a>
</div>
</div>
    $(".navitem").hover(function(){
        $(this).children('a').next('.navitemlist').fadeIn();
    },function(){
        $(this).children('a').next('.navitemlist').css('display','none');
    });
.header .navitem {
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    display: block;
    line-height: 102px;
    font-size: 16px;
    color: #242169;
    border-bottom: 1px #FFF solid;
    text-decoration: none;
    float: left;
    position: relative;
}
.navitemlist {
    height: auto;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 75px;
    background: #FFF;
    z-index: 9999;
    text-align: left;
    display: none;
}

jquery向上滚动页面的写法

jquery向上滚动页面的写法

  $('.arrow_top').on('click',function () {
        $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
        $body.animate({scrollTop: 0}, 1000);

    })
    $(window).scroll(function() {
        if(parseInt($(document).scrollTop())>=300){
            $('.arrow_top').fadeIn();
        }else{
            $('.arrow_top').fadeOut();
        }
    });