web前端的一些小知识

1、如何让ul下面的li在hover改变样式时，让前面的小圆点一起改变样式？

.left_con ul li:before{ //前面的小圆点采用before在创造
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #74787e;
    margin-right: 10px;
    vertical-align: 3px;
}
.left_con ul li:hover{
    color: #009CD6;
}
.left_con ul li:hover:before{
    background: #009CD6;  //hover时改变圆点的背景色
}

2、如何让hover的变化不再那么生硬？

a:hover{
    color:#888;
    transition:color 1s;
    -moz-transition:color 1s;     /* Firefox 4 */
    -webkit-transition:color 1s;    /* Safari and Chrome */
    -o-transition:color 1s;    /* Opera */
}

3、如何让bootstrap的模态框垂直居中？

//使页面中所有.modal元素在窗口可视范围之内居中
function centerModals(){
  $('.modal').each(function(i){
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 50 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top-50);
  });
}

//在模态框出现的时候调用垂直居中函数
$('.modal').on('show.bs.modal', centerModals);

 //在窗口大小改变的时候调用垂直居中函数
$(window).on('resize', centerModals);

4、Fullpage插件与页面上的滚动条

在使用Fullpage插件时，如何你的某一页面上有滚动条，而且不想在滚动鼠标时让插件的滚动和元素的滚动冲突，可以采用以下的方法：

//$('#msg')表示需要滚动条的元素
$('#msg').scroll(function(){
    if($(this).scrollTop() != 0){
        $(this).fullpage.setAllowScrolling(false);
    }else{
       $(this).fullpage.setAllowScrolling(true);
    }
})

setAllowScrolling（true|false,[directions]）

添加或者禁止Fullpage自动绑定的鼠标滑轮和移动触摸事件，不过用户任然可以通过键盘和点击快速导航的方式切换section/slide。

5、火狐浏览器的鼠标滚轮事件和其他浏览器不一样！

火狐浏览器：DOMMouseScroll

其他浏览器：onmousewheel

所以火狐浏览器的写法是：

obj.addEventListener("DOMMouseScroll", function(){
    move();
});

6、 在使用iframe的情况下，可能会出现几个body,几个html的情况，此时该如何获取不同body中的元素内容呢？

（1）iframe子页面获取父页面元素的方法

格式：$('#父窗口中的元素ID', parent.document).click();
实例：$('#btnOk', parent.document).click();

（2）在父窗口中获取iframe中的元素

格式：$("#iframe ID").contents().find("#iframe中的ID").click();
实例：$("#ifm").contents().find("#btn").click();                         //jquery 方法1

格式：$("#iframe的ID",document.frames("frame的name").document).click();   //jquery 方法2
实例：$("#btn",document.frames("ifm").document).click();

7、Js如何获取数组中的一部分元素

（1）arrayObj.shift( )，可移除数组中的第一个元素并返回该元素。

var ary = [1,2,3,4];
var a = ary.shift();  //a=1;ary=[2,3,4];

（2）arrayObj.slice(start, end) ，slice 方法返回arrayObj 的指定部分的Array 对象

参数：start，截取数组开始下标；

     end，截止的下标，但不包括end元素。

var ary=[1,2,3,4];
var newary = ary.slice(0, 2)；  //newary=[1,2]，不包括下标2 所对应的元素3。

8、如何获取一个对象的长度：

 function getJsonLength(jsonData){
    var jsonLength = 0;
    for(var i in jsonData){
        jsonLength++;
    }
    return jsonLength;
 }

9、如何获取一个数组中的最大值和最小值（jquery方式）

var a=[1,2,3,5];
var max = Math.max.apply(null, a) ;   //最大值
var min = Math.min.apply(null, a) ;   //最小值

10、HTML 标签：组合表单中的相关元素

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

11、如何让input框止可选择，不可输入？

//后面的onfocus不需要引号
//input的最后没有后斜线
<input type="text" id="notEdit" onfocus = this.blur()>

12、关于全选按钮的问题

$('.select-all').click(function(){
    if(flag){
        $('input[type="checkbox"]').prop('checked',true);
    }else{
        $('input[type="checkbox"]').prop('checked',false);
    }
})

注意：prop不能设置为attr，不然全选一次，取消全选之后，再点击全选就不会再选中了。