前端学习

          做项目的新首页已经快半个月了，将自己其中碰到的问题，或者觉得有用的东西写下吧。由于是通过自己回忆来写，可能思路有点乱，有时间再整理吧。PS：只用过html还是N年前的事了，敬请不BS，，哈哈。。。

         首先，是盒模型，这个确实重要，如果不理解清楚它肯定会导致元素位置或者由于浏览器的放大缩小而出现问题，其中从外到里有三层，即margin、border、padding，最里面是content，也就是内容。元素中具体的内容放在content中，而三层则可以通过css的设置来实现各种样式。

        其次，对自己用到的css样式进行回忆归纳下。有 -webkit-filter用于设置灰度的， -webkit-filter: grayscale(100%)!可以实现图片的灰度化。 而通过如下设置-webkit-filter: grayscale(0%)!important;则可以将元素内的图片恢复彩色；  hover可以是对当前元素上的样式改变，也可以仅对其子元素进行样式改变(在hover 后面接子元素名再写函数体)；margin: 0 auto，能够达到居中的目的，而设置margin-left:auto，margin-right:auto;也可以居中；这里有一个<div style="clear:both"></div>不知道是什么但是可以使原来在浮动的元素能够成功居中，希望有懂的朋友看到的话，回复下，在此多谢；

        再者，js代码吧。jQuery('#idname).hide();/.show()；可以设置元素的显示与否。

        var picArr = new Array();
        picArr[0] = ".images/img/main/roll1.png";
        picArr[1] = ".images/img/main/roll2.png";
        var btnArr = new Array();
        btnArr[0] = $(btn1);
        btnArr[1] = $(btn2);

        var index = 0;
        var i = 0;
        function changeImg(){
            if(index < 1) {
                index++;
            } else {
                index = 0;
            }
            document.getElementById("idname").src=picArr[index];          //设置idname的元素，src为相应图片,元素应为img
            i = 0;
            while(i<=1) {
                if(i == index) {
                    btnArr[i].css("background-position","0 0");        //通过 .css() 设置样式
                } else {
                    btnArr[i].css("background-position","30px 0");
                }
                i++;
            }
        }
        _internal = window.setInterval("changeImg()",5000);       // 定时函数

       $(rollleft).hover(function(){})   .click()  .mouseleave() ......jquery定义鼠标函数

      $(btn).click(function(){
            index = 0;          //修改上面的变量index要放在样式更改之前
            $(rollbtn1).css("background-position","0 0");
            $(rollbtn2).css("background-position","30px 0");
            $(rollbtn3).css("background-position","30px 0");
            $(rollbtn4).css("background-position","30px 0");
            document.getElementById("rollimg").src=picArr[0];
            clearInterval(_interval);      //点击事件发生，则停止定时任务
        });

             function get(){           //通过ajax去后台拿数据，并通过showNum函数显示数据
            jQuery.ajax({
                url : '$ctx/get',
                type : 'get',
                dataType : 'json',
                success : function(data){
                    if(data.success){
                        showNum(data.num);
                    }
                }
            });

        _internal = window.setInterval("getCmtNum()",500);       //设置定时执行
        window.onload = function(){                     //在页面渲染的时候执行
            get();
        }

          挺晚了，想起来的就这么多，项目还木有上线，后续有内容再加上。