jQuery（二）

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             width: 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             width: 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             width: 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             width: 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>

 

posted @ 2016-06-04 18:56  Ivy_Xu  阅读(242)  评论(0)  编辑  收藏  举报