jQuery操作实战：类管理、Tab切换与动画应用-优快云博客

本文链接：https://blog.youkuaiyun.com/wuzj1314/article/details/123972433

17.Class类操作

添加类addClass

移除类removeClass

判断类hasClass 判断一个元素有没有某个类,如果有就返回true,如果没有就返回false

切换类toggleClass 如果元素有某个类就移除这个类, 如果元素没有这类就添加这个类

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>标题</title>

  <style>

    div {

      width: 100px;

      height: 100px;

      margin-top:10px;

    }

    .bgc {

      background-color: green;

    }

    .fontSize30 {

      font-size: 30px;

    }

    .width200 {

      width: 200px;

    }



  </style>



</head>

<body>

  <input type="button" value="添加类" id="addClass"/>

  <input type="button" value="移除类" id="removeClass"/>

  <input type="button" value="判断类" id="hasClass"/>

  <input type="button" value="切换类" id="toggleClass"/>

  <div id="div1" class="bgc ">div1</div>

</body>

</html>



<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //1.添加类 addClass(类名);

    $('#addClass').click(function () {

      //1.1 给id为div1的元素添加类.

      //添加单个类

      //$('#div1').addClass('fontSize30');

      //添加多个类.

      $('#div1').addClass('fontSize30 width200');

    });



    //2.移除类

    $('#removeClass').click(function () {

      //2.1 给id为div1的元素移除类.

      //移除单个类

      //$('#div1').removeClass('fontSize30');

      //移除多个类

      //$('#div1').removeClass('fontSize30 width200');

      //移除所有的类

      $('#div1').removeClass();

    });



    //3.判断类

    $('#hasClass').click(function () {

      //判断一个元素有没有某个类,如果有就返回true,如果没有就返回false.

      console.log($('#div1').hasClass('fontSize30'));

    });



    //4.切换类

    $('#toggleClass').click(function () {

      //如果元素有某个类就移除这个类, 如果元素没有这类就添加这个类.

      $('#div1').toggleClass('fontSize30');

    });

  });

</script>

18.Tab栏切换

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }



        ul {

            list-style: none;

        }



        .wrapper {

            width: 1000px;

            height: 475px;

            margin: 0 auto;

            margin-top: 100px;

        }



        .tab {

            border: 1px solid #ddd;

            border-bottom: 0;

            height: 36px;

            width: 320px;

        }



        .tab li {

            position: relative;

            float: left;

            width: 80px;

            height: 34px;

            line-height: 34px;

            text-align: center;

            cursor: pointer;

            border-top: 4px solid #fff;

        }



        .tab span {

            position: absolute;

            right: 0;

            top: 10px;

            background: #ddd;

            width: 1px;

            height: 14px;

            overflow: hidden;

        }



        .products {

            width: 1002px;

            border: 1px solid #ddd;

            height: 476px;

        }



        .products .main {

            float: left;

            display: none;

        }



        .products .main.selected {

            display: block;

        }



        .tab li.active {

            border-color: red;

            border-bottom: 0;

        }



    </style>

</head>

<body>

<div class="wrapper">

    <ul class="tab">

        <li class="tab-item active">国际大牌<span>◆</span></li>

        <li class="tab-item">国妆名牌<span>◆</span></li>

        <li class="tab-item">清洁用品<span>◆</span></li>

        <li class="tab-item">男士精品</li>

    </ul>

    <div class="products">

        <div class="main selected">

            <a href="###"><img src="images/guojidapai.jpg" alt=""/></a>

        </div>

        <div class="main">

            <a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>

        </div>

        <div class="main">

            <a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>

        </div>

        <div class="main">

            <a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>

        </div>

    </div>

</div>



</body>

</html>



<script src="jquery-1.12.4.js"></script>

<script>

    $(function () {

        //需求:给tab栏的每一个li标签设置鼠标移入事件: 当前li添加active类,其他的兄弟li移除active类.

        //    找到当前tab栏索引一致的div,让他添加 selected类,其他的兄弟div移除selected类.



        //需求1

        $('.tab>.tab-item').mouseenter(function () {

            $(this).addClass('active').siblings('li').removeClass('active');



            //获取鼠标当前移入的这个li标签的索引

            var idx = $(this).index();



            //需求2:

            $('.products>.main').eq(idx).addClass('selected').siblings('div').removeClass('selected');

        });



    });

</script>

19.jQuery动画

jQuery提供三组基本动画，这些动画都是标准的、有规律的的效果，jQuery还提供了自定义动画的功能。

三组基本动画：

显示（show）和隐藏（hide）是一组动画

