jQuery操作DOM元素
1).创建新的DOM元素：
1.工厂函数$()用于获取或创建节点
2.$(selector)：通过选择器获取节点
3.$(element)：把DOM节点转换成jQuery节点
4.$(html)：使用HTML字符串创建jQuery节点，eg，var $newNode = $('<li title="标题为千与千寻">千与千寻</li>');
2).添加DOM元素
1.$(A).append(B) 表示将B追加到A中
2.$(A).appendTo(B) 表示把A追加到B中
3.$(A).prepend(B) 表示将B前置插入到A中
4.$(A).prependTo(B) 表示将A前置插入到B中
5.$(A).after(B) 表示将B插入到A之后
6.$(A).insertAfter(B) 表示将A插入到B之后
7.$(A).before(B) 表示将B插入至A之前
8.$(A).insertBefore(B) 表示将A插入到B之前
3).复制DOM元素
clone():
1.$("ul li:eq(1)").clone().appendTo("ul"); //只复制元素
2.$("ul li:eq(1)").clone(true).appendTo("ul"); //复制元素和事件
4).删除DOM元素
1.remove()： 删除整个节点
2.detach()： 删除整个节点，保留元素的绑定事件、附加的数据
3.empty()： 清空节点内容
5).遍历DOM元素
each(): 遍历操作的元素
jQuery动画
1.基本动画效果
show()
hide()
fadeIn(): 透明变为不透明
fadeOut(): 不透明变为透明
slideDown(): 高度逐渐变大
slideUp()
2.自定义动画：animate(params,[speed],[easing],[fn])
params： 事件参数 元素的样式或属性设置
speed： 动画速度 预设值("slow","normal", or "fast")或动画时长的毫秒数值(如：1000)
easing： 要使用的动画 默认jQuery提供"linear" 和 "swing"
fn： 动画完成时执行的函数 每个元素执行一次
范例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 table{ 8 100%; 9 border: 1px solid gray; 10 border-collapse: collapse; 11 font-size: 14px; 12 } 13 table thead td{ 14 text-align: center; 15 font-weight: bold; 16 background-color: goldenrod; 17 } 18 table tr td{ 19 border: 1px solid gray; 20 line-height: 34px; 21 height: 34px; 22 padding: 0px 10px; 23 } 24 .btn { 25 border: 1px solid darkgray; 26 background-color: white; 27 border-radius: 4px; 28 font-size: 14px; 29 line-height: 30px; 30 80px; 31 cursor: pointer; 32 } 33 34 table tbody tr.selected td{ 35 background-color: green; 36 color: white; 37 } 38 table tbody tr.edit td{ 39 background-color: red; 40 color: white; 41 } 42 table tbody tr.edit td .editor{ 43 position: relative; 44 left: 0px; 45 top:0px; 46 100%; 47 height: 100%; 48 } 49 </style> 50 </head> 51 <body> 52 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 53 <input class="btn" type="button" value="添加" data-role="add"/> 54 <input class="btn" type="button" value="复制添加" data-role="copyadd"></input> 55 <input class="btn" type="button" value="删除" data-role="del"></input> 56 <table> 57 <thead> 58 <tr> 59 <th>姓名</th> 60 <th>性别</th> 61 <th>年龄</th> 62 </tr> 63 </thead> 64 <tbody> 65 <tr> 66 <td>张三</td> 67 <td>男</td> 68 <td>20</td> 69 </tr> 70 <tr> 71 <td>李四</td> 72 <td>男</td> 73 <td>25</td> 74 </tr> 75 </tbody> 76 </table> 77 78 <script type="text/javascript"> 79 $(function(){ 80 //给添加按钮绑定事件 81 $('[data-role="add"]').click(function(){ 82 //创建一个新的空行 83 var $tr = $('<tr></tr>'); 84 var size = $('table thead tr th').length; 85 for (var i = 0; i < size; i++) { 86 var $td = $('<td></td>'); 87 $tr.append($td); 88 } 89 90 //判断当前是否有选中项,没有就直接添加到末尾 91 var $selectedItems = $('table tbody tr.selected'); 92 if ($selectedItems.length > 0) { 93 $selectedItems.after($tr); 94 } else { 95 $('table tbody').append($tr); 96 } 97 }); 98 99 $('[data-role="copyadd"]').click(function(){ 100 //判断当前是否有选中项，没有就不添加 101 var $selectedItems = $('table tbody tr.selected'); 102 if ($selectedItems.length > 0) { 103 // 复制中的内容 104 var $tr = $selectedItems.clone(); 105 $tr.removeClass('selected').addClass('edit'); 106 $selectedItems.after($tr); 107 108 $tr.children().each(function(index, el) { 109 var $td = $(element); 110 var $editor = $('<input type="text" class="editor">'); 111 $editor.val($td.text()); 112 $td.text(''); 113 $td.append($editor); 114 }); 115 } else { 116 alert('请选中一行内容'); 117 } 118 }); 119 120 $('[data-role="del"]').click(function() { 121 var $selectedItems = $('table tbody tr.selected'); 122 if ($selectedItems.length > 0) { 123 $selectedItems.prev().addClass('selected'); 124 $selectedItems.remove(); 125 } else { 126 // statement 127 } 128 }); 129 130 $('table tbody').on('click','tr td',function(){ 131 $(this).parent().addClass('selected').siblings().removeClass('selected'); 132 }); 133 }); 134 </script> 135 </body> 136 </html>
范例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <<meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .info-box{ 8 border: 2px solid goldenrod; 9 300px; 10 height: 200px; 11 position: absolute; 12 overflow: hidden; 13 } 14 </style> 15 </head> 16 <body> 17 <input type="button" value="显示" data-role="show"></input> 18 <input type="button" value="隐藏" data-role="hide"></input> 19 <input type="button" value="淡入" data-role="fadeIn"></input> 20 <input type="button" value="淡出" data-role="fadeOut"></input> 21 <input type="button" value="展开" data-role="down"></input> 22 <input type="button" value="收起" data-role="up"></input> 23 <input type="button" value="展开收起" data-role="downUp"></input> 24 <input type="button" value="自定义动画" data-role="ani"></input> 25 26 <!-- img标签要效果：display: none; --> 27 <div id="img" style="display: none;"> 28 <img src="images/bg.jpg"> 29 </div> 30 <div class="info-box"> 31 <h3>提示信息</h3> 32 </div> 33 34 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 35 <script type="text/javascript"> 36 $(function(){ 37 $('[data-role="show"]').click(function() { 38 $('#img').show(1000); 39 }); 40 41 $('[data-role="hide"]').click(function() { 42 $('#img').hide(1000); 43 }); 44 45 $('[data-role="fadeIn"]').click(function() { 46 $('#img').fadeIn(1000); 47 }); 48 49 $('[data-role="fadeOut"]').click(function() { 50 $('#img').fadeOut(1000); 51 }); 52 53 $('[data-role="down"]').click(function() { 54 $('#img').slideDown(1000); 55 }); 56 57 $('[data-role="up"]').click(function() { 58 $('#img').slideUp(1000); 59 }); 60 61 62 $('[data-role="downUp"]').click(function() { 63 $('#img').slideDown(1000).slideUp(1000); 64 }); 65 66 67 $('[data-role="ani"]').click(function() { 68 $('#img').animate({ 69 'width' : '-50px', 70 'height' : '-50px', 71 'opacity' : '0.3', 72 'border-radius': '500px' 73 }, 5000,function () { 74 $(this).hide(); 75 }); 76 }); 77 78 79 /* 弹窗 */ 80 //初始化设置提示框的位置 81 //获取文档的宽高 82 var width = $(document).width(); 83 var height = $(document).height(); 84 var outerHeight = $('.info-box').outerHeight(true); 85 var infoHeight = $('.info-box').height(); 86 $('.info-box').css({ 87 'left' : width - $('.info-box').outerWidth(true) -10 + 'px', 88 'top' : height -4 + 'px', 89 'height' : '0px' 90 }); 91 92 $('.info-box').animate({ 93 'height' : infoHeight + 'px', 94 'top' : height - outerHeight + 'px' 95 },2000); 96 97 }); 98 </script> 99 </body> 100 </html>