jQuery 之 元素节点操作 & 滚轮事件与函数节流

元素节点操作

• 创建节点

  var $div = $('
  ');
  var $div2 = $('
  这是一个div元素
  ');
  

• 插入节点

  • 1、append()和appendTo()：在现存元素的内部，从后面插入元素

    var $span = $('这是一个span元素');
    $('#div1').append($span);
    ......
    
    

  • 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)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

• 整屏滚动实例

  
  
  
      
      
      
      
      
         
  
  
      
  
  
          
  
              
  
                  
  
                  
  
                  Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
                      
                  
              
          
  
          
  
              
  
                  
  
                  
  
                  2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
                  
              
              
          
  
          
  
              
  
                  
  
                  
  
                  以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
  
                      
                  
              
            
          
  
          
  
              
  
                  
  
                  
  
                      Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                  
              
            
          
  
          
  
              
  
                  
          
              
              
          
      
      
  
          
  
          
  
          
  
          
  
          
  
      
  
  
  

• 幻灯片动画

    $(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 = $('
  ');
  
            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;   
        }
    })