版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
36-jQuery自定义动画
<script>
$(function () {
// 编写jQuery相关代码
$("button").eq(0).click(function () {
/*
$(".one").animate({
width: 500
}, 1000, function () {
alert("自定义动画执行完毕");
});
*/
$(".one").animate({
marginLeft: 500
}, 5000, function () {
// alert("自定义动画执行完毕");
});
/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
*/
$(".two").animate({
marginLeft: 500
}, 5000, "linear", function () {
// alert("自定义动画执行完毕");
});
})
$("button").eq(1).click(function () {
$(".one").animate({
width: "+=100"
}, 1000, function () {
alert("自定义动画执行完毕");
});
});
$("button").eq(2).click(function () {
$(".one").animate({
// width: "hide"
width: "toggle"
}, 1000, function () {
alert("自定义动画执行完毕");
});
})
});
</script>
37-jQuery的stop和delay方法
<script>
$(function () {
// 编写jQuery相关代码
$("button").eq(0).click(function () {
/*
在jQuery的{}中可以同时修改多个属性, 多个属性的动画也会同时执行
*/
/*
$(".one").animate({
width: 500
// height: 500
}, 1000);
$(".one").animate({
height: 500
}, 1000);
*/
/*
delay方法的作用就是用于告诉系统延迟时长
*/
$(".one").animate({
width: 500
// height: 500
}, 1000).delay(2000).animate({
height: 500
}, 1000);
// $(".one").animate({
// width: 500
// }, 1000);
// $(".one").animate({
// height: 500
// }, 1000);
$(".one").animate({
width: 100
}, 1000);
$(".one").animate({
height: 100
}, 1000);
});
$("button").eq(1).click(function () {
// 立即停止当前动画, 继续执行后续的动画
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);
// 立即停止当前和后续所有的动画
// $("div").stop(true);
// $("div").stop(true, false);
// 立即完成当前的, 继续执行后续动画
// $("div").stop(false, true);
// 立即完成当前的, 并且停止后续所有的
// $("div").stop(true, true);
});
});
</script>
38-jQuery添加节点相关方法
<script>
$(function () {
/*
内部插入
append(content|fn)
appendTo(content)
会将元素添加到指定元素内部的最后
prepend(content|fn)
prependTo(content)
会将元素添加到指定元素内部的最前面
外部插入
after(content|fn)
会将元素添加到指定元素外部的后面
before(content|fn)
会将元素添加到指定元素外部的前面
insertAfter(content)
insertBefore(content)
*/
$("button").click(function () {
// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
$("ul").append($li);
$("ul").prepend($li);
// $li.appendTo("ul");
// $li.prependTo("ul");
// $("ul").after($li);
// $("ul").before($li);
// $li.insertAfter("ul");
});
});
</script>
39-jQuery删除节点相关方法
<script>
$(function () {
/*
删除
remove([expr])
删除指定元素
empty()
删除指定元素的内容和子元素, 指定元素自身不会被删除
detach([expr])
*/
$("button").click(function () {
// $("div").remove();
$("div").empty();
// $("li").remove(".item");
// 利用remove删除之后再重新添加,原有的事件无法响应
// var $div = $("div").remove();
// 利用detach删除之后再重新添加,原有事件可以响应
// var $div = $("div").detach();
// // console.log($div);
// $("body").append($div);
});
$("div").click(function () {
alert("div被点击了");
});
});
</script>
40-jQuery替换节点相关方法
<script>
$(function () {
/*
替换
replaceWith(content|fn)
replaceAll(selector)
替换所有匹配的元素为指定的元素
*/
$("button").click(function () {
// 1.新建一个元素
var $h6 = $("<h6>我是标题6</h6>");
// 2.替换元素
// $("h1").replaceWith($h6);
$h6.replaceAll("h1");
});
});
</script>
41-jQuery复制节点相关方法
<script>
$(function () {
// clone([Even[,deepEven]])
/*
如果传入false就是浅复制, 如果传入true就是深复制
浅复制只会复制元素, 不会复制元素的事件
深复制会复制元素, 而且还会复制元素的事件
*/
$("button").eq(0).click(function () {
// 1.浅复制一个元素
var $li = $("li:first").clone(false);
// 2.将复制的元素添加到ul中
$("ul").append($li);
});
$("button").eq(1).click(function () {
// 1.深复制一个元素
var $li = $("li:first").clone(true);
// 2.将复制的元素添加到ul中
$("ul").append($li);
});
$("li").click(function () {
alert($(this).html());
});
});
</script>