1.jquery操作css样式
◆主要通过display+opacity+width+height来隐藏：hide([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
■主要通过display+height来隐藏：slideUp([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
▲主要通过display+opacity来隐藏：fadeOut([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
◆设置样式：
$(element).css({"width":"100px","height":"100px"});◆设置样式：
$(element).css({"width":100,"height":100});◆ 设置样式：
$(element).css("backgound-color","#f00");◆ 设置样式：
$(element).css("backgoundColor","#f00");◆ 获取样式：
$(element).css("width");//如果伪数组中有多个元素，那么只会获取第一个元素的宽度。◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery操作css样式</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$("button").click(function () {
//可以直接这么设置
$("div").css({width: 100, height: 100});
//也可以这么设置 内部其实使用的是 style[属性名]的方式
$("div").css({marginTop: "100px", marginLeft: "200px"});
$("div").css("backgroundColor","#f00");
$("div").css("border-radius","10px");
});
})
</script>
</head>
<body>
<button>设置样式</button>
<!--<button></button>-->
<!--<button></button>-->
<div></div>
</body>
</html>2.jquery操作类
◆添加类：
$(element).addClass(className);◆移除类：
$(element).removeClass(className);◆是否包含类：
$(element).hasClass(className);//如果伪数组中有多个元素，只要有一个元素有这个类就返回true，全部没有这个类就返回false。◆切换类（有就删除，没有就添加）:
toggleClass(className);◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery操作类</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: #0f0;
margin: 10px auto;
}
.current {
background-color: #501;
border-radius: 10px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
//添加类
$("button").eq(0).click(function () {
$("div").addClass("current");
});
//移除类
$("button").eq(1).click(function () {
$("div").removeClass("current");
});
//使用判断来切换类
$("button").eq(2).click(function () {
/*
* 如果伪数组中有多个元素，
* 只要有一个元素有这个类就返回true，
* 全部没有这个类就返回false。
*/
if ($("div").hasClass("current")) {
$("div").removeClass("current");
} else {
$("div").addClass("current");
}
});
//自动切换类
$("button").eq(3).click(function () {
$("div").toggleClass("current");
});
})
</script>
</head>
<body>
<button>添加类</button>
<button>移除类</button>
<button>使用判断来切换类</button>
<button>自动切换类</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>★动画的方法中参数除了可以是毫秒以外，还可以是字符串，
如slow 慢表示600毫秒、
normal 中等表示400毫秒、
fast 快表示200毫秒，
并且动画的参数中都是有回调函数的，当前动画执行完毕之后就执行回调函数。
◆主要通过display+opacity+width+height来显示：show([毫秒],fn)，但是最终只剩一个display:block;，其它的属性都收回去了。◆主要通过display+opacity+width+height来隐藏：hide([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
◆主要通过display+opacity+width+height来显示/隐藏：toggle([毫秒],fn)，但是最终只剩一个display:none;或者display:block;，其它的属性都收回去了，如果你的display属性值为none，那么toggle就是显示，如果你的display属性值为block，那么toggle就是隐藏。
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示与隐藏的动画效果（show、hide、toggle）</title>
<style type="text/css">
div {
width: 150px;
height: 150px;
background-color: #0f0;
/*margin: 100px auto;*/
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//显示
$("button").eq(0).click(function () {
// $("div").show();//直接显示 相当于直接display:none;
// $("div").show("fast");//快 ：200毫秒
// $("div").show("normal");//中 ：400毫秒
// $("div").show("slow");//慢 ：600毫秒
$("div").show(1000, function () {
console.log("显示完毕");
});
});
//隐藏
$("button").eq(1).click(function () {
// $("div").hide();
$("div").hide(1000, function () {
console.log("隐藏完毕");
});
});
//显示/隐藏
$("button").eq(2).click(function () {
// $("div").toggle();
$("div").toggle(1000, function () {
console.log("（显示/隐藏）完毕");
});
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>显示/隐藏</button>
<div></div>
</body>
</html>■主要通过display+height来隐藏：slideUp([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
■主要通过display+height来显示/隐藏：slideToggle([毫秒],fn)，其它的属性都收回去了，如果你的display属性值为none，那么slideToggle就是显示，如果你的display属性值为block，那么slideToggle就是隐藏。
■
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑下和滑上的动画效果（slideDown、slideUp、slideToggle）</title>
<style type="text/css">
div {
width: 150px;
height: 150px;
background-color: #0f0;
margin: 100px auto;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//滑入 你的视野
$("button").eq(0).click(function () {
$("div").slideDown();//直接显示 速度很快;
// $("div").slideDown("fast");//快 ：200毫秒
// $("div").slideDown("normal");//中 ：400毫秒
// $("div").slideDown("slow");//慢 ：600毫秒
// $("div").slideDown(2000);
});
//滑出 你的视野
$("button").eq(1).click(function () {
// $("div").slideUp();
$("div").slideUp(2000);
});
//（滑入/滑出 你的视野）切换
$("button").eq(2).click(function () {
// $("div").slideToggle();
$("div").slideToggle(2000);
});
})
</script>
</head>
<body>
<button>滑入你的视野</button>
<button>滑出你的视野</button>
<button>（滑入/滑出 你的视野）切换</button>
<div></div>
</body>
</html>▲主要通过display+opacity来隐藏：fadeOut([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
▲主要通过display+opacity来显示/隐藏：fadeToggle([毫秒],fn)，其它的属性都收回去了，如果你的display属性值为none，那么fadeToggle就是显示，如果你的display属性值为block，那么fadeToggle就是隐藏。
▲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入和淡出的动画效果（fadeIn、fadeOut、fadeToggle）</title>
<style type="text/css">
div {
width: 150px;
height: 150px;
background-color: #0f0;
margin: 100px auto;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//淡入
$("button").eq(0).click(function () {
// $("div").fadeIn();//直接显示 速度很快;
// $("div").fadeIn("fast");//快 ：200毫秒
// $("div").fadeIn("normal");//中 ：400毫秒
// $("div").fadeIn("slow");//慢 ：600毫秒
$("div").fadeIn(2000);
});
//淡出
$("button").eq(1).click(function () {
// $("div").fadeOut();
$("div").fadeOut(2000);
});
//（淡入/淡出）切换
$("button").eq(2).click(function () {
// $("div").fadeToggle();
$("div").fadeToggle(2000);
});
})
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>（淡入/淡出）切换</button>
<div></div>
</body>
</html>▲主要通过opacity来指定具体的透明度来显示：fadeTo([毫秒],opacity,fn)，这个方法是以动画的方式改变透明度的，第一个参数必须写opacity取值范围是0-1.0之间，在js中小数如果小于1，可以省略0.几的0，直接写.几就可以了，回调函数fn可有可无。
▲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度渐变的动画效果（fadeTo）</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
background-color: #0f0;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//需求：在文本框中设置值，然后点击按钮，设置指定透明度的盒子 透明度变化的动画
//思路：获取文本框中的值，转换为数字，如果转换失败则默认值为0.5
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素对象
$("button").click(function () {
var val = $("#txt").val();
// 转换为数字，如果转换失败则默认值为0.5
val = parseFloat(val) || 0.5;
$("div").fadeTo(2000, val);
});
//2.绑定事件
//3.书写事件驱动程序
})
</script>
</head>
<body>
<label for="txt">指定透明度</label> <input type="text" id="txt" value="0.5">
<button>设置透明度</button>
<div></div>
</body>
</html>★主要通过自定义样式属性的json对象来进行动画显示/动画隐藏：animate({params},speed,fn)，params是样式属性的json对象，speed是动画执行的时间而不是步长，fn是动画执行完毕后的回调函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义动画（animate）</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: #0f0;
margin-left: 50px;
margin-top: 50px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$("button").click(function () {
//一个圈圈的动画
$("div").animate({
width: "300px", height: "300px",
"border-radius": "300px", "margin-left": "900px"
}, 2000,
function () {
$("div").animate({
width: "200px", height: "200px",
"border-radius": "0px","margin-top": "500px"
}, 2000,
function () {
$("div").animate({
width: "300px", height: "300px",
"border-radius": "300px", "margin-left": "50px"
}, 2000,
function () {
$("div").animate({
width: "200px", height: "200px",
"border-radius": "0px","margin-top": "50px"
}, 2000,
function () {
alert("终于跑完了，好累好累。");
});
});
});
});
});
})
</script>
</head>
<body>
<button>跑起来，go，go，go</button>
<div></div>
</body>
</html>情况1：
stop(true,true);//后续动画不执行，立即执行完毕当前动画情况2：
stop(false,true);//后续动画继续执行，立即执行完成当前动画情况3：
stop(true,false);//后续动画不执行，立即停止当前动画(因为后续动画不执行了，所以就算你为false了，也是停止当前动画)情况4：
stop(false,false);//后续动画继续执行，立即停止当前动画（当前的动画停止，然后让后续的动画执行）♦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>停止动画（stop）</title>
<style type="text/css">
div {
width: 150px;
height: 150px;
background-color: #0f0;
margin-top: 50px;
margin-left: 50px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
// stop(true,true)后续动画不执行，立即执行完毕当前动画
$("button").eq(0).click(function () {
//多点击几次可以看到，会有瞬间隐藏 和瞬间显示
//主要体现在你多点击几次，后续的动画并不会有多轮执行
$("div").stop(true,true).slideDown(2000).slideUp(2000);
});
// stop(false,true)后续动画继续执行，立即执行完成当前动画
$("button").eq(1).click(function () {
//多点击几次可以看到，会有立即执行完毕当前动画，但是后续的动画还是继续执行
//主要体现在你多点击几次，后续的动画会有多轮执行
$("div").stop(false,true).slideDown(2000).slideUp(2000);
});
// stop(true,false)后续动画不执行，立即停止当前动画(因为后续动画不执行了，
// 所以就算你为false了，也是停止当前动画)
$("button").eq(2).click(function () {
//多点击几次可以看到，会立即停止当前动画，后续的动画并不会继续执行
//主要体现在你多点击几次，后续的动画并不会有多轮执行
$("div").stop(true,false).slideDown(2000).slideUp(2000);
});
// stop(false,false)后续动画继续执行，立即停止当前动画（当前的动画停止，
// 然后让后续的动画执行）
$("button").eq(3).click(function () {
//多点击几次可以看到，会立即停止当前动画，后续的动画会继续执行
//主要体现在你多点击几次，后续的动画会有多轮执行
$("div").stop(false,false).slideDown(2000).slideUp(2000);
});
})
</script>
</head>
<body>
<button>stop(true,true)</button>
<button>stop(false,true)</button>
<button>stop(true,false)</button>
<button>stop(false,false)</button>
<div></div>
</body>
</html>★动画之间可以随意组合
☆show与hide其实真正改变的属性有很多，都在这个标签中：<div style="display: block; overflow: hidden; height: 128.448px; padding: 0px; margin: 85.6319px 473.973px; width: 128.448px; opacity: 0.856319;"></div><div style="display: block; overflow: hidden; height: 35.3116px; padding-top: 0px; margin-top: 23.541px; padding-bottom: 0px; margin-bottom: 23.541px;"></div>☆fadeIn与fadeOut其实真正改变的属性也很多，都在这个标签中：
<div style="display: block; opacity: 0.581319;"></div>★使用动画来DIY：滑下滑上的下拉菜单、淡入淡出的右下角广告
☆滑下滑上的下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用滑下和滑上制作下拉菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(images/bg.jpg);
}
.wrap li {
background-image: url(images/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script>
//需求：当移入到一级菜单时，显示对应的二级菜单，移出时隐藏对应的二级菜单
//思路：所有一级菜单的鼠标移入事件，
// 然后slideDown当前一级菜单下的ul，
// 移出时slideUp当前一级菜单下的ul
// 要求 移入移出时 不执行后续动画， 立即停止当前动画
//步骤：
//1.获取事件源及相关元素对象
//2.绑定事件
//3.书写事件驱动程序
$(document).ready(function () {
//1.获取事件源及相关元素对象
var wrap = $(".wrap");
var liArr = wrap.children("ul").children("li");
// console.log(wrap)
// console.log(liArr)
//2.绑定事件
liArr.mouseenter(function () {
$(this).children("ul").stop(true,false).slideDown(500);
});
liArr.mouseleave(function () {
$(this).children("ul").stop(true,false).slideUp(500);
});
//3.书写事件驱动程序
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> ☆淡入淡出的右下角广告
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用滑下滑上以及淡入淡出制作右下角广告</title>
<style type="text/css">
.ad {
position: fixed;
right: 0;
bottom: 0;
width: 230px;
height: 120px;
background-image: url(images/ad.jpg);
display: none;
}
.ad span {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 18px;
background-image: url(images/h.jpg);
cursor: pointer;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//需求：先滑入再滑出然后再淡入，单击关闭广告时就淡出
//思路：滑入 slideDown 滑出 slideUp 淡入 fadeIn 淡出 fadeOut
//步骤：
//1.页面加载时 执行动画
//2.点击关闭广告时 关闭动画
//1.页面加载时 执行动画
$(".ad").slideDown(2000).slideUp(2000).fadeIn(2000);
//2.点击关闭广告时 关闭动画
$(".ad>span").click(function () {
$(this).parent().fadeOut(1000);
});
})
</script>
</head>
<body>
<div class="ani">我是内容</div>
<div class="ad">
<span></span>
</div>
</body>
</html>
4.jQuery中的创建节点对象的方式有两种
◆创建一个li标签的jquery的dom对象
$("<li></li>"); ◆这个将一对li标签加入到li第一个ul中。
$("ul").html("<li></li>");<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery节点操作-创建节点两种方式</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//第一种方式 通过$()的方式
var li = $("<li>我是移民li，人不犯我我不犯人，人若犯我我必诛之。</li>");
console.log(li);
//第二种方式 通过html()的方式
$("ul").html("<li>我是移民li，人不犯我我不犯人，人若犯我我必诛之。</li>");
})
</script>
</head>
<body>
<ul>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
</ul>
</body>
</html>5.jQuery中的添加节点的方式：
◆父节点.append(newChildren); //添加新的子节点(成为了当前父节点的最后一个子节点)。
◆新的子节点.appendTo(parentNode); //将新的子节点添加到父节点（成为了当前父节点的最后一个子节点）中。
◆父节点.prepend(newChildren); //添加新的子节点（成为了当前父节点的第一个子节点）。
◆父节点.html(newChildren); //直接把一个节点放到html方法中 作为父节点的子节点。
◆新的子节点.prependTo(parentNode);//将新的子节点添加到父节点（成为了当前父节点的第一个子节点）。
◆当前节点.after(newNode);//在当前节点的后面添加一个新节点。
◆当前节点.before(newNode);//在当前节点的前面添加一个新节点。
★
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery节点操作-添加节点的方式</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
var li = $("<li>我是移民li，人不犯我我不犯人，人若犯我我必诛之。</li>");
//第一种方式 添加新的子节点(成为了当前父节点的最后一个子节点)。
// $("ul").append(li);
//第二种方式 将新的子节点添加到父节点（成为了当前父节点的最后一个子节点）中。
// li.appendTo("ul");
//第三种方式 添加新的子节点（成为了当前父节点的第一个子节点）。
// $("ul").prepend(li);
//第四种方式 将新的子节点添加到父节点（成为了当前父节点的第一个子节点）。
// li.prependTo("ul");
//第五种方式 在当前节点的后面添加一个新节点。
// $("ul>li:eq(0)").after(li);
//第六种方式 在当前节点的前面添加一个新节点。
// $("ul>li:eq(2)").before(li);
//第七种 直接把一个节点放到html方法中 作为父节点的子节点
// $("ul").html(li);
})
</script>
</head>
<body>
<ul>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
</ul>
</body>
</html>6.jQuery中的删除和清空节点、复制节点的方式：
◆$("ul").html(""); //这样就清空了ul中的所有的节点了。
◆$("ul").empty();//这样就清空了ul中的所有的节点了。
◆$("ul>li:eq(0)").remove();//这样就删除了ul中的第一个li节点了。
◆$("ul").clone();//这样就复制了ul节点，只能够深层复制，不能浅层复制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery节点操作-删除和清空以及克隆节点的方式</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//删除节点
$("button:eq(0)").click(function () {
$("ul>li:eq(0)").remove();
});
//清空节点
$("button:eq(1)").click(function () {
// $("ul").html();
$("ul").empty();
});
//克隆节点 只能够深层克隆
$("button:eq(2)").click(function () {
$("#box").append($("ul").clone());
});
})
</script>
</head>
<body>
<button>删除节点</button>
<button>清空节点</button>
<button>克隆节点</button>
<div id="box">
<ul>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
<li>我是土著li，别惹我，惹我就找人弄你。</li>
</ul>
</div>
</body>
</html>7.使用jQuery来DIY:下拉列表选择水果、动态创建表格、表格添加数据
◆下拉列表选择水果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery节点操作-使用下拉列表制作选择水果</title>
<style type="text/css">
select {
width: 170px;
height: 270px;
background-color: #0f0;
font: 600 16px/24px "microsoft yahei";
cursor: pointer;
}
button {
cursor: pointer;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//需求1：点击>>> 或者 <<< 按钮时 将所有的option移动到右边或者左边
//需求2：点击 > 或者 < 按钮时 将选中的option移动到右边或者左边
//思路1：点击>>> <<< 时获取所有的option 然后追加到右边或者左边的select中去
//思路2：点击 > 或者 < 按钮时 获取选中的option 然后追加到右边或者左边
//步骤：
//1.
//2.
//3.
$(function () {
// >>>
$("button:eq(0)").click(function () {
$("#sel01>option").appendTo("#sel02");
});
// <<<
$("button:eq(1)").click(function () {
$("#sel02>option").appendTo("#sel01");
});
// >
$("button:eq(2)").click(function () {
$("#sel01>option:selected").appendTo("#sel02");
$("#sel02>option").attr("selected",false);
});
// <
$("button:eq(3)").click(function () {
$("#sel02>option:selected").appendTo("#sel01");
$("#sel01>option").attr("selected",false);
});
})
</script>
</head>
<body>
<select id="sel01" size="10" multiple="multiple">
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">鸭梨</option>
<option value="3">橙子</option>
<option value="4">甘蔗</option>
</select>
<button> >>></button>
<button> <<<</button>
<button> ></button>
<button> <</button>
<select id="sel02" size="10" multiple="multiple">
</select>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery节点操作-动态创建表格</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
// 模拟从后台拿到的数据
var data = [{
name: "小仙女",
url: "http://www.小仙女.cn",
type: "美丽动人的小仙女"
}, {
name: "黑骑士",
url: "http://www.黑骑士.com",
type: "英姿帅气的黑骑士"
}, {
name: "水晶女孩",
url: "http://web.水晶女孩.cn",
type: "聪明可爱的水晶女孩"
}];
//需求：当点击获取数据时，将数据拼接成tr>td的方式 追加到tbody中去。
//思路：点击按钮后，遍历json对象，将数据以tr>td的方式追加到tbody中去。
//步骤：
$(function () {
//获取数据
$("#j_btnGetData").click(function () {
//遍历数组
for (var i = 0; i < data.length; i++) {
//创建tr
var tr = $("<tr></tr>");
//遍历对象
for (var key in data[i]) {
//追加td
tr.append("<td>" + data[i][key] + "</td>")
}
//追加tr
$("#j_tbData").append(tr);
}
});
});
})
</script>
</head>
<body>
<input type="button" value="获取数据" id="j_btnGetData"/>
<table>
<thead>
<tr>
<th>名字</th>
<th>个人首页</th>
<th>描述</th>
</tr>
</thead>
<tbody id="j_tbData">
<!--<tr>-->
<!--<td>1</td>-->
<!--<td>2</td>-->
<!--<td>3</td>-->
<!--</tr>-->
</tbody>
</table>
</body>
</html>◆表格添加数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery节点操作-表格添加数据</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.wrap {
width: 410px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
td a.get {
text-decoration: none;
}
a.del:hover {
text-decoration: underline;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
.btnAdd {
width: 110px;
height: 30px;
font-size: 20px;
font-weight: bold;
}
.form-item {
height: 100%;
position: relative;
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
line-height: 36px;
}
.form-item > .lb {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100px;
text-align: right;
}
.form-item > .txt {
width: 300px;
height: 32px;
}
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
display: none;
}
.form-add {
position: fixed;
top: 30%;
left: 50%;
margin-left: -197px;
padding-bottom: 20px;
background: #fff;
display: none;
}
.form-add-title {
background-color: #f7f7f7;
border-width: 1px 1px 0 1px;
border-bottom: 0;
margin-bottom: 15px;
position: relative;
}
.form-add-title span {
width: auto;
height: 18px;
font-size: 16px;
font-family: 宋体;
font-weight: bold;
color: rgb(102, 102, 102);
text-indent: 12px;
padding: 8px 0px 10px;
margin-right: 10px;
display: block;
overflow: hidden;
text-align: left;
}
.form-add-title div {
width: 16px;
height: 20px;
position: absolute;
right: 10px;
top: 6px;
font-size: 30px;
line-height: 16px;
cursor: pointer;
}
.form-submit {
text-align: center;
}
.form-submit input {
width: 170px;
height: 32px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
//需求1：点击 添加数据的按钮时， 显示j_mask遮罩层和j_formAdd表单层，
// 单击j_hideFormAdd关闭按钮时就隐藏 j_mask遮罩层和j_formAdd表单层。
//需求2：每次数据添加完毕就需要清空，
// 并且每次添加数据之前要检查数据是否为空，为空就不添加。
//需求3：点击 j_btnAdd添加按钮时 将数据添加j_tb tbody中去。
//需求4：点击get链接时，从表格中移除这一行 ，表示已经学会了
$("#j_btnAddData").click(function () {
$("#j_mask").fadeIn(1000);
$("#j_formAdd").fadeIn(1000);
});
$("#j_hideFormAdd").click(function () {
$("#j_mask").fadeOut(1000);
$("#j_formAdd").fadeOut(1000);
});
$("#j_btnAdd").click(function () {
//如果数据为空
if (!($("#j_txtLesson").val() || $("#j_txtBelSch").val())) {
alert("请输入目标数据！");
} else {
$("#j_tb").append("<tr><td>" + $("#j_txtLesson").val() + "</td><td>" + $("#j_txtBelSch").val() + "</td>"+
'<td><a href="javascrip:;" class="get">GET</a></td>' +"</tr>")
$("#j_mask").fadeOut(1000);
$("#j_formAdd").fadeOut(1000, function () {
$("#j_txtLesson").val("");
$("#j_txtBelSch").val("水晶女孩");
});
}
});
//这里没有用事件委托 会导致新的数据添加进来后 并不会绑定单击事件
$("#j_tb>tr>td>a").click(function () {
// console.log($(this).parents("tr"));
$(this).parents("tr").remove();
});
});
</script>
</head>
<body>
<div class="wrap">
<div>
<input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
</div>
<table>
<thead>
<tr>
<!-- <th><input type="checkbox" id="j_cbAll" /></th> -->
<th>技能名称</th>
<th>所属对象</th>
<th>已学会</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>JavaScript</td>
<td>水晶女孩</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>css</td>
<td>水晶女孩</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>html</td>
<td>水晶女孩</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>jQuery</td>
<td>水晶女孩</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
</tbody>
</table>
</div>
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
<div class="form-add-title">
<span>添加数据</span>
<div id="j_hideFormAdd">x</div>
</div>
<div class="form-item">
<label class="lb" for="j_txtLesson">技能名称：</label>
<input class="txt" type="text" id="j_txtLesson" placeholder="请输入技能名称">
</div>
<div class="form-item">
<label class="lb" for="j_txtBelSch">所属对象：</label>
<input class="txt" type="text" id="j_txtBelSch" value="水晶女孩">
</div>
<div class="form-submit">
<input type="button" value="添加" id="j_btnAdd">
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
