bootstrap中的几个JS

1 . 回到顶部

$('.top').hide();
$(window).scroll(function(){
   $('.top').show();
   if($(window).scrollTop == 0){
      $().hide();
   }
});
//点击回到顶部
$('.top').click(function(){
   $(window).scrollTop(0);
});

2 . 幻灯片上面的文字

.carousel-caption{
   position:absolute;			
   width:80%;
   height:40%;
   top:50%!important; /* 不继承值 */
   left:100px!important;
   background:#000;
   opacity:0.2;
   padding-bottom:50%!important;
}

//hover 鼠标悬停事件
$('carousel-caption').hide();
$('.item').hover(
  function(){
    //parent() 获取父元素
    //parents() 获取所有的爷父元素包括body
    //parents('') 获取某个爷父元素
    //parentsUntil() 获取所有的爷父元素
    //parentsUntil('') 获取某个爷父元素以及以下的元素
    //children() 获得所有的子元素
    //children('') 获得多个或某个子元素 
    //find() 获得所有的子孙元素
    //find('') 获得多个或某个子孙元素

    //$('p:first') / $('p').first() 获取所有p标签的第一个

    //$('p').next(); 获取p标签下面所有的标签
    //$('p').next(''); 获取p标签下面所有的类属性的的标签
    //http://www.w3school.com.cn/tiy/t.asp?f=jquery_selector_first
    
    //以上方法可以用 http://www.runoob.com/try/try.php?filename=tryjquery_traversing_parentsuntil 试试

    //$('p').css('color','red'); jquery动态赋值一个css值
    //$('p').css({'color':'red','background':'black'}); jquery动态赋值多个css值
   
    //$('p').attr(''); 也就是attribute() 获得某个属性的值,比如获得某个p标签id='idx'的值:$('p').attr('id');
    //$('p').attr('',''); 给某个属性赋值    

   $(this).find('carousel-caption').stop().slideDown(); //通过使用滑动效果,显示隐藏的被选元素
  },
  function(){ 
    $(this).find('carousel-caption').stop().slideUp(); //通过使用滑动效果,隐藏显示的被选元素
  }
);

3 . 折叠效果

//所有的隐藏,第一个显示
$('.panel-body').hide().first().show();
//点击
$('.panel-title').click(function(){


  //$(this).parent().next().show();
  //$('.panel-body').not($(this).parent().next()).hide();
  //点击的这个被隐藏的显示出来 
  $(this).parent().next().slideDown();
  //除了这个被点击的,其他的所有的都隐藏
  $('.panel-body').not($(this).parent().next()).slideUp(); 
});

4 . 滚动监听

//滚动滚动条的时候触发的function
$(window).scroll(function(){
  //滚动条到浏览器最上端的高度
  st = $(window).scrollTop();
  //offset() 元素相对于文档的偏移量
  //$('p').offset().top p标签距离浏览器顶端的偏移量(文档顶端)
  //$('p').offset().left p标签相对文档左边偏移量
  //$('p').offset().bottom p标签相对文档底部的偏移量
  //$('p').offset().right p标签相对文档右边的偏移量
  
  //panel中被滚动到的这个到浏览器(文档最上面的)偏移量(高度)
  pt = $(this).offset().top;
  if(st > (pt-200)){
    //得到这个属性idx的值
    idx = $(this).attr('idx');
    //滚动到这个的时候,把相对应的这个id值为idx的元素激活
    $('#'+idx).addClass('active');
    //$('p:not(.intro)')/$('p:not(idx)') 除了制定元素以外的所有的元素,里面放id
    //$('p').not('') 除了指定元素以外的所有元素,里面放id或者class
    $('.list-group-item').not($('#'+idx)).removeClass('active');
    $('.'+idx).addClass('active');
    $('.navbar-nav li').not($('.'+idx)).removeClass('active');
  }
});

5 . 模态框(js弹框)

$('.save').click(function(){
  alert('登陆成功');
  $('#myModal').modal('hide');
});
//开启modal
$('smodal').click(function(){
  $('#myModal').modal('show');
});

//jquery中的$().on('',function); 向某个元素中添加一个或多个事件 （官方推荐使用）

//向id值为myModal中添加事件shown.bs.modal,事件的内容为function(){}
$('#myModal').on('shown.bs.modal',function(e){
  $('body').css({'background':'#aaf'});
});
$('#myModal').on('hidden.bs.modal',function(e){
  $('body').css('background','#faaa');
});

6 . 面板

//mouseover() 当鼠标指针穿过被选元素或其子元素,都会触发mouseover事件
//mouseenter() 当鼠标指针穿过被选元素的时候,才会触发mouseenter事件

$('.list-group-item').mouseenter(function(){
  $(this).addClass('active');
  $('.list-group-item').not($(this)).removeClass('active');
});
$('.disabled').click(function(){
  return false;
});

7 . 进度条动态

//使用动画ainimate的缺点,是改变不了里面的值
$('.progress-bar').animate(
  {'width':'100%'},
  1000
);
s = 0;
sobj = setInterva(timeProgress,100);
function timeProgress(){
  s = s+10;
  if(s >= 100){
    clearInterval(sobj);
  }
  $('.progress-bar').css({'width':s+'%'});
  $('.progress-bar').html(s+'%');
}

s = 0;
e = 2;
sobj = setInterval(function(){
  s += e;
  //当s一直加加到大于等于100的时候,就从下一次暂停setInterval方法
  if(s >= 100){
    clearInterval(sobj);
  }
  $('.progress-bar').css('width',s+'%').html(s+'%');
},100);