文档章节

jquery 添加和删除节点

前端老手
 前端老手
发布于 10/13 23:55
字数 298
阅读 12
收藏 0

本文转载于:专业的前端网站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

本文转载自:https://www.mk2048.com/blog/blog.php?id=hiajab2c21ib

上一篇: 武者Vue
前端老手
粉丝 10
博文 703
码字总数 0
作品 0
卢湾
技术主管
私信 提问
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
2018/07/20
13
0
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
2018/09/08
0
0
jQuery知识总结之DOM操作

本篇文章主要总结一下jQuery中DOM节点的创建、插入、删除与替换以及jQuery中丰富的遍历节点的方法。 jQueryDOM操作之节点创建与属性的处理 JavaScript原生接口创建节点,在处理上是非常复杂与...

03/23
0
0
JQuery 使用技巧

jQuery技巧大放送 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接...

晨曦之光
2012/03/09
160
0
前端学习(四)--jQuery

一、入门 1、jquery 就是一个js的框架; 2、好处就是能让我们的js代码写的更少; 3、基本使用:引入script,后面使用即可; 4、关于版本选择:1.* 版本的兼容性比较好,大公司用的多; 5、关...

stanwuc
2018/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

BigDecimal 去后面无用的0的方法

BigDecimal a=new BigDecimal("0.1000"); System.out.println(a.stripTrailingZeros().toPlainString());...

xiaodong16
今天
5
0
JAVA--高级基础开发

[集合版双色球] 十二、双色球规则:双色球每注投注号码由6个红色球号码和1个蓝色球号码组成。红色球号码从1—33中选择;蓝色球号码从1—16中选择;请随机生成一注双色球号码。(要求同色号码...

李文杰-yaya
昨天
20
0
聊聊rocketmq broker的CONSUMER_SEND_MSG_BACK

序 本文主要研究一下rocketmq broker的CONSUMER_SEND_MSG_BACK CONSUMER_SEND_MSG_BACK rocketmq/common/src/main/java/org/apache/rocketmq/common/protocol/RequestCode.java public class......

go4it
昨天
4
0
API常见接口(下)

system类 StringBuilder和StringBuffer 包装类 1.System类 (java.lang包中) 提供了大量的静态方法,可以获取与系统相关的信息或系统级操作。 常用方法: public static long currentTimeMi...

Firefly-
昨天
4
0
MySQL系列:一句SQL,MySQL是怎么工作的?

对于MySQL而言,其实分为客户端与服务端。 服务端,就是MySQL应用,当我们使用net start mysql命令启动的服务,其实就是启动了MySQL的服务端。 客户端,负责发送请求到服务端并从服务端获取数...

杨小格子
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部