1 jQuery操作元素属性
jq元素.attr()
* 获取属性值 一个参数
$("img").attr("src")
* 修改属性值 两个参数
$("img").attr("alt","hahahaha");
实例:实现点击小图,切换大图
*prop() 操作结果是布尔值类型的属性
$("input").prop("checked",true)
实例:表格全选,全不选 具体布局请看文件
$(function() {
$("#all").click(function() {
//下面的三个checkbox的状态与全选的CheckBox的状态保持一致
$("tbody input").prop("checked",$(this).prop("checked"));
});
$("tbody input").click(function() {
if($("tbody input:checked").length == $("tbody input").length){
$("#all").prop("checked",true);
}else {
$("#all").prop("checked",false);
}
});
});
jQuery 动画
1 show(time,callback)-------显示
hide(time,callback)-----隐藏
toggle(time,callback)------- 显示/隐藏
不带参数时,没有动画效果
time 可选参,表示完成时间
callback 可选参,回调函数,一般是iif
2 fadeIn(time,callback)-------淡入
fadeOut(time,callback)------淡出
fadeToggle(time,callback)-------淡入/淡出
time 可选参,表示完成时间
callback 可选参,回调函数,一般是iif
3 slideDown(time,callback)-------下滑
slideUp(time,callback)--------上滑
slideToggle(time,callback)-----下滑/上滑
time 可选参,表示完成时间
callback 可选参,回调函数,一般是iif
最佳实战--->下列列表
4 animate({params},speed,callback)
// 第一个参数 对象 需要动画的样式
// 第二个参数 speed 动画执行的时间
// 第三个参数 动画执行的效果
// 第四个参数 回调函数
$("div:eq(0)").animate({left:700},8000);
$("div:eq(1)").animate({left:700},8000,"linear");
$("div:eq(2)").animate({left:700},8000,"linear",function() {
alert("end");
jq元素.attr()
* 获取属性值 一个参数
$("img").attr("src")
* 修改属性值 两个参数
$("img").attr("alt","hahahaha");
实例:实现点击小图,切换大图
*prop() 操作结果是布尔值类型的属性
$("input").prop("checked",true)
实例:表格全选,全不选 具体布局请看文件
$(function() {
$("#all").click(function() {
//下面的三个checkbox的状态与全选的CheckBox的状态保持一致
$("tbody input").prop("checked",$(this).prop("checked"));
});
$("tbody input").click(function() {
if($("tbody input:checked").length == $("tbody input").length){
$("#all").prop("checked",true);
}else {
$("#all").prop("checked",false);
}
});
});
jQuery 动画
1 show(time,callback)-------显示
hide(time,callback)-----隐藏
toggle(time,callback)------- 显示/隐藏
不带参数时,没有动画效果
time 可选参,表示完成时间
callback 可选参,回调函数,一般是iif
2 fadeIn(time,callback)-------淡入
fadeOut(time,callback)------淡出
fadeToggle(time,callback)-------淡入/淡出
time 可选参,表示完成时间
callback 可选参,回调函数,一般是iif
3 slideDown(time,callback)-------下滑
slideUp(time,callback)--------上滑
slideToggle(time,callback)-----下滑/上滑
time 可选参,表示完成时间
callback 可选参,回调函数,一般是iif
最佳实战--->下列列表
4 animate({params},speed,callback)
// 第一个参数 对象 需要动画的样式
// 第二个参数 speed 动画执行的时间
// 第三个参数 动画执行的效果
// 第四个参数 回调函数
$("div:eq(0)").animate({left:700},8000);
$("div:eq(1)").animate({left:700},8000,"linear");
$("div:eq(2)").animate({left:700},8000,"linear",function() {
alert("end");