元素节点操作
-
创建节点
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; } })
