Jquery | newmiracle学习天地

jquery swipper 轮播中间图放大解决方案

直接把swipper-container 高度设置高一点然后图片垂直居中就不怕放大的时候部分被截取了

.tuandui-swiper-container .swiper-slide-next{
    -webkit-transform:scale(1.2,1.2);
    overflow: visible;
}

jquery trigger使用方法

jquery trigger使用方法
比方说写了下面点击事件采用trigger 要触发他

   $('.biaoqian_ula').on('click',function () {
        $('.lianxi_nav img').css('border','1px #d6d6d6 solid');
        $(this).css('border','1px #e99a83 solid');

        $('.chanpininfo').css('display','none');
        $('.ulapic_info').fadeIn();
    })

$(".biaoqian_ula").trigger("click");

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鼠标经过弹出层写法

<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向上滚动页面的写法

  $('.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();
        }
    });

jquery选择器的高级用法

根据类然后根据属性来获取

$(".danxuan_tiyan[is_select=1]")

jquery自定义单选框的方法

直接用div做再加事件基本原理就这样
1 多选的时候点击1个div 就加属性记录选中了
2 点击1个其他几个消失。。

jquery json对象转换

//json数组转json串
var arr = [1,2,3, { a : 1 } ];
JSON.stringify( arr );

//json字符串转json数组
var jsonStr = '[1,2,3,{"a":1}]';
JSON.parse( jsonStr );

额外小知识:
如果要拼json字符串以下2种写法 (先拼接json对象然后再转换成json字符串)

var contact = new Object();
contact["firstname"] = "Jesper";
contact["surname"] = "Aaberg";
       console.log(JSON.stringify(contact));

   var sellist = [];
  $('.sel').each(function() {
                var sel = $(this).val();
                sellist.push(sel);
            })
       var sellist = JSON.stringify(sellist);

jquery实现tab菜单点击换菜单图片方法

jquery实现tab菜单点击换菜单图片方法代码如下

<div class="menulist">
<p class="active" cur="p1">
    <img class="img1" src="{$yuming}/images/menu/jituanjianjie.jpg" alt="">
    <img class="img2" src="{$yuming}/images/menu/jituanjianjie_h.jpg" alt="">
</p>
<p cur="p2">
    <img class="img1"   src="{$yuming}/images/menu/jituanrongyu.jpg" alt="">
    <img class="img2"  src="{$yuming}/images/menu/jituanrongyu_h.jpg" alt="">
</p>
<p cur="p3">
    <img class="img1"  src="{$yuming}/images/menu/dashiji.jpg" alt="">
    <img class="img2"  src="{$yuming}/images/menu/dashiji_h.jpg" alt="">
</p>
<p  cur="p4">
    <img class="img1"  src="{$yuming}/images/menu/kongjian.jpg" alt="">
    <img class="img2" src="{$yuming}/images/menu/kongjian_h.jpg" alt="">
</p>
</div>

.menulist{
    width:100%;
    height:auto;
    overflow: hidden;
    background: #b49b87;
}
.menulist p{
    width: 23.2%;
    text-align: center;
    display: block;
    float: left;
    padding: 0px;
    margin: 0px;
    margin-left: 0.2rem;
    margin-top: 0.4rem;
    float: left;
    position: relative;
}
.menulist p img{
    width:100%;
}
.img1{
    width:100%;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 2;
}
.active .img1{
    display: none;
}

    $('.menulist p').on('click', function () {
        $(this).addClass('active');
        $(this).siblings('p').removeClass("active");
 
    })

ps 原理就是点击控制class

jquery实现比较靠谱的手风琴代码

比较靠谱的手风琴代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>自制手风琴</title>
    <script type="text/javascript" src="/index/js/jquery.min.js"></script>
    <style type="text/css">


        .menulist li {
            display: none;
        }


    </style>
</head>
<body>
<div class="menulist">
    <ul>
        <span>AAAAA<b>+</b></span>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ul>
    <ul>
        <span>BBBBB<b>+</b></span>
        <li>22222</li>
        <li>22222</li>
        <li>22222</li>
    </ul>
    <ul>
        <span>CCCCC<b>+</b></span>
        <li>33333</li>
        <li>33333</li>
        <li>33333</li>
        <li>33333</li>
        <li>33333</li>
    </ul>
    <ul>
        <span>DDDDD<b>+</b></span>
        <li>44444</li>
        <li>44444</li>
    </ul>
    <ul>
        <span>EEEEE<b>+</b></span>
        <li>55555</li>
        <li>55555</li>
        <li>55555</li>
    </ul>
</div>
<script type="text/javascript">
    $(function () {
        $('span').click(function () {
            if ($(this).siblings('li').hasClass('on')) {
                $(this).siblings('li').slideUp(500).removeClass('on');
                $(this).children('b').text('+');
            } else {
                $(this).siblings('li').slideDown(500).addClass('on');
                $(this).children('b').text('-');
            }
        });
    });
</script>
</body>
</html>