博客制作笔记

青旅半醒 2021-10-09 03:52 228阅读 0赞

很多知识点总结（Jquery）：

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

原因：

原来的写法：

修改后的写法：

**原因：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'); 改变里面的属性值,从而显示出元素。