元素節點操作
-
創建節點
var $div = $('<div>'); var $div2 = $('<div>這是一個div元素</div>'); -
插入節點
-
1、append()和appendTo()：在現存元素的內部，從后面插入元素
var $span = $('<span>這是一個span元素</span>'); $('#div1').append($span); ...... <div id="div1"></div> 2、prepend()和prependTo()：在現存元素的內部，從前面插入元素
3、after()和insertAfter()：在現存元素的外部，從后面插入元素
4、before()和insertBefore()：在現存元素的外部，從前面插入元素
-
刪除節點 :
$('#div1').remove();todolist(計劃列表)實例
滾輪事件與函數節流
-
jquery.mousewheel插件使用
- jquery中沒有鼠標滾輪事件，原生js中的鼠標滾輪事件不兼容，可以使用jquery的滾輪事件插件jquery.mousewheel.js。
-
函數節流
- javascript中有些事件的觸發頻率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的鼠標滾輪事件，在短事件內多處觸發執行綁定的函數，可以巧妙地使用定時器來減少觸發的次數，實現函數節流。
-
整屏滾動實例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>整頁滾動</title> <link rel="stylesheet" type="text/css" href="css/test.css"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript"> $(function(){ var $h = $(window).height(); var $pages = $('.pages'); $pages.css({height:$h}); var $points = $('.points li'); var nowscreen = 0; var timer = null; $pages.eq(0).addClass('moving'); $(window).mousewheel(function(ev,dat){ clearTimeout(timer); timer = setTimeout(function(){ if(dat==-1) { nowscreen++; } else { nowscreen--; } if(nowscreen<0) { nowscreen=0; } if(nowscreen>4) { nowscreen=4 } $('.pages_con').animate({top:-nowscreen*$h},300); $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving'); $points.eq(nowscreen).addClass('active').siblings().removeClass('active'); },200) }) $points.click(function(event) { var nowindex = $(this).index(); $('.pages_con').animate({top:-nowindex*$h},300); $pages.eq(nowindex).addClass('moving').siblings().removeClass('moving'); $points.eq(nowindex).addClass('active').siblings().removeClass('active'); }); }) </script> </head> <body> <div class="pages_con"> <div class="pages page1"> <div class="main_con"> <div class="left_img"><img src="images/001.png"></div> <div class="right_info"> Web前端開發是從網頁制作演變而來的，名稱上有很明顯的時代特征。在互聯網的演化進程中，網頁制作是Web1.0時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行為也以瀏覽為主。 </div> </div> </div> <div class="pages page2"> <div class="main_con"> <div class="right_img"><img src="images/002.png"></div> <div class="left_info"> 2005年以后，互聯網進入Web2.0時代，各種類似桌面軟件的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現的。 </div> </div> </div> <div class="pages page3"> <div class="main_con"> <div class="left_img"><img src="images/004.png"></div> <div class="right_info"> 以前會Photoshop和Dreamweaver就可以制作網頁，現在只掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁制作都更接近傳統的網站后臺開發，所以現在不再叫網頁制作，而是叫Web前端開發。 </div> </div> </div> <div class="pages page4"> <div class="main_con"> <div class="left_img"><img src="images/003.png"></div> <div class="right_info"> Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好，這方面的專業人才近幾年來備受青睞。Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。 </div> </div> </div> <div class="pages page5"> <div class="main_con"> <div class="center_img"><img src="images/005.png"></div> </div> </div> </div> <ul class="points"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> -
幻燈片動畫
$(function(){ var $li = $('.slide_pics li'); var len = $li.length; var $prev = $('.prev'); var $next = $('.next'); //將要運動過來的li var nowli = 0; //當前要離開的li var prevli = 0; var timer = null; $li.not(':first').css({left:760}); $li.each(function(index){ var $sli = $('<li>'); if(index==0) { $sli.addClass('active'); } $sli.appendTo('.points') }) $points = $('.points li'); $points.click(function(){ nowli = $(this).index(); if(nowli==prevli){ return; } move(); $(this).addClass('active').siblings().removeClass('active'); }); $prev.click(function(){ nowli--; move(); $points.eq(nowli).addClass('active').siblings().removeClass('active'); }) $next.click(function(){ nowli++; move(); $points.eq(nowli).addClass('active').siblings().removeClass('active'); }) $('.slide').mouseenter(function() { clearInterval(timer); }); $('.slide').mouseleave(function() { timer = setInterval(autoplay,1500); }); timer = setInterval(autoplay,1500); function autoplay(){ nowli++; move(); $points.eq(nowli).addClass('active').siblings().removeClass('active'); } function move(){ if(nowli<0) { nowli = len-1; prevli = 0; $li.eq(nowli).css({left:-760}); $li.eq(prevli).stop().animate({left:760}); $li.eq(nowli).stop().animate({left:0}); prevli=nowli; return; } if(nowli>len-1) { nowli = 0; prevli = len-1; $li.eq(nowli).css({left:760}); $li.eq(prevli).stop().animate({left:-760}); $li.eq(nowli).stop().animate({left:0}); prevli=nowli; return; } if(nowli>prevli){ $li.eq(nowli).css({left:760}); $li.eq(prevli).stop().animate({left:-760}); } else { $li.eq(nowli).css({left:-760}); $li.eq(prevli).stop().animate({left:760}); } $li.eq(nowli).stop().animate({left:0}); prevli=nowli; } })