滑入（slideDown）与滑出（slideUp）与切换（slideToggle），效果与卷帘门类似

淡入（fadeIn）与淡出（fadeOut）与切换（fadeToggle）

19.1显示与隐藏

show（）如果没给参数，就没有动画效果，需要动画效果，就应该给他参数。

参数1：代表执行动画的时长（可以是毫秒数），也可以是代表时长的字符串（fast normal slow）

参数2：代表动画执行完毕后的回调函数

hide同show使用

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>标题</title>

  <style>

    div {

      width: 200px;

      height: 200px;

      background-color: red;

      display: none;

    }

  </style>

</head>

<body>

  <input type="button" value="显示" id="show"/>

  <input type="button" value="隐藏" id="hide"/>

  <input type="button" value="切换" id="toggle"/> <br/><br/>

  <div id="div1"></div>

</body>

</html>



<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //1.显示 show();

    //参数1:代表执行动画的时长 毫秒数,也可以是代表时长的字符串 fast normal  slow

    //参数2:代表动画执行完毕后的回调函数.

    $('#show').click(function () {

      //给id为div1的元素动画显示.

      //1.1 如果show()这个方法没有参数,那就没有动画效果.

      //$('#div1').show();

      //1.2 如果要想要动画效果,就应该给他参数.

      //$('#div1').show(2000);

      $('#div1').show('fast'); //200毫秒

      //$('#div1').show('normal'); //400毫秒

      //$('#div1').show('slow'); //600毫秒

      //$('#div1').show('penglin'); //如果代表时长的单词写错了,就相当于写了一个normal

      //1.3 回调函数.

      // $('#div1').show(2000, function () {

      //   alert('动画执行完毕了...');

      // })

    });



    //2.隐藏

    $('#hide').click(function () {

      //让id为div1的元素动画影藏.

      //$('#div1').hide();//没有参数没有动画效果.

      $('#div1').hide(2000);

      // $('#div1').hide(2000, function () {

      //   alert('隐藏了');

      // });

    });



    //3.切换 toggle

    //如果元素是隐藏状态就动画显示; 如果元素是显示状态就动画隐藏.

    $('#toggle').click(function () {

      $('#div1').toggle(1000);

    });



  });

</script>

19.2滑入与滑出

slideDown(参数1，参数2)

参数1：动画执行时长，没有给参数相当于给了一个默认的时长，normal代表的400毫秒

参数2：动画执行完毕后的回调函数

slideUp滑出同滑入使用

切换 slideToggle() 元素是隐藏状态就滑入; 元素是显示状态就滑出

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>标题</title>

  <style>

    div {

      width: 200px;

      height: 200px;

      background-color: red;

      display: none;

    }

  </style>

</head>

<body>

<input type="button" value="滑入" id="slideDown"/>

<input type="button" value="滑出" id="slideUp"/>

<input type="button" value="切换" id="slideToggle"/><br/><br/>

<div id="div1"></div>

</body>

</html>



<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //1.滑入 slideDown(参数1,参数2);

    //参数1: 动画执行的时长

    //参数2: 动画执行完毕后的回调函数

    $('#slideDown').click(function () {

      //让id为div1的元素滑入.

      //$('#div1').slideDown();//没有给参数相当于给了一个默认的时长,mormal代表的400毫秒

      $('#div1').slideDown(2000);

      // $('#div1').slideDown(2000, function () {

      //   alert('滑入完成了..');

      // });

    });



    //2.滑出 slideUp();

    $('#slideUp').click(function () {

      //让id为div1的元素滑出

      $('#div1').slideUp(2000);

      // $('#div1').slideUp(2000, function () {

      //   alert('滑出做完了...');

      // });

    });



    //3.切换 slideToggle();

    //元素是隐藏状态就滑入; 元素是显示状态就滑出.

    $('#slideToggle').click(function () {

      $('#div1').slideToggle(1000);

    });



  });

</script>



动画版下拉菜单示例：

<!DOCTYPE html>

<html>

<head lang="en">

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

</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);">一级菜单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);">一级菜单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>

    </ul>

</div>

</body>

</html>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //需求: 给一级菜单的li标签设置鼠标移入事件，二级菜单ul显示。

    //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。



    //鼠标移入事件.

    $('.wrap>ul>li').mouseenter(function () {

      //$(this).children('ul').css('display','block');

      //简写

      $(this).children('ul').slideDown(300);

    });



    //鼠标移出事件.

    $('.wrap>ul>li').mouseleave(function () {

      //$(this).find('ul').css('display','none');

      //简写

      $(this).find('ul').slideUp(150);

    });




  });

</script>

