jQuery事件+节点操作+节点删除

鼠标事件

单词	含义
click	单击鼠标时
mouseover	鼠标移入父元素中会触发over事件，但是当鼠标从父元素挪到子元素上时over事件未结束
mouseenter	鼠标在父元素中会触发enter事件，但是当鼠标从父元素挪到子元素上时enter事件结束
mouseout	鼠标指针移出时
mouseleave	鼠标指针离开时

//鼠标移入:改变背景颜色
    /*$("ul li").mouseenter(function(){
        $(this).css("background-color","yellow");
    }).mouseout(function(){
        $(this).css("background-color","red");
    })
    //鼠标移出:恢复背景颜色
    $("ul li").mouseout(function(){
        $(this).css("background-color","red");
    })*/
    //鼠标移过事件
    /*$(this).css("background-color","green");
    })
    //鼠标进入事件
    $("ul").mouseenter(function(){
        $(this).css("background-color","yellow");
    })
    $("ul").mouseout(function(){
        $(this).css("background-color","blue")
    })*/
    $("ul").mouseenter(function(){
        $(this).css("background-color","yellow")
}).mouseout(function(){
    $(this).css("background-color","aqua")
})

键盘事件

单词	含义
keydown	按下键盘时
keyup	释放按键时
keypress	产生可打印的字符时

$("input").keydown(function(event){
    alert(event.keyCode);
})
$("input").keyup(function(event){
    alert(event.keyCode);
})
$("input").keypress(function(event){
    alert(event.keyCode);
})

节点删除

单词	含义
remove	删除整个节点
empty	清空节点内容
detach	删除整个节点，保留元素的绑定事件、附加的数据

$("h1").click(function(){
    //$("li:last").empty();
    //$("li:last").remove();
    //获取最后一个li
    var $li=$("li:last");
    //$("ul").remove($li);错误写法
    //节点的替换
    $li.replaceWith($("<li>新节点</li>"));
    $("<li>新节点</li>").replaceAll($li);
    //节点的复制
    $("h1").clone(true).appendTo($("body"))
})

节点操作

单词	含义
append	表示将B追加到A中
appendTo	表示把A追加到B中
prepend	表示将B前置插入到A中
prependTo	表示将A前置插入到B中
after	表示将B插入到A之后
insertAfter	表示将A插入到B之后
before	表示将B插入至A之前
insertBefore	表示将A插入到B之前

$("h1").click(function(){
    //创建新的li标签
    var $li=$("<li>新欢</li>");
    //获取当前的ul
    //var $ul=$("ul");
    //父.append.(子)
    //$ul.append($li);
    //子.append.(父)
    //$li.appendTo($ul)
    //父.prepend(子)
    //$ul.prepend($li)
    //子.prependTo(父)
    //$li.prependTo($ul)
    //获取第二个li标签
    var $li2=$("li:eq(1)");
    //前.after.(后)
    //$li2.after($li);
    //后.insertAfter(前)
    //$li.insertAfter($li2);
    $li2.before($li);
    //$li.insertBefore($li2)
})