Jquery | newmiracle学习天地

jquery json对象转换

parse用于从一个字符串中解析出json对象,如

var str = '{"name":"huangxiaojian","age":"23"}'

结果：

JSON.parse(str)



Object

age: "23"
name: "huangxiaojian"
__proto__: Object



注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。



stringify()用于从一个对象解析出字符串，如


var
 a = {a:1,b:2}

结果：

JSON.stringify(a)


"{"a":1,"b":2}"










其他key value写法
     var param = [];
        param.push({"timu":1,"sel":2});
        param.push({"timu":2,"sel":3});
       var json = JSON.stringify(param);
       console.log(json);

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>

jquery预加载显示百分比

  <img class="bj loadimg" loadimg="/weiqingshu/images/1/bj.jpg"/>

  imgNum=0;
    var load_img = [];
  /*$('.loadimg').each(function () {
        var loadimg=$(this).attr('loadimg');
        load_img.push(loadimg);
    })*/
    load_img.push( '/caigeci/images/answer0.jpg' );
    load_img.push( '/caigeci/images/answer1.jpg' );
    /*ss*/
    jQuery.imgpreload(load_img, {
        each: function () {
            /*this will be called after each image loaded*/
            var status = $(this).data('loaded') ? 'success' : 'error';
            if (status == "success") {
                var v = (parseFloat(++imgNum) / load_img.length).toFixed(2);
                console.log(Math.round(v * 100) + "<sup>%</sup>");
            }
        },
        all: function() {
            console.log('全部加载完成');
   /*$('.loadimg').each(function () {
                var loadimg=$(this).attr('loadimg');
                $(this).attr('src',loadimg);
            })*/
        }
    });

ps:加载的文件个数 /全部文件个数的百分比就是进度

jquery监听回车

    $("#loginusername, #loginpassword, #code").keydown(function() {
                   if(event.keyCode == "13"){
                       loginajax();
                   }

             });

只能在input 输入框上监听到键盘的事件哦或者写body 代表body区域内监听也可以

jquery ajax分页写法

jquery ajax分页写法
我用的是laypage插件

前端代码

        function demo(curr) {
            $.getJSON('/home/index/getinfo', {
                page: curr || 1 //向服务端传的参数，此处只是演示
            }, function (res) {
                var html = '';
                var list = res.data.list;
                $.each(list, function (k, v) {
                    html += '<div';
                    if(k%2==0){
                        html += ' style="margin-left:0px;"';
                    }
                    html += ' class="perinfocontent" onclick="window.location.href=\'content.html?id='+v['id']+'\'">';
                    html += '<img src="'+v['fengmiantu']+'" alt="" class="pic">';
                    html += '<div class="infos">';
                    html += '<div class="title">'+v['title']+'</div>';
                    html += '<div class="tiyao">'+v['content']+'</div>';
                    html += '<div class="publishtime">2017 / 1 / 23</div>';
                    html += '</div>';
                    html += '</div>';
                });

                $('.infocontent').html(html);

                //显示分页
                laypage({
                    cont: $('#page3'), //容器。值支持id名、原生dom对象，jquery对象,
                    pages: res.data.pagecount, //总页数
                    skip: true, //是否开启跳页
                    skin: 'molv',
                    curr: curr || 1, //当前页
                    jump: function (obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr

                        demo(obj.curr);
                        }
                    }
                });

            });
        };
//运行
        demo();

PHP代码

    public function getinfo(){
        $page = intval($_GET['page']);
     
        if(empty($page)){
            $page=1;
        }
        $startpos=$page-1;
        //返回每页的数据
        $percount = 8;
        $VModel = new HuanShanVoteModel();
        $sql = 'select * from wz_content order by id desc limit '.$startpos*$percount.',' . $percount;

        $result = $VModel->query($sql);
        foreach ($result as $k => $v) {
            $result[$k]['content'] = substr(stripHTML(htmlspecialchars_decode($v['content'])), 0, 30) . '......';
            $result[$k]['time'] = date('Y / M / D', $v['time']);
        }

        //返回总页码数
        $VModel = new HuanShanVoteModel();
        $sql = 'select title,content from wz_content';
        $alllist = $VModel->query($sql);
        $count = count($alllist);
        $pagecount = ceil($count / $percount);

        echo json_encode(array('success'=>1,'msg'=>'查询成功','data' => array('pagecount' => $pagecount, 'list' => $result)));
        exit();
    }

jquery关于on click事件的理解

<a style="min-width:60px; margin-left:6px;" wenzhangid="'+v['id']+'" type="button" class="btn btn-w-m btn-danger deletewenzhangbtn">删除 </a>

当这个删除按钮是动态生成的那时间也要写在生成html 下面才能绑定事件
ps: 显示隐藏html用on 绑定事件就行了

jquery swipper插件的一些弊端

jquery swipper插件的一些弊端
touch触摸机制是swipper的

阻止click冒泡。拖动Swiper时阻止click事件。下面这个方法或许可以解决触摸机制的问题

<div class="swiper-slide" onclick="alert('你点了Swiper')">
<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
preventLinksPropagation : false,
})
</script>

2动画问题 swipper动画影响是全局的每次操作会影响每个container 所以动画只能用在1给地方是最稳定的
或者执行下