19.3 淡入淡出

默认淡入淡出就是透明度从0—1 1---0 如果不想透明度到1，可以自定义透明度到多少。参数1：毫秒数参数2：透明度

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>标题</title>

  <style>

    div {

      width: 200px;

      height: 200px;

      background-color: red;

      display: none;

    }

  </style>

</head>

<body>

  <input type="button" value="淡入" id="fadeIn"/>

  <input type="button" value="淡出" id="fadeOut"/>

  <input type="button" value="切换" id="fadeToggle"/>

  <input type="button" value="淡入到那里" id="fadeTo"/><br/><br/>

  <div id="div1"></div>

</body>

</html>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //1.淡入 fadeIn

    $('#fadeIn').click(function () {

      //让id为div1的这个元素淡入.

      //$('#div1').fadeIn(); //不给参数相当于给了一个默认的动画时长,mormal400毫秒

      $('#div1').fadeIn(1000);

      // $('#div1').fadeIn(2000, function () {

      //   alert('淡入完成了...');

      // });

    });



    //2.淡出 fadeOut

    $('#fadeOut').click(function () {

      //让id为div1的这个元素淡出

      $('#div1').fadeOut(1000);

      // $('#div1').fadeOut(1000, function () {

      //   alert('淡出完成了');

      // });

    });



    //3.切换 fadeToggle

    $('#fadeToggle').click(function () {

      $('#div1').fadeToggle(1000);

    });



    //4.淡入到那里 fadeTo

    $('#fadeTo').click(function () {

      $('#div1').fadeTo(1000,0.5);

    });



  });

</script>

20.自定义动画animate（）

参数1:必选的对象代表的是需要做动画的属性

参数2:可选的代表执行动画的时长.

参数3:可选的代表的是缓动还是匀速 linear(匀速) swing(缓动) 默认不写是缓动

参数4:可选的动画执行完毕后的回调函数.

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>标题</title>

  <style>

    div {

      width: 100px;

      height: 100px;

      background-color: red;

      position: absolute;

      left: 0px;

    }

    #div1 {

      top:50px;

    }

    #div2 {

      top: 170px;

    }

  </style>

</head>

<body>

  <input type="button" value="从左到右800" id="lr800"/>

  <div id="div1"></div>

  <!--<div id="div2"></div>-->

  </body>

</html>



<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //自定义动画 animate();

    //参数1:必选的 对象 代表的是需要做动画的属性

    //参数2:可选的 代表执行动画的时长.

    //参数3:可选的 easing 代表的是缓动还是匀速 linear(匀速)  swing(缓动)   默认不写是缓动

    //参数4:可选的 动画执行完毕后的回调函数.

    $('#lr800').click(function () {



      //让id为div1的元素动画移动到800那个位置.

      // $('#div1').animate({

      //   left:800,

      //   width:200,

      //   height:200,

      //   opacity:0.5

      // },2000,'linear', function () {

      //   alert('动画执行完毕了');

      // });

 

      $('#div1').animate({

        left:800,

        width:200,

        height:200,

        opacity:0.5

      },2000,'linear', function () {

        //既然这里是一个函数,那就可以写任意的代码,那就可以在这里让div1做动画.

        $('#div1').animate({

          left:400,

          width:300,

          height:300,

          top:150,

          opacity:1

        },2000);

      });

      //让id为div2的元素动画移动到800那个位置.

      // $('#div2').animate({

      //   left:800

      // },2000,'swing');

    });



  });

</script>

21.动画队列

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。

停止动画效果：stop(参数1，参数2) 默认为（false,false）

第一个参数：是否清除队列

第二个参数：是否跳转到最终效果

22.动态创建元素

原生js中创建节点:

document.write();

innerHTML;

document.createElement();

jQuery中创建节点： html(); $();

html()方法不给参数，获取到元素的所有内容。

html()方法给参数，会把原来的内容给覆盖，如果设置的内容中包含了标签,是会把标签给解析出来的。

$()也能创建元素,但是创建的元素只存在于内存中,如果要在页面上显示,就要追加append()。

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>标题</title>

  <style>

    #div1{

      width: 300px;

      height: 300px;

      border: 1px solid red;

    }

  </style>

</head>

<body>

<input type="button" value="html()" id="btnHtml1"/>

<input type="button" value="$()" id="btn1"/> <br/><br/>



<div id="div1">

  <p>p1

    <span>span1</span>

  </p>

</div>



</body>

</html>



