博客制作笔记

很多知识点总结（Jquery）：

1.自己做的侧边栏怎么都出不来：

原因：

原来的写法：

<nav>
			<div class="logo"><a haref="#">生如夏花</a></div>
			<ul>				
				<li class="active"><a href="" >首页</a></li>
				<li><a href="article.html" >简介</a></li>
				<li><a href="about.html">关于</a></li>
				<li ><a href="contact.html">联系</a></li>
				<li id="sidebar_trigger"><a href=""><i  class="fa fa-bars "></i></a></li>
			</ul>
		</nav>

修改后的写法：

<nav>
			<div class="logo"><a haref="#">生如夏花</a></div>
			<ul>				
				<li class="active"><a href="" >首页</a></li>
				<li><a href="article.html" >简介</a></li>
				<li><a href="about.html">关于</a></li>
				<li ><a href="contact.html">联系</a></li>
				<li id="sidebar_trigger"><i  class="fa fa-bars "></i></li>
			</ul>
		</nav>

原因：onclick函数如果放在<a></a>里面会受影响，(第8行)即使不加href，点击函数也不起作用,所以 去掉<a></a>直接操作就OK。

出现同样问题的都是在自己引入font-awesome的地方，<i>外面都加了<a>标签。。。。去掉<a>万事大吉！

function showSidebar(){  //显示侧栏    
      mask.fadeIn();  //显示mask
      sidebar.animate({'right':0});  //调整侧栏css ，对象写法    
      //sidebar.css('right',0);//两种写法都ok         
  }  

sidebar_trigger.on('click',showSidebar);

2. Jquery选择第几个子元素的写法：

$('p:eq(1)')   //选择第二个子元素（从0开始的下标）

$('p:eq(0)').css('left','200px');
$('p:eq(1)').css('left','-320px');
$('p:eq(2)').css('left','200px');

3. 设置onclick函数里跳转到别的页面：window.location.href="  XXX.html";

$('#toabout').on('click',function(){
  	 	console.log('cry');
  	 	window.location.href='about.html';
 })

4. 点击按钮返回顶部：

$('html, body').animate({ scrollTop: 0},  800) 

backButton.on('click',function(){   //监听返回按钮
       $('html, body').animate({
       	 scrollTop:0      	 	
       },800) //滚动上来，800ms
       
  })

点击按钮返回某处自己定义的位置：

$('buttonname').on('click',function(){  

     $('html, body').animate({

             scrollTop: $('#最后要到的位置的元素').offset().top },   1000)})

//点击更多的双箭头，可以直接滚动到下面的详情地方
   	$('.fa-angle-double-down').on('click',function (){	   
		 $('html, body').animate({
		   scrollTop: $("#chicken").offset().top }, 1000);  
        });  

5.改变<a>标签内容：<a>其实你不爱我</a>,改变或添加href属性

 $('.content').text("原来你还爱我呢");

 $('.content').attr('href','blog.html');

6.注意元素的位置，比如返回主页这个按钮，如果设成position:relative，缩放页面的时候会变动，可能会消失，所以设置成position:fixed;(相对窗口固定的位置)，这样浏览器改变大小它的位置还是那个地方（跟着动）。注意div直接的相对位置关系。

7.设置页面特效的时候可以加上延时可以表现出动画效果：setTimeout(function(){ },1000)

	//contact页面动作特效
   	var t=0;
   	function join_1(){
   		if(t==0){
   			$('p:eq(0)').css('left','200px');
   			$('p:eq(1)').css('left','-320px');
   			$('p:eq(2)').css('left','200px');
   			setTimeout(function(){
   			$('.cont_join').addClass("cont_join_form_act");
   			},1000);
   			t++;
   		} else{
   			t++;
   			$('.cont_form_join').css("bottom",'-420px');
   			$('.cont_join_form_finish').css('left','120px');
   			$('.contact_sub').text("再次感谢您的留言！");  
   		    $('.back_home').css('display','block');
   			setTimeout(function(){
   				$('.cont_join').addClass("cont_join_form_act").addClass("cont_join_finish'");

   			},500); 

   		}
   	}
   	$('.contact_sub').on('click',join_1);

8.设置出现的动画样式可自己写动画@keyframes name{  }, 

引用的时候直接  animation: name 2s;

.back_home{
	display: none;
	position: fixed;
	bottom: 80px;
   	 right: 90px;
   	 animation: btnshow 2s;
   	 background:#c36060;
   	 font-size: 12px;
}
@keyframes btnshow{
     0%{transform:translateX(0);}  
    15%{transform:translateX(-80px) rotate(-5deg);}  
    30%{transform:translateX(70px) rotate(3deg);}  
    45%{transform:translateX(-55px) rotate(-3deg);}  
    60%{transform:translateX(30px) rotate(2deg);}  
    75%{transform:translateX(-15px) rotate(-1deg);}  
    100%{transform:translateX(0);}  

}

9.隐藏内部元素：把内部元素的位置设成负数或者更大的值，在控制台改变left等使它在外面就ok。

内部元素: position:relative,

父元素设成：overflow:hidden；；transition: all 500ms;设置子元素进入动画,  position:relative;

相对于父元素固定的元素设;position:absolute; 所以它的父元素要： position:relative;

通过$(' 元素').css('right','300px'); $(' 元素').css('display','block'); 改变里面的属性值,从而显示出元素。