cari

Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan penambahan dan pemadaman div_jquery secara dinamik

jQuery melaksanakan penambahan dan pemadaman div_jquery secara dinamik

WBOY
WBOYasal
2016-05-16 15:45:351430semak imbas

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>

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");
})

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>

Bacaan berkaitan:

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

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Perbandingan penggunaan kaedah panggilan dan gunakan kaedah dalam pengetahuan JavaScript_BasicArtikel seterusnya：Perbandingan penggunaan kaedah panggilan dan gunakan kaedah dalam pengetahuan JavaScript_Basic

Artikel berkaitan

Lihat lagi