JQuery DOM操作、 事件和动画

1：DOM操作

练习例子：

<script src="Js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

$(function () {
//添加
$("#btn_add").click(function () {

var index = $("#ta1 tbody tr:last td:first").text();

index = index == "" ? 0: index;

//if (!index) {

// index = 0;
//}// 判断是否为空
index = parseInt(index) + 1;

var trtext = "<tr><td>" + index + "</td><td>陈翔</td> <td>男</td><td>北京</td><td><a href='javascript:void(0)' onclick='del(this)'>删除</a></td></tr>";

$("#ta1 tbody").append(trtext);

});

//清空
$("#btn_clear").click(function () {
if (confirm("是否清空？")) {
$("#ta1 tbody tr").remove();
}
});

//复制

$("#btn_copy").click(function () {

$("#Table1 tbody tr").empty();
var trtext=$("#ta1 tbody tr").clone();
$("#Table1 tbody").append(trtext);

});

//属性变化
$("#btn_change").click(function () {

var attr=$("a").attr("class");

if (attr=="aattr") {

$("a").removeAttr("class");
}else{
$("a").attr("class","aattr");
}

});

//是否显示
$("#btn_display").click(function () {

var dis=$("a").attr("id");
if (dis == "displ") {
$("a").removeAttr("id");
} else {
$("a").attr("id","displ");
}
});

//包裹
$("#btn_wrap").click(function () {

$("a").wrap("<b></b>")
});

//添加属性
$("#btn_addattr").click(function () {

$("a").attr("title","超链接");
});

//移除属性

$("#btn_delattr").click(function () {
$("a").removeAttr("title");
});

//替换
$("#btn_replace").click(function () {
$("<span onlick='del(this)'cursor='pointer'>删除</span>").replaceAll("a");
});

})

//删除

// $("#Table1 tbody tr td a").click(del(this));

function del(obj) {
if (confirm("是否删除？")) {
$(obj).parent().parent().remove();
}
}

</script>

2：事件

大体分为：单机事件（click）、双击事件(dblclick)、多击事件(toggle)

注册事件

$("button").bind("click",,function(){});

$("button").bind("cdbllick",function(){});

$("button").toggle("click",,function(){});

3:动画：

练习例子：

<script type="text/javascript">

$(function () {
//隐藏
$("#btn_hide").toggle(function () {

$("#d1").hide(1000);
},
function () { $("#d1").show(1000); }
);

//影藏后显示
$("#btn_fade").click(function () {
$("#d2").fadeOut(1000,function () {
$("#d2").fadeIn(1000); });
});

//slide
$("#btn_slide").toggle(function () { $("#d3").slideUp(1000)},
function () {
$("#d3").slideDown(1000)
});

//自定义动画
$("#bymyself").click(function () {
$("#d5").animate({ left:"800px" }, 3000, function () {
$("#d5").animate({left:"100px"},500);
});
});

});

</script>

播放幻灯片例子：

<script src="Js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
var index=0;
$("#btn_start").click(function () {
index++;
if (index % 2!= 0) {
$("img").animate({ opacity: 0 }, 2000, function () {
$("img").attr("src", "/img/img-1cd0c7f845bbc465026f00990cad56b7.jpg");
});
$("img").animate({opacity:1},1000);
} else {
$("img").animate({ opacity: 0 }, 2000, function () {
$("img").attr("src", "/img/99f9e77bjw1et8ori4disj20kq0fhgnl.jpg");
});
$("img").animate({ opacity: 1 }, 1000);
}
});
});

</script>