<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //1.html();

    //设置或者获取内容的.

    $('#btnHtml1').click(function () {

      //1.1 获取内容: html()方法不给参数

      //获取到元素的所有内容.

      // console.log($('#div1').html());



      //1.2 设置内容: html()方法给参数

      //会把原来的内容给覆盖

      //如果设置的内容中包含了标签,是会把标签给解析出来的.

      $('#div1').html('我是设置的内容<a href="https://www.baidu.com">百度一下</a>');

    });



    //2.$();

    //确实能创建元素,但是创建的元素只存在于内存中,如果要在页面上显示,就要追加.

    $('#btn1').click(function () {

      var $link = $('<a href="http://news.baidu.com/">我是新闻</a>');

      //console.log($link);

      //追加节点.

      $('#div1').append($link);

    });



  });

</script>

表格生成案例：

<!DOCTYPE html>

<html>



<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 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 "微软雅黑";

        }



        tbody tr {

            background-color: #f0f0f0;

        }



        tbody tr:hover {

            cursor: pointer;

            background-color: #fafafa;

        }

    </style>



</head>



<body>

<input type="button" value="获取数据" id="j_btnGetData" />

<table>

    <thead>

    <tr>

        <th>标题</th>

        <th>地址</th>

        <th>说明</th>

    </tr>

    </thead>

    <tbody id="j_tbData">



    </tbody>

</table>

</body>



</html>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //模拟从后端拿到的数据

    //data数组的每一个元素其实就是一个tr.

    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: "前端的黄埔军校"

    }];



    //需求:点击获取数据按钮,根据data这个数组里面的数据来给tbody追加tr.

    //data这个数组,有多少个元素,就生成多少个tr, 每一个元素又是一个对象,所以对象有多少个键值对就有多少个td.



    //给获取数据按钮设置一个点击事件.

    $('#j_btnGetData').click(function () {

      //1.html();

      //设置内容,内容中有标签会解析; 会覆盖原来的内容的.

       var list = [];

       for(var i = 0 ; i < data.length; i++){

        //生成tr.

         list.push("<tr>");

         //生成td

         for(var key in data[i]){

           list.push('<td>');

           list.push(data[i][key]);

           list.push('</td>');

         }

         list.push("</tr>");

       }

       //console.log(list.join(""));

       $('#j_tbData').html(list.join(""));



      //2.$();

      // for(var i = 0 ; i < data.length; i++){

      //  var $tr = $("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['url']+"</td><td>"+data[i]['type']+"</td></tr>");

      //   //把创建出来的$tr追加到tbody中去.

      //   $('#j_tbData').append($tr);

      // }

    });

  });

</script>

23.jQuery添加节点的几种方式

（1）父元素.append(子元素) 作为最后一个子元素添加

（2）父元素.prepend(子元素) 作为第一个子元素添加

（3）元素A.before(元素B) 把元素B插入到元素A的前面,作为兄弟元素添加

（4）元素A.after(元素B) 把元素B插入到元素A的后面,作为兄弟元素添加

（5）子元素.appendTo(父元素) 把子元素作为父元素的最后一个子元素添加

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>标题</title>



</head>

<body>

  <input type="button" value="append" id="btnAppend"/>

  <input type="button" value="prepend" id="btnPrepend"/>

  <input type="button" value="after" id="btnAfter"/>

  <input type="button" value="before" id="btnBefore"/>

  <input type="button" value="appendTo" id="btnAppendTo"/>

  <ul id="ul1">

    <li>我是第1个li标签</li>

    <li>我是第2个li标签</li>

    <li id="li3">我是第3个li标签</li>

    <li>我是第4个li标签</li>

    <li>我是第5个li标签</li>

  </ul>



  <ul id="ul2">

    <li>我是第1个li标签2</li>

    <li>我是第2个li标签2</li>

    <li id="li32">我是第3个li标签2</li>

    <li>我是第4个li标签2</li>

    <li>我是第5个li标签2</li>

  </ul>

</body>

</html>

