animate方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
position: absolute;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// 参数1:键值对----css属性和值
// 参数2:时间----1000毫秒--1秒
// 参数3:回调函数
$(function(){
$("#im").animate(
{
"width":"200px",
"height":"200px",
"left":"100px",
"top":"100px"
},2000).animate({
"width":"20px",
"height":"20px",
"left":"10px",
"top":"1000px"
},50).animate({
"width":"80px",
"height":"80px",
"left":"800px",
"top":"50px",
"opacity":0.5
},2000);
});
</script>
</head>
<body>
<img src="bird.png" id="im" >
</body>
</html>jQuery中元素的创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
border: 5px solid red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// 页面加载后,点击按钮,在div中创建一个超链接
$(function(){
$("#btn").click(function(){
// 在父级元素div中追加一个创建后的子元素
// 父级元素.append(子级元素);
// $("#dv").append($("<a href='http://www.baidu.com'>百度</a>"));
// 创建一个子级元素直接加到父级元素
$("<a href='http://www.baidu.com'>腾讯</a>").appendTo($("#dv"));
});
});
</script>
</head>
<body>
<input type="button" value="创建一个a标签" id="btn">
<div id="dv"></div>
</body>
</html>点击按钮创建十个p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
border: 1px dashed red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$("#btn").click(function(){
for(var i=0;i<10;i++){
$("#dv").append($("<p>oh my god.</p>"));
}
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
</body>
</html>创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 600px;
border: 2px dotted orangered;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 点击按钮
$("#btn").click(function(){
// 创建列表加入到div中
// 创建ul,加入到div中
var ulObj = $("<ul style='list-style-type:none;cursor:pointer'></ul>");
$("#dv").append(ulObj);
// 创建li,加入到ul中
$("<li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>5555</li>")
.appendTo(ulObj)
.mouseenter(function(){
$(this).css("backgroundColor","green");
}).mouseout(function(){
$(this).css("backgroundColor","");
}).click(function(){
$(this).css("color","pink")
.css("fontFamily","Century Gothic")
.css("fontSize","50px");
});
});
});
</script>
</head>
<body>
<input type="button" value="创建列表" id="btn">
<div id="dv"></div>
</body>
</html>动态创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 600px;
border: 2px dotted darkgreen;
}
ul li {
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
/**
* 内置对象:js中系统自带的,Array,Object,Date,Math,RegExp
* 浏览器对象:window
* 自定义对象:自己定义的构造函数创建的对象
* DOM对象:通过DOM方式获取的对象
* jQuery对象:通过jQuery方式获取对象
*/
// 数组中有十个人的名字
$(function(){
var array = ["赵四","王五","李四","张三","王朝",
"马汉","马超","武器","天神","龙王"];
// Date----内置对象
// 根据id选择器获取按钮,添加点击事件
$("#btn").click(function(){
// 先创建ul加入到div中
var ulObj = $("<ul></ul>").appendTo($("#dv"));
// 创建li标签,加入到ul中----循环遍历数组
for(var i=0;i<array.length;i++){
$("<li>"+array[i]+"</li>").appendTo(ulObj)
.mouseenter(function(){
$(this).css("backgroundColor","green");
}).mouseleave(function(){
$(this).css("backgroundColor","");
});
}
});
});
// 点击按钮的时候实现
// 在div中动态的创建列表
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
</body>
</html>