WWW.lllT.neT

提升方式:1、应用“父节点.append(子连接点)”句子;2、应用“父节点.prepend(子连接点)”句子;3、应用“子连接点.appendTo(父节点)”句子;4、应用“$(子连接点).prependTo(父节点)”句子。

本实例教程实际操作自然环境:windows7系统软件、jquery1.10.2版本号、Dell G3电脑上。

在jquery中,要想在父节点中提升子连接点,有很多种方式:

  • append():向选定原素内部结构的“结尾处”插进具体内容。

  • appendTo():向选定原素内部结构的“结尾处”插进具体内容。

  • prepend():向选定原素内部结构的“逐渐处”插进具体内容。

  • prependTo():向选定原素内部结构的“逐渐处”插进具体内容。

实例:

  <script>
    $(function () {
      //1.append();
      //父节点.append(子连接点); //做为最后一个子原素加上.
      $('#btnAppend').click(function () {
        //1.1 创好一个li标签,增加到ul1中
        // var $newLi = $('<li>我是创好的li标签</li>');
        // $('#ul1').append($newLi);

        //1.2 获得ul1中的某一个li标签,增加到ul1中.
        //剪截回来做为最后一个子原素加上.
        // 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 $newLi = $('<li>我是创好的li标签</li>');
        // $('#ul1').prepend($newLi);

        //2.2 获得ul1中的某一个li标签,增加到ul1中.
        //剪截回来做为最后一个子原素加上.
        // var $li3 = $('#li3');
        // $('#ul1').prepend($li3);

        //2.3 获得ul2中的某一个li标签,增加到ul1中.
        //剪截回来做为最后一个子原素加上.
         var $li32 = $('#li32');
         $('#ul1').prepend($li32);
      });


      //3.appendTo();
      //子连接点.appendTo(父节点); //做为最后一个子原素加上.
      $('#btnAppendTo').click(function () {
        //1.1 创好一个li标签,增加到ul1中
        var $newLi = $('<li>我是创好的li标签</li>');
        $newLi.appendTo($('#ul1'));
      });
      //4.prependTo()
      //子连接点.prependTo(父节点); //做为第一个子原素加上.
      $('#btnPrependTo').click(function () {
        //1.1 创好一个li标签,增加到ul1中
        var $newLi = $('<li>我是创好的li标签</li>');
        $newLi.prependTo($('#ul1'));
      });


    });
  </script>
  <body>
<input type="button" value="append" id="btnAppend"/>
<input type="button" value="prepend" id="btnPrepend"/>
<input type="button" value="appendTo" id="btnAppendTo"/>
<input type="button" value="prependTo" id="btnPrependTo"/>
<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>

1.gif

有关实例教程建议:jQuery教程视频

以上便是jquery中如何提升子连接点的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:jquery中如何提升子连接点发布于2021-12-14 21:09:01