元素節(jié)點(diǎn)操作
-
創(chuàng)建節(jié)點(diǎn)
var $div = $('<div>'); var $div2 = $('<div>這是一個(gè)div元素</div>'); -
插入節(jié)點(diǎn)
-
1、append()和appendTo()：在現(xiàn)存元素的內(nèi)部，從后面插入元素
var $span = $('<span>這是一個(gè)span元素</span>'); $('#div1').append($span); ...... <div id="div1"></div> 2品嚣、prepend()和prependTo()：在現(xiàn)存元素的內(nèi)部，從前面插入元素
3斋陪、after()和insertAfter()：在現(xiàn)存元素的外部，從后面插入元素
4置吓、before()和insertBefore()：在現(xiàn)存元素的外部鳍贾，從前面插入元素
-
刪除節(jié)點(diǎn) :
$('#div1').remove();todolist(計(jì)劃列表)實(shí)例
滾輪事件與函數(shù)節(jié)流
-
jquery.mousewheel插件使用
- jquery中沒有鼠標(biāo)滾輪事件，原生js中的鼠標(biāo)滾輪事件不兼容交洗，可以使用jquery的滾輪事件插件jquery.mousewheel.js骑科。
-
函數(shù)節(jié)流
- javascript中有些事件的觸發(fā)頻率非常高，比如onresize事件(jq中是resize)构拳，onmousemove事件(jq中是mousemove)以及上面說的鼠標(biāo)滾輪事件咆爽，在短事件內(nèi)多處觸發(fā)執(zhí)行綁定的函數(shù)，可以巧妙地使用定時(shí)器來減少觸發(fā)的次數(shù)置森，實(shí)現(xiàn)函數(shù)節(jié)流斗埂。
-
整屏滾動(dòng)實(shí)例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>整頁滾動(dòng)</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前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時(shí)代特征凫海。在互聯(lián)網(wǎng)的演化進(jìn)程中呛凶，網(wǎng)頁制作是Web1.0時(shí)代的產(chǎn)物，那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(tài)的行贪，用戶使用網(wǎng)站的行為也以瀏覽為主漾稀。 </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年以后，互聯(lián)網(wǎng)進(jìn)入Web2.0時(shí)代建瘫，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)崭捍，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片啰脚，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)殷蛇，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的橄浓。 </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"> 以前會(huì)Photoshop和Dreamweaver就可以制作網(wǎng)頁粒梦，現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無論是開發(fā)難度上荸实，還是開發(fā)方式上匀们，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作泪勒，而是叫Web前端開發(fā)昼蛀。 </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前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要宴猾，而且需要專業(yè)的前端工程師才能做好圆存，這方面的專業(yè)人才近幾年來備受青睞叼旋。Web前端開發(fā)是一項(xiàng)很特殊的工作，涵蓋的知識(shí)面非常廣沦辙，既有具體的技術(shù)夫植，又有抽象的理念。簡(jiǎn)單地說油讯，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶详民。 </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> -
幻燈片動(dòng)畫
$(function(){ var $li = $('.slide_pics li'); var len = $li.length; var $prev = $('.prev'); var $next = $('.next'); //將要運(yùn)動(dòng)過來的li var nowli = 0; //當(dāng)前要離開的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; } })