<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //1.append()

    //父元素.append(子元素); //作为最后一个子元素添加.

    $('#btnAppend').click(function () {

      //1.1 新创建一个li标签,添加到ul1中的去.

      // var $liNew = $("<li>我是新创建的li标签</li>");

      // $('#ul1').append($liNew);



      //1.2 把ul1中已经存在的li标签添加到ul中去. 剪切后作为最后一个子元素添加.

      // var $li3 = $('#li3');

      // $('#ul1').append($li3);



      //1.3 把ul2中已经存在的li标签添加到ul1中去.剪切后作为最后一个子元素添加.

      var $li32 = $('#li32');

      $('#ul1').append($li32);

    });



    //2.prepend();

    //父元素.prepend(子元素); //作为第一个子元素添加.

    $('#btnPrepend').click(function () {

      //2.1 新建一个li标签,添加到ul1中去.

      // var $liNew = $("<li>我是新创建的li标签</li>");

      // $('#ul1').prepend($liNew);



      //2.1 把ul1中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.

      // var $li3 = $('#li3');

      // $('#ul1').prepend($li3);



      //2.2 把ul2中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.

      var $li32 = $('#li32');

      $('#ul1').prepend($li32);

    });



    //3.before()

    //元素A.before(元素B); //把元素B插入到元素A的前面,作为兄弟元素添加

    $('#btnBefore').click(function () {

      //新建一个div

      var $divNew = $('<div>我是新建的div</div>');

      $('#ul1').before($divNew);

    });



    //4.after();

    //元素A.after(元素B); //把元素B插入到元素A的后面,作为兄弟元素添加.

    $('#btnAfter').click(function () {

      //新建一个div

      var $divNew = $('<div>我是新建的div</div>');

      $('#ul1').after($divNew);

    });



    //5.appendTo();

    //子元素.appendTo(父元素); //把子元素作为父元素的最后一个子元素添加.

    $('#btnAppendTo').click(function () {

      //5.1 新建一个li标签,添加到ul1中去.

      var $liNew = $("<li>我是新创建的li标签</li>");

      $liNew.appendTo($('#ul1'));



    });



  });

</script>

24.清空节点empty()与移除节点remove()

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>标题</title>

</head>

<body>

<input type="button" value="按钮" id="btn"/>

<ul id="ul1">

  <li>我是第1个li标签</li>

  <li>我是第2个li标签</li>

  <li id="li3">我是第3个li标签</li>

  <li>我是第4个li标签</li>

  <li>我是第5个li标签</li>

</ul>

</body>

</html>

<script src="jquery-1.12.4.js"></script>

<script>

  //清空元素: empty();

  //移除节点: remove();

  $(function () {

    //给按钮设置点击事件.

    $('#btn').click(function () {

      //1.清空ul.

      //$('#ul1').html(""); //不推荐使用,有可能会造成内存泄漏,不安全.

      // $('#ul1').empty();//推荐使用.

      //2.移除某一个元素.

      // $('#li3').remove(); //"自杀"

      //3.移除ul.但是只能获取li3这个标签.

      $('#li3').parent().remove();

    });



  });

</script>



25.克隆节点clone()
jQuery中克隆节点:clone()

    只存在与内存中,如果要在页面上显示,就应该追加到页面上.

    clone()方法参数不管是true还是false,都是会克隆到后代节点的.

    clone()方法参数是true表示会把事件一起克隆到. 参数如果是false就不会克隆事件. 不给参数默认是false

  <!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>标题</title>

  <style>

    #div1 {

      width: 400px;

      height: 200px;

      border: 1px solid red;

    }



    #div2 {

      width: 400px;

      height: 200px;

      border: 1px solid red;

    }

  </style>

</head>

<body>

  <input type="button" value="克隆" id="clone"/>

  <div id="div1">

    <span>span1</span>

    <p>p1

      <b>b1</b>

    </p>

  </div>

  <br/><br/>

</body>

</html>



<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {

    //给id为div1的这个元素添加一个点击事件.

    $('#div1').click(function () {

      alert('哈哈,我被点击了...');

    });



    //jQuery中克隆节点:clone()

    //只存在与内存中,如果要在页面上显示,就应该追加到页面上.

    //clone()方法参数不管是true还是false,都是会克隆到后代节点的.

    //clone()方法参数是true表示会把事件一起克隆到. 参数如果是false就不会克隆事件. 不给参数默认是false.

    //给按钮设置点击事件

    $('#clone').click(function () {

      var $cloneDiv = $('#div1').clone(true);

      //修改克隆节点的id

      $cloneDiv.attr('id','div2');

      //console.log($cloneDiv);

      //把克隆的节点追加到body中.

      $('body').append($cloneDiv);

    });



  });

</script>

26.获取或设置表单内容

原生js是通过value属性来获取或者设置表单元素的值。jQuery中获取表单元素的值val();

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>标题</title>



</head>

<body>

  <input type="button" value="按钮" id="btn"/> <br/><br/>

  <input type="text" id="txt" value="请输入账号"/>

</body>

</html>



<script src="jquery-1.12.4.js"></script>

<script>

  $(function () {



    //给按钮设置点击事件

    $('#btn').click(function () {

      //1.val()方法,不给参数就是获取

      //console.log($('#txt').val());



      //2.val()方法,给参数就是设置

      $('#txt').val('我是设置的值');

    });



  });

</script>