1 概念
jquery:js组件
封装了很多简化js功能方法的组件(封装体)
富互联网技术:
RIA(Rich Internet Applications)富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。随着JavaScript、CSS、Ajax等技术的进步，越来越多的开发者将丰富多彩的程序及其功能进行封装，供其他人可以调用这些封装好的程序组件（框架）
常见的js组件：
jquery、dojo、node.js ext.js
jquery功能
取得页面中的元素
修改页面的外观
改变页面的内容
响应用户的页面操作
为页面添加动态效果
无刷新获取服务器信息(ajax)
简化javascript任务
jquery优点
轻量级 （Lightweight）
强大的选择器
出色的DOM操作封装
可靠的事件处理机制
出色的浏览器兼容性
2 初次体验jquery
2.1 在页面中引入jquery文件
<!-- 引入本地jquery文件:1 -->
<script type="text/javascript" src="/LianXi/js/jquery-1.6.4.min.js"></script>
<!-- 引入网络jquery文件:2 -->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
2.2 jquery实现文档加载成功事件
<!-- 文档加载成功：添加点击事件 -->
<script type="text/javascript">
/*js添加文件加载事件:只能注册一次*/
window.onload=function(){
var odiv=document.getElementById("div01");
odiv.onclick=function(){
alert(this.innerText+"js添加文件加载事件");
}
}
/*jquery的文档加载事件 可以注册多次*/
/*jquery文档加载:写法1：$(fn)::fn为文件加载成功要执行的方法*/
$(function(){
//alert("jquery文档加载:写法1");
$("#div01").click(function(){
alert(this.innerText+"等同于"+$("#div01").text());
});
});
/*jquery文档加载:写法2：$().ready(fn)::fn为文件加载成功要执行的方法*/
$().ready(function(){
alert("jquery文档加载:写法2");
});
/*jquery文档加载:写法3：$(document).ready(fn)::fn为文件加载成功要执行的方法*/
$(document).ready(function(){
alert("jquery文档加载:写法3");
});
</script>
2.3 jquery实现隔行变色
*** 通过css实现隔行变色 ***
<table id="table_1">
<tr style="background-color:#aaaaaa;">
<th>学号</th><th>性名</th><th>年龄</th><th>性别</th>
</tr>
<tr class="class1">
<td>1001</td><td>韩雪</td><td>18</td><td>女</td>
</tr>
<tr class="class2">
<td>1002</td><td>韩庚</td><td>28</td><td>男</td>
</tr>
<tr class="class1">
<td>1003</td><td>韩信</td><td>38</td><td>女</td>
</tr>
<tr class="class2">
<td>1004</td><td>韩非</td><td>48</td><td>男</td>
</tr>
</table>
.cla1{
background-color: #aa33cc;
}
.cla2{
background-color: #ccaa66;
}
通过js实现隔行变色</h3>
<table id="table_2">
<tr>
<th>学号</th><th>性名</th><th>年龄</th><th>性别</th>
</tr>
<tr>
<td>1001</td><td>韩梅梅</td><td>18</td><td>女</td>
</tr>
<tr>
<td>1002</td><td>韩庚</td><td>28</td><td>男</td>
</tr>
<tr>
<td>1003</td><td>韩信</td><td>38</td><td>女</td>
</tr>
<tr>
<td>1004</td><td>韩非子</td><td>48</td><td>男</td>
</tr>
</table>
<script type="text/javascript">
window.onload=function(){
var oTable=document.getElementById("table_2");
var oTr=oTable.getElementsByTagName("tr");
oTr[0].style.backgroundColor="#aaaaaa";
for(var i=1;i<oTr.length;i++){
if(i%2==0){
oTr[i].style.backgroundColor="#ccaa66";
}else{
oTr[i].style.backgroundColor="#aa33cc";
}
}
}
</script>
*** 通过jquery实现隔行变色 ***
<table id="table_3">
<tr>
<th>学号</th><th>性名</th><th>年龄</th><th>性别</th>
</tr>
<tr>
<td>1001</td><td>韩梅梅</td><td>18</td><td>女</td>
</tr>
<tr>
<td>1002</td><td>韩庚</td><td>28</td><td>男</td>
</tr>
<tr>
<td>1003</td><td>韩信</td><td>38</td><td>女</td>
</tr>
<tr>
<td>1004</td><td>韩非子</td><td>48</td><td>男</td>
</tr>
</table>
<script type="text/javascript">
$(function(){
$("#table_3 tr:even").css("background-color","#ccaa66");//偶数行
$("#table_3 tr:odd").css("background-color","#aa33cc");//奇数行
$("#table_3 tr:first").css("background-color","#aaaaaa");//第一行
});
</script>
</script>
2.4 jquery中特殊字符$的介绍
*** jquery中$完全等价于jQuery ***
<script type="text/javascript">
$(function(){
alert("$");
});
jQuery(function(){
alert("jQuery");
});
</script>
*** jquery中$的作用1:获取元素 ***
<script type="text/javascript">
$(function(){
alert($("#div01").text());
});
</script>
*** jquery中$的作用2:创建元素 ***
<script type="text/javascript">
$(function(){
//给div01中添加一个button
var $Button=$("<input type='button' value='我是按钮'/>");//$(html代码)
$("#div01").append($Button);
});
</script>
*** jquery中$的作用3:作为功能函数的前缀 ***
<script type="text/javascript">
*** 相当于for循环，i是下标，n是当前下标下的div ***
$(function(){
$.each($("div"),function(i,n){ //调用全局方法：$.方法名(xxx)
alert(i+"::::"+n.innerText);
});
});
</script>
*** jquery中$的作用4:$(document).ready()的简化写法 ***
<script type="text/javascript">
$(function(){
alert(11); //$(fn)
});
</script>
3 dom对象和jquery对象
*** dom对象和jquery对象的区别 ***
<!--
dom对象：通过js文件获取的对象：
dom:把文档和文档中所有的元素封装为对象 这些有关系的对象写成dom树
jquery对象：通过$(选择器)获取的对象
-->
<script type="text/javascript">
$(function(){
var oH3=document.getElementById("h3id");
alert("dom对象："+oH3); //dom对象：[object HTMLHeadingElement]
//dom对象使用的是DHTML的API
var $H3=$("#h3id");
alert("jquery对象："+$H3);//jquery对象：[object Object]
// jquery对象使用的jquery的API
//重点： jquery中所有的元素都是集合
*** jquery对象和dom对象之间的转换 ***
alert("把dom对象转化为jquery对象：$(dom对象)"+$(oH3));
alert("把jquery对象转换为dom对象：jquery对象.get(index)"+$H3.get(0));
alert("把jquery对象转换为dom对象：jquery对象[index]"+$H3[0]);
});
</script>
4 选择器
1：基本选择器
-
通配符选择器：$("*") 获取所有元素
-
标签选择器：$("标签名") 获取指定标签名的所有元素
-
类选择器：$(".class值") 获取指定class值的所有元素
-
id选择器：$("#id值") 获取指定id值的一个元素
-
组合选择器：$("选择器1,选择器2,选择器3") 获取与指定的三种选择器匹配的任意一个元素
*** jquery选择器：1 基本选择器 ***
<!-- id选择器 -->
<input type="button" value="改变id为one的元素" id="btn1"/>
<script type="text/javascript">
$(function(){
//事件：jquery中o.xxx(fn)对应的是js中o.onXxx=fn
$("#btn1").click(function(){
//设置多个样式
$("#one").css({"background-color":"red","font-size":"28px","color":"blue"});
});
});
</script>
<!-- 类选择器 -->
<input type="button" value="改变所有类为bgRed的元素" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
$(".bgRed").css({"background-color":"red","color":"blue"});
});
});
</script>
<!-- 标签选择器 -->
<input type="button" value="改变元素名为 <div> 的元素" id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$("div").css({"background-color":"red","color":"blue"});
});
});
</script>
<!-- 通配符选择器 -->
<input type="button" value="改变所有元素" id="btn4"/>
<script type="text/javascript">
$(function(){
$("#btn4").click(function(){
$("*").css({"background-color":"red","color":"blue"});
});
});
</script>
<!-- 组合选择器选择器 -->
<input type="button" value="改变所有span元素和id为two的元素" id="btn5"/>
<script type="text/javascript">
$(function(){
$("#btn5").click(function(){
$("span,#two").css({"background-color":"red","color":"blue"});
});
});
</script>
2：层级选择器
-
fuSelector ziSelector: 获取指定父选择器fuSelector下 符合选择器ziSelector的所有后代元素
-
fuSelector > ziSelector: 获取指定父选择器fuSelector下 符合选择器ziSelector的所有直接子元素
-
selector + nextsSelector: 获取选择器selector后紧挨的符合选择器nextsSelector的弟元素
-
selector ~ nextsSelector: 获取选择器selector的符合选择器nextsSelector的所有弟元素
<!-- 获取指定父选择器下 符合选择器的所有后代元素 -->
<input type="button" value="改变<body>内所有<div>元素" id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","red");
});
});
</script>
<!-- 获取指定父选择器下 符合选择器的所有直接子元素 -->
<input type="button" value="改变<body>内子<div>元素" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
$("body > div").css("background-color","red");
});
});
</script>
<!-- 匹配所有跟在 label 后面的 input 元素 -->
<input type="button" value="改变id为one的下一个紧挨的<div>元素" id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$("#one + div").css("background-color","red");
});
});
</script>
<!-- 找到所有与表单同辈的 input 元素 -->
<input type="button" value="改变id为two的元素后面的所有span元素" id="btn4"/>
<script type="text/javascript">
$(function(){
$("#btn4").click(function(){
$("#two ~ span").css("background-color","red");
});
});
</script>
3：基本过滤选择器
<!-- eq(n) 索引为n的：索引从0开始 -->
<input type="button" value="改变第一个<div>元素" id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div:eq(0)").css("background-color","red");
});
});
</script>
<!-- not(selector) 与参数选择器不匹配的 -->
<input type="button" value="改变class不为one的所有div元素" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
$("div:not('.one')").css("background-color","red");
});
});
</script>
<!-- even 索引为偶数的：索引从0开始 -->
<input type="button" value="改变索引值为偶数的div元素" id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$("div:even").css("background-color","red");
});
});
</script>
<!-- gt(n) 索引大于n的：索引从0开始 odd 索引为奇数的：索引从0开始 -->
<input type="button" value="改变索引值为大于 3 且为奇数的 div元素" id="btn4"/>
<script type="text/javascript">
$(function(){
$("#btn4").click(function(){
$("div:gt(3):odd").css("background-color","red");
//0 1 2 3 4 5 6 7 8 9
//4 5 6 7 8 9---0 1 2 3 4 5
});
});
</script>
<!-- animated 所有动画效果的元素 -->
<input type="button" value="改变当前正在执行动画的所有元素" id="btn5"/>
<script type="text/javascript">
$(function(){
$("#btn5").click(function(){
$(":animated").css("background-color","red");
});
});
</script>
4：内容过滤选择器
内容过滤选择器：根据标签的文本内容和子元素来过滤
<!-- :contains('str'):文本内容包含str的 -->
<input type="button" value="改变含有文本‘div’的div元素" id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div:contains('div')").css("background-color","red");
});
});
</script>
<!-- :empty:不包含子元素和文本内容的 -->
<input type="button" value="改变不包含子元素(或者文本元素)的div元素" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
$("div:empty").css("background-color","red");
});
});
</script>
<!-- :has(selector):子元素包含参数选择器选中的 ：儿子没有当过兵的父亲 站出来 -->
<input type="button" value="改变含有 class 为 bgRed元素的div元素" id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$("div:has(.bgRed)").css("background-color","red");
});
});
</script>
<!-- :parent:有子元素或者文本内容的 标签 -->
<input type="button" value="改变含有子元素(或者文本元素)的div元素" id="btn4"/>
<script type="text/javascript">
$(function(){
$("#btn4").click(function(){
$("div:parent").css("background-color","red");
});
});
</script>
5：可见性过滤选择器
对元素的可见性 进行过滤
不可见的元素：type=hidden 或者 style.display=none
<!-- :hidden 选中的是不可见的元素：input type="hidden" 或者style.display=none -->
<input type="button" value="获取所有隐藏的input的值" id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var val=$("input:hidden").val();//$("input:hidden")获取的集合：val()只获取第一个
$.each($("input:hidden"),function(i,n){
$("#new_div").text($('#new_div').text()+$(n).val());
});
});
});
</script>
<!-- :hidden 选中的是不可见的元素 -->
<input type="button" value="把隐藏的div显示 并更改样式" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
var collDiv=$("div:hidden");
collDiv.css("display","block");//显示元素
collDiv.show();//显示元素
collDiv.css("background-color","red");//设置样式
});
});
</script>
6:属性过滤选择器
-
[atrName] 选中含有属性atrName的元素
-
[atrName=atrValue] 选中含有属性atrName 并且属性值为atrValue的元素
-
[atrName!=atrValue] 选中不含有属性atrName 或者含有属性atrName 但属性值不为atrValue的元素
-
[atrName ^= atrValue] 选中含有属性atrName 并且属性值以atrValue开头的元素
-
[atrName $= atrValue] 选中含有属性atrName 并且属性值以atrValue结尾的元素
-
[atrName *= atrValue] 选中含有属性atrName 并且属性值包含atrValue的元素
-
[][][] 多个属性过滤器组合
7：子元素过滤选择器
<!-- :nth-child(statement) 选中符合式子的子元素： -->
<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div[class='one'] :nth-child(2)").css("background-color","red");//选中的是多个
$("div[class='one'] *:eq(1)").css("background-color","red");//选中的是一个
});
});
</script>
<!-- :first-child 第一个子元素 -->
<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
$("div[class='one'] :first-child").css("background-color","red");
});
});
</script>
<!-- :last-child 最后一个子元素 -->
<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$("div[class='one'] :last-child").css("background-color","red");
});
});
</script>
<!-- :only-child 唯一的子元素 -->
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
<script type="text/javascript">
$(function(){
$("#btn4").click(function(){
$("div[class='one'] :only-child").css("background-color","red");
});
});
</script>
8：表单过滤选择器
根据表单组件的类型进行过滤
-
:input
-
:file
-
:text
-
:password
-
:radio
-
:checkbox
-
:submit
-
:image
-
:hidden
-
:button
9：表单属性过滤选择器
<!-- :enabled 可用的表单组件 :disabled 不可用的表单组件 -->
<input type="button" value="测试：:enabled和:disabled" onclick="test1()"/>
<div id="div_1"></div>
<script type="text/javascript">
function test1(){
//*** 把可用和不可用的text的value写入div_1中 ***
//把可用的text的value写入div1中
var $coll1=$("input[type='text']:enabled");
$.each($coll1,function(i,n){//n是dom对象
$("#div_1").html($("#div_1").html()+"<br/>"+$(n).val());
});
//把不可用的text的value写入div1中
$.each($("input[type='text']:disabled"),function(i,n){//n是dom对象
$("#div_1").html($("#div_1").html()+"<br/>"+$(n).val());
});
}
</script>
<!-- :checked 被选中的radio、checkbox :selected 被选中的option -->
<input type="button" value="测试：:selected和:checked" onclick="test2()"/>
<div id="div_2"></div>
<script type="text/javascript">
function test2(){
$("#div_2").html("");
//把课程和爱好写入div_2中
//获取被选中的课程
var $collSubject=$("select[name='subject'] option:checked");
//获取课程的文本内容
$.each($collSubject,function(i,n){
$("#div_2").html($("#div_2").html()+"<br/>课程("+(i+1)+"):"+$(n).text());
});
//获取被选中的爱好
var $collEnjoy=$("input:checkbox[name='enjoy']:checked");
//获取课程的value值
$.each($collEnjoy,function(i,n){
$("#div_2").html($("#div_2").html()+"<br/>爱好("+(i+1)+"):"+$(n).val());
});
}
</script>
5 jquery中的方法
属性操作
//获取div1的title属性值:attr(attrName):获取属性的值
alert($("#div1").attr("title"));
alert($("#div1").attr("class"));
//attr(attrName,attrValue):设置属性的值
//设置div1的class属性值为cla2：
$("#div1").attr("class","cla2");
//attr({attrName:attrValue,attrName:attrValue}):设置多个属性的值
$("#div1").attr({"class":"cla2","style":"font-size:30px;"});
//删除属性: removeAttr(attrName)
$("#div1").removeAttr("style");
css样式操作
//css(cssAttrName):获取css属性的值
//css(cssAttrName,cssAttrValue):设置css属性的值
//css({cssAttrName:cssAttrValue,cssAttrName:cssAttrValue}):设置多个css属性的值
//alert($("#div1").css("border")+"::"+$("#div1").css("font-size"));
//注意：css方法只能获取style属性样式的值 不能获取通过选择器添加的属性样式
class属性操作
//addClass(className) ：添加class
//removeClass(className) ：移除class
$("#div1").addClass("cla2");
alert($("#div1").attr("class"));//cla1 cla
值、文本、html操作
//val() ：获取组件的value属性值
//val(value) ：设置组件的value属性值
//text()： 获取标签的文本内容
//text(textValue)： 设置标签的文本内容
//html() ：获取标签内的html代码
//html(htmlValue) ：设置标签内的html代码
过滤相关的方法
//eq(index) ：获取下标为index的元素
//is(selector) ： 判断当前元素是不是符合参数选择器
//filter(selector) ：获取符合参数选择器的元素
//not(selector) :获取不符合参数选择器的元素
//has(selector) :获取包含指定后代元素的父元素
//设置div2中索引为2的span子标签的文本
$("#div2 span").eq(1).text("呵呵呵");
//设置div2中title属性值含有2的span子标签的文本
$("#div2 span").filter("[title*='2']").text("22222");
alert( $("#div2 span").is("[title*='2']"));
//设置拥有span子标签的div标签
$("div").has("span").css("padding","50px");
查找
//children([selector]):选中符合参数选择器的所有子元素
//find([selector]):选中符合参数选择器的所有后代元素
//parent([selector]):选中符合参数选择器的父元素
//parents([selector]):选中符合参数选择器的祖先元素
//更改div下的span子元素的样式
$("div").children("span").css("background-color","blue");
//更改div下的span后代元素的样式
$("div").find("span").css("background-color","blue");
crud
//1 添加：
//append(html),append(node):添加到当前元素内部的后面
//prepend(html),prepend(node):添加到当前元素内部的前面
//after(html),after(node):添加到当前元素外部的后面
//before(html),before(node):添加到当前元素尾部的前面
$("#ul1").append($("<li>appendli</li>"));
$("#ul1").prepend($("<li>prependli</li>"));
$("#ul1").after($("<li>afterli</li>"));
$("#ul1").before($("<li>beforeli</li>"));
//2 包裹
//wrap(html),wrap(node)
$("#div1").wrap($("<p></p>"));//使用p标签来包裹#div1
<p><div></div></P>
//3 替换
//replaceWith(html)
//replaceAll(selector)
$("div").replaceWith("<p></p>");//使用p标签替换所有的div标签
$("<p></p>").replaceAll("div");//使用p标签替换所有的div标签
//4 删除
//empty() 清空内部的html代码
//remove(selector) 删除
$("div").empty();// $("div").html("");
//删除只有一个资源的div
$("div :only-child").parent().remove();
6 jquery事件
js中dom对象的事件是：nodes.onxxxx=fn；
jquery中对象的事件是：node.xxx(fn);
- 文档加载：jquery的document对象的ready
$(document).ready(fn);
$().ready(fn);
$(fn);
click(fn); 点击
blur(fn); 失去输入焦点
foucs(fn); 获取输入焦点
chnage(fn); 值更改
resize(fn); 大小更改
mouseover(fn); 鼠标移入
mouseout(fn); 鼠标移出
load(fn); 文档加载
submit(fn); 表单提交
//*** 添加事件：bind(type,fn); ***
//给div1添加点击事件：：通过js实现
document.getElementById("div1").onclick=function(){
alert("点我干啥1：：js添加事件！");
}
//给div1添加点击事件：：通过jquery实现1::xxx方法
$("#div1").click(function(){
alert("点我干啥2：：juery添加事件！");
});
//给div1添加点击事件：：通过jquery实现2：：：bind(type,fn)
$("#div1").bind("click",function(){
alert("点我干啥3：：juery添加事件！");
});
$("#div1").bind("click",fn4);
//*** 解除绑定：unbind(type,[fn]) ***
$("#div1").unbind("click");//解除jquery对div1添加的所有click事件
$("#div1").unbind("click",fn4);//解除jquery对div1添加的click事件的fn4函数
//给div2添加移入和移除事件:通过mouseover和mouseout事件实现
$("#div2").mouseover(function(){
$("#div2").css("background-color","#aa3399");
});
$("#div2").mouseout(function(){
$("#div2").css("background-color","#99aa33");
});
//给div2添加移入和移除事件:通过mouse方法实现
//hover(fn1,fn2):fn1是鼠标移入执行 fn2是鼠标移出执行
$("#div2").hover(
function(){
$("#div2").css("background-color","#aa3399");
},
function(){
$("#div2").css("background-color","#99aa33");
}
);
//每次点击实行的函数不同：toggle(fn1,fn2,fn3...)
$("#div3").toggle(
function(){
alert("111111");
},
function(){
alert("111222");
},
function(){
alert("111333");
}
);
7 jquery动画
1 更改对角线
function text01(){
//***show和hide：//以对角线隐藏和显示
//***hide([speed],fn) :以speed速度隐藏后 执行回调函数fn
//***show([speed],fn) :以speed速度显示后 执行回调函数fn
//$("#div1").hide();//隐藏
//$("#div1").hide(3000);//在3秒内隐藏
//$("#div1").hide(3000,function(){alert("我闪！");});//隐藏后执行回调函数
//使用方法的递归： 实现隐藏显示切换
//div1Change1();
//div1 隐藏/显示
//toggle([speend],fn); 以speed速度 如果当前元素隐藏就显示 如果当前元素显示就隐藏 然后执行回调函数fn
//$("#div1").toggle(3000,function(){alert("div1 隐藏/显示");});
//div1隐藏显示切换
div1Change2();
}
function div1Change1(){
if($("#div1").is(":hidden")){
$("#div1").show(3000,div1Change);
}else{
$("#div1").hide(3000,div1Change);
}
}
function div1Change2(){
$("#div1").toggle(3000,div1Change2);
}
2 更改高度
function text02(){
//slideUp(speed,fn)：更改高度隐藏 --卷起
$("#div2").slideUp("slow");
//slideDown(speed,fn)：更改高度显示
$("#div2").slideDown("slow",function(){alert("我显示！");});
//slideTogge(speed,fn) :通过更改高度 在隐藏和显示之间切换
div1Change3();
}
function div1Change3(){
$("#div2").slideToggle(3000,div1Change3);
}
3 更改透明度
function text03(){
//fadeIn(speed,[fn])：更改透明度：淡入：：显示
//fadeOut(speed,[fn])：更改透明度：淡出：：隐藏
//$("#div3").fadeOut(3000);//隐藏
//$("#div3").fadeIn(3000);//显示
//fadeTo(speed,opacity,[fn]);
//$("#div3").fadeTo(3000,0.25);
//$("#div3").fadeTo(3000,1);
div1Change41();
}
function div1Change41(){
$("#div3").fadeTo(3000,0.25,div1Change42);
}
function div1Change42(){
$("#div3").fadeTo(3000,1,div1Change41);
}
4 自定义动画
function text04(){
//animate();
//animate(params, [duration], [easing], [callback])
//参数1params：更改的属性
//参数2[duration]：速度
//参数3[easing]:插件类型
//参数4[callback]:回调函数
//$("#div4").animate({height:"100px",width:"100px",fontSize:"40px"},4000);
//$("#div4").animate({left:"200px",top:"200px"},4000);
div4Change();
}
function div4Change(){
//随机整数：
var leftVal=parseInt(Math.random()*100);
leftVal=Math.random()>0.5?("+"+leftVal):("-"+leftVal);
var topVal=parseInt(Math.random()*100);
topVal=Math.random()>0.5?("+"+topVal):("-"+topVal);
var heightVal=parseInt(Math.random()*100+100);
var widthVal=parseInt(Math.random()*100+200);
$("#div4").animate({left:leftVal+"px",top:topVal+"px",width:widthVal+"px",height:heightVal+"px"},3000, div4Change);
}
