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=''>百度</a>"));// 创建一个子级元素直接加到父级元素$("<a href=''>腾讯</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>
