专栏首页天天DOM操作(20171027)

DOM操作(20171027)

1.旋转木马思想引用

1.demo

<script>
    var btn = document.getElementById("btn");
    var box= document.getElementsByClassName("box")[0];
    var flag =false;
    var posi = [{"left":"200","top":"0","opacity":"100"},
{"left":"400","top":"200","opacity":"100"},
{"left":"200","top":"400","opacity":"100"},
{"left":"0","top":"200","opacity":"100"}];
    change();
    btn.onclick = function(){
        if(flag){
            change();
            posi.unshift(posi.pop());
        }
    }
    function change(){
        flag = false;
        for(var i =0;i<box.children.length;i++){
          //其中move()是引入的一个封装函数
            move(box.children[i],posi[i],function(){
                flag=true;
            });
        }
    }
</script>
效果如下:每点击一个按钮,图片旋转到下一个位置

image.png

2.jquery DOM 操作

案例一:通过节点添加实现表格排序
eg:
$(function() {
            $("thead th:gt(0)").click(function(){
                for(var i=0;i<$("tbody tr").length-1;i++){
                    for(var j=0;j<$("tbody tr").length-i-1;j++){
                        //                      tbody里第j行  //            点击的当前列
                        var resultone = $("tbody tr").eq(j).find("td").eq($(this).index()).text();
                        var resulttwo = $("tbody tr").eq(j+1).find("td").eq($(this).index()).text();
                       //console.log(resultone+"----"+resulttwo)

                        if(Number(resultone)>Number(resulttwo)){
                            $("tbody tr").eq(j+1).insertBefore($("tbody tr").eq(j));
                        }
                    }
                }
            })
    })

案例二:星评案例

eg:
$(function(){
        var count=-1;
        $("#con li").mouseover(function(){
            $(this).addClass("selected").prevAll().addClass("selected").end().nextAll().removeClass("selected")
        });
        $("#con li").click(function(){
            count = $(this).index();
            console.log(count)
        });

        $("#con li").mouseleave(function(){
            $("#con li").removeClass("selected").slice(0,count+1).addClass("selected");
        });
    })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 闭包初识

    [详情参考](http://www.cnblogs.com/wangfupeng1988/p/3994065.html);

    天天_哥
  • jQuery事件(20171031)

    天天_哥
  • 微信小程序 页面与自定义组件数据通信

    说明:页面通过my-property讲example字符串传递给自定义组件,同样也可以使用数据绑定的方法

    天天_哥
  • 撩一下一些必要的js工具函数

    不管是什么项目,总有一些基本的功能函数默默的躺在你的工具库中,为你遮挡bug,提升性能,一起来复习下!

    IMWeb前端团队
  • 撩一下一些必要的js工具函数

    不管是什么项目,总有一些基本的功能函数默默的躺在你的工具库中,为你遮挡bug,提升性能,一起来复习下! debounce 当监听一些scroll,resize事...

    IMWeb前端团队
  • JavaScript 判断输入的值为数字

    使用js自带全局函数isNaN(), isNaN()返回一个Boolean值,如下 :

    Devops海洋的渔夫
  • 43. Vue组件案例-评论列表

    好了,现在基本页面已经写好了。但是为了演示父组件与子组件之间的传值以及调用关系,我将上面提交评论的部分抽出来作为一个子组件。

    Devops海洋的渔夫
  • NBA也用上了云计算与AI技术,将联合微软为球迷提供“本地化母语比赛内容”

    数据猿讯 据美国知名杂志《综艺》报道,NBA与科技巨头微软签署了一项持续多年的多方面合作协议,该协议旨在将开发新一代流媒体服务作为提升球迷体验并优化消费者与联盟...

    数据猿
  • NBA深圳再出发,中国盟友腾讯能带来什么?

    原创2015-03-26罗超 2015年NBA国际系列赛-中国站比赛(简称NBA中国赛)比赛地尘埃落定:深圳和上海。3月25日,NBA中国联合深圳市体育局召开发...

    罗超频道
  • 与NBA牵手,字节跳动垂直内容打法浮出水面

    11月27日,NBA与字节跳动共同宣布,双方将开启一段长期全球合作伙伴关系,即日起,NBA短视频内容可通过字节跳动旗下的移动平台,呈现给全球用户。

    罗超频道

扫码关注云+社区

领取腾讯云代金券