• 129136

    文章

  • 809

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

jquery 添加和删除节点

服了这份高薪指南,涨多少你说了算>>

本文转载于:专业的前端网站jquery 添加和删除节点

// 增加一个三和一节点
function addPanel() {
  // var newPanel = $('.my-panel').clone(true)
  var newPanel = $(".triple-panel-container>.my-panel").eq(0).clone(true)
  $(".triple-panel-container").append(newPanel)
}

// 删除一个三合一节点
function deletePanel() {
  let num = $('.triple-panel-container').children('.my-panel').length;
  if(num > 1)
    var last = $(".triple-panel-container>.my-panel").eq(-1).remove()
}

// 上传图片并生产缩略图
function makeTinyPic(obj) {
  console.log('get in...')
    var newsrc=getObjectURL(obj.files[0]);
    document.getElementById('tinyPic').src=newsrc;
}

//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null ;
    // 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

 

增加、删除子节点

<!-- 新增添加和删除节点按钮 -->
      <div class="triple-panel-container">
        <div class="panel panel-primary my-panel">
           xxx
        </div><!-- end of panel -->
      </div><!-- end of triple-panel -->

 

图片预览

<img id="tinyPic" width="60" height="60" src="">
<input type="file" required="required" onchange="makeTinyPic(this)"/>

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客