jQuery3动画+创建元素
一、jQuery的动画
1、jQuery自带的动画
1》变化的是width height opacity display
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery动画+创建jQuery变量</title> <style> div{ width: 100px; height:200px; background-color: pink; } </style> </head> <body> <button>显示</button> <button>隐藏</button> <div></div> <script src="jQuery1-12-4.js"></script> <script> //第一个动画，变化的是width height opacity display $(function () { $("button:eq(0)").click(function(){ // $("div").show(); $("div").show(1000); }); $("button:eq(1)").click(function () { // $("div").hide(); $("div").hide(100); });
$("button:eq(2)").click(function () {
$("div").toggle();
});
}); </script> </body> </html>
2》变化的是height
//第二个动画，变化的是opacity display $(function () { $("button:eq(0)").click(function () { $("div").slideUp("slow");//卷起 fast normal slow }); $("button:eq(1)").click(function () { $("div").slideDown(1000);//放下 }); $("button:eq(2)").click(function () { $("div").slideToggle(1000); }); });
3》淡入淡出
//第三个动画：淡入淡出 $(function () { $("button:eq(0)").click(function () { $("div").fadeOut(1000); }); $("button:eq(1)").click(function () { $("div").fadeIn(1000); }); $("button:eq(2)").click(function () { $("div").fadeToggle(1000); }); $("button:eq(3)").click(function () { $("div").fadeTo(1000,0.3);//时间，定值，回调函数 }); })
2、自定义动画
//自定义动画,该方法是异步的，因为底层使用了定时器 //animation(json,时间,回调函数); $(function () { $("button:eq(0)").click(function () { $("div").animate({ "width": 0 }, 100, function () { alert("运行完成"); }); }); });
二、创建对象
1、回顾原生js中是如何创建对象
//原生js中创建对象 //第一种方式： // var p = document.createElement("p"); // p.innerHTML = "我是一个p"; // document.getElementsByTagName("div")[0].appendChild(p); //第二种方式 // document.getElementsByTagName("div")[0].innerHTML = "<p>我是第二个p</p>"; //第三种方式 document.write("<p>我是第三个P</p>");
2、jQuery中创建元素的方式
//jQuery中创建元素的方式 var $p = $("<p>我是jquery生成的第一个标签</p>"); //放到div中，在div末尾追加 // $("div").append($p);//在div的末尾追加p // $p.appendTo($("div"));//追加到div,也是在末尾加 //放在div中，在div的开头追加 // $("div").prepend($p);//在开头追加 // $p.prependTo($("div"));//在开头加 //在div的外边 // $("div").before($p);//前面 // $("div").after($p);//后边 //替换div内部 $("div").html($p);
3、注意：添加的已有元素相当于剪切。
案例：选中左边的，移动到右边，选中右边的，移动到左边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选中移动</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 400px;
background-color: #ccc;
float: left;
margin-right: 10px;
text-align: center;
}
button{
width: 50px;
height: 50px;
margin: 10px;
}
select{
width: 50px;
height: 200px;
}
</style>
</head>
<body>
<div>
<p>水果摊</p>
<select name="" id="sel1" multiple="multiple">
<option value="">苹果</option>
<option value="">香蕉</option>
<option value="">鸭梨</option>
<option value="">橙子</option>
<option value="">黄瓜</option>
</select>
</div>
<div>
<button>></button>
<button><</button>
<button>>></button>
<button><<</button>
</div>
<div>
<p>购物车</p>
<select name="" id="sel2" multiple="multiple">
</select>
</div>
<script src="jQuery1-12-4.js"></script>
<script>
$(function () {
//移动到右边
$("button:eq(0)").click(function () {
$("#sel2").append($("#sel1>option:selected"));
});
//移动到左边
$("button:eq(1)").click(function () {
$("#sel1").append($("#sel2>option:selected"));
});
//全部移动到右边
$("button:eq(2)").click(function () {
$("#sel1>option").appendTo($("#sel2"));
});
//全部移动到左边
$("button:eq(3)").click(function () {
$("#sel1").append($("#sel2>option"));
});
});
</script>
</body>
</html>
的
