首页手记 jQuery 之元素节点操作 &...

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

标签：

JQuery JavaScript

元素节点操作

创建节点

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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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;   
      }
  })

作者：奋斗的老王
链接：https://www.jianshu.com/p/241f47dae47c

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

aluckdog

手记
篇

粉丝

68

获赞与收藏

392

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 299472 2114

后端通用面试教程

41个小节 28744 323

网络编程入门教程

20个小节 11945 226

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

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

元素节点操作

滚轮事件与函数节流

阅读免费教程

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