×
奋斗的老王
元素节点操作
创建节点
- 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;
- }
- })
来源: http://www.jianshu.com/p/241f47dae47c