DOM操作(20171027)

<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>
效果如下：每点击一个按钮，图片旋转到下一个位置

案例一：通过节点添加实现表格排序
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");
        });
    })