jQuery melaksanakan penambahan dan pemadaman div_jquery secara dinamik-tutorial js-php.cn

jQuery melaksanakan penambahan dan pemadaman div_jquery secara dinamik

WBOY

Lepaskan： 2016-05-16 15:45:35

asal

1415 orang telah melayarinya

Artikel ini terutamanya memberi anda pengenalan ringkas tentang cara menambah dan memadam div secara dinamik dalam elemen, dengan harapan untuk mendapatkan kesan melukis inferens daripada satu contoh.

Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#father
{
 width:150px;
 height:150px;
 background-color:red;
}
#father div
{
 width:50px;
 height:50px;
 background-color:green;
 font-size:12px;
}
</style>
<script type="text/javascript" src="/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#father").prepend("<div>脚本之家欢迎您</div>");
})
</script>
</head>
<body>
<div id="father"></div>
</body>
</html>

Salin selepas log masuk

Kod di atas boleh menambah div pada div induk Seterusnya, kami akan memperkenalkan cara memadam div Hanya kod teras diberikan di bawah:

$(document).ready(function(){
 $("#father").prepend("<div>脚本之家欢迎您</div>");
 $("div").remove("#father div");
})

Salin selepas log masuk

Kod di atas boleh mengalih keluar div yang ditambahkan.

Contoh 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Add And Close Div</title> 
<script type="text/javascript教程" > 
$(document).ready(function(){ 
    bindListener();
})
function addimg(){ 
    $("#mdiv").append('<div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div>'); 
    
    // 为新元素节点添加事件侦听器
    bindListener();
}
// 用来绑定事件(使用unbind避免重复绑定)
function bindListener(){
    $("a[name=rmlink]").unbind().click(function(){
        $(this).parent().remove(); 
    })
}
</script>
 
</head> 
 <body> 
<form action="" method="post" enctype="multipart/form-data"> 
 <label>请选择上传的图片</label> 
  <a href="javascript:addimg()" id="addImg">增加图片</a> 
  <div class="mdiv" id="mdiv"> 
    <div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div> 
   </div> 
  <input type="submit" name="submit" value="上传图片" /> 
 </form> 
 </body> 
 </html>

Salin selepas log masuk

Bacaan berkaitan:

1. Untuk fungsi prepend(), sila rujuk bab kaedah prepend() jQuery.

2. Untuk fungsi remove(), sila rujuk bab kaedah remove() jQuery.