jquery学习6_节点操作

jquery学习6_节点操作

添加节点

// 添加节点
$("#btn1").click(function () {
    $("#src-city>option").appendTo("#tar-city");
});
​
$("#btn2").click(function () {
    $("#src-city").append($("#tar-city>option"));
});
​
$("#btn3").click(function () {
    $("#src-city>option:selected").appendTo("#tar-city");
});
​
$("#btn4").click(function () {
    $("#src-city").append($("#tar-city>option:selected"));
});

删除节点

$("div").remove();

清空节点

$("div").empty();

复制节点

// clone参数
// false:不传参数也是深度复制,不会复制事件
// true:也是深复制，会复制事件
$(".des").clone(true).appendTo("div");

弹幕的示例

//注册事件
var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
$("#btn").click(function () {
    var randomColor = parseInt(Math.random() * colors.length);
    var randomY = parseInt(Math.random() * 400);
    $("<span></span>")//创建span
        .text($("#text").val())//设置内容
        .css("color", colors[randomColor])//设置字体颜色
        .css("left", "1400px")//设置left值
        .css("top", randomY)//设置top值
        .animate({left: -500}, 10000, "linear", function () {
        //到了终点，需要删除
        $(this).remove();
    }).appendTo("#boxDom");//添加动画并添加到屏幕
    $("#text").val("");
});
​
$("#text").keyup(function (e) {
    if (e.keyCode == 13) {
        $("#btn").click();
    }
});