样式表属性操作.css
$("div").css({'width':100,'height':100,'background':'red'});
$("div").css("background","pink");
类操作
.addClass添加类 $("div").addClass("class");
.removeClass删除类 $("div).removeClass("class");
hasClass判断是否有类 $("div).hasClass("class");
.toggleClass 切换类 $("div").toggleClass("class"); 有class类将删除 没有将添加class类
动画
显示／隐藏：
.show/.hide/.toogle() 括号可以啥都不写 ；是通过display：block／none。来实现隐藏和显示
.show/.hide/.toogle(毫秒值） 固定时间 ； 通过控制宽高透明度。dispaly控制／各属性只在变换的时候才存在，显示完毕后，宽高和opacity属性清楚
.show/.hide/.toogle(fast/normer/slow)： slow:(慢600ms）／normer：正常400毫秒／fast：快：200毫秒
.show/.hide.toogle(fast/normer/slow,function(){函数}); 回掉函数。显示完毕后执行回调函数
无参数／毫秒数／字符串／回调函数
滑入／滑出：
.slideDown() 显示 fadeIn：显示 .animate({json串},时间，回调函数)
slideUp(); 隐藏 fadeOut：隐藏 animate不支持背景色
.toogle(); fadeToggle： 切换
停止动画:
.stop(false,fasle) 停止执行当前正在执行的动画，执行下一个动画
.stop（true，false）
清空队列，后续动画不执行
- 不立即完成当前动画，只是停止.stop（false，false）
- 不清空队列，后续动画执行
- 停止完成当前动画，执行下一个动画
- .stop（true，true）
- 清空动画队列，不执行以后的动画
- 立即完成当前的动画
- .stop（false，true）
- 不清空动画队列，后续动画执行
- 立即完成当前动画后，执行下一个动画
第一个参数判断是否清空队列。可以立即结束动画。
true 清空 false 不清空
第二个参数让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
- true 立即完成
- false 不立即完成
节点操作：
创建jQuery对象
$name = $("<li></li>"); 创建一个li标签
$("标签名“).html("内容")
添加对象
$("目标位置“).append("要添加的元素"); 在目标最后的位置添加
newNode.appendTo($('添加到哪') ;
prepend() 在盒子最前面添加 newNode.prependTo($('要添加到哪'));
$("").after(newNode): 兄弟之后。 成倍添加
$("").before(newNode); 在兄弟之前
清空节点：
$("node").html("空字符") ;
$("node").empty()
删除指定元素. $("node").remove();删除自身
复制节点：
var newNode = $(要复制的元素).clone;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></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.itcast.cn",
type: "IT最强培训机构"
}, {
name: "黑马程序员",
url: "http://www.itheima.com",
type: "大学生IT培训机构"
}, {
name: "传智前端学院",
url: "http://web.itcast.cn",
type: "前端的黄埔军校"
}];
//需求:点击按钮，然后生成tr里面生成三个td.数组元素个数个tr。然后放入tbody中
//步骤：
//1.绑定事件
//2.利用for循环,把数组中的所有数据组合成一个字符串。
//3.把生成的字符串设置为html内容添加进tbody中。
//1.绑定事件
$("input").click(function () {
//写入到click事件中，每次点击以后把str清空
var str = "";
//2.利用for循环,把数组中的所有数据组合成一个字符串。
for(var i=0;i<data.length;i++){
//如何生成3组？？？
// str += "<tr><td>1</td><td>2</td><td>3</td></tr>";
//data[i] = 数组中的每一个json
//data[i].name = 数组中的每一个json的name属性值
str += "<tr><td>"+data[i].name+"</td><td>"+data[i].url+"</td><td>"+data[i].type+"</td></tr>";
}
//3.把生成的字符串设置为html内容添加进tbody中。
$("#j_tbData").html(str);
})
})
</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>
动态创建表格
