Detaillierte Erläuterung der Schritte zum dynamischen Betrieb von Divs mit jQuery-js-Tutorial-php.cn

Detaillierte Erläuterung der Schritte zum dynamischen Betrieb von Divs mit jQuery

php中世界最好的语言

Freigeben： 2018-04-23 15:18:47

Original

1773 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zum dynamischen Betreiben von Divs mit jQuery ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Schritte zum dynamischen Betreiben von Divs mit jQuery? Schauen Sie mal rein.

Codebeispiele sind wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#father
{
 width:150px;
 height:150px;
 background-color:red;
}
#father p
{
 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("<p>脚本之家欢迎您</p>");
})
</script>
</head>
<body>
<p id="father"></p>
</body>
</html>

Nach dem Login kopieren

Der obige Code kann ein p zum übergeordneten p hinzufügen. Nachfolgend wird nur der Kerncode angegeben :

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

Nach dem Login kopieren

Der obige Code kann das hinzugefügte p entfernen.

Beispiel 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 p</title> 
<script type="text/javascript教程" > 
$(document).ready(function(){ 
    bindListener();
})
function addimg(){ 
    $("#mp").append('<p class="iptp" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></p>'); 
    
    // 为新元素节点添加事件侦听器
    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> 
  <p class="mp" id="mp"> 
    <p class="iptp" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></p> 
   </p> 
  <input type="submit" name="submit" value="上传图片" /> 
 </form> 
 </body> 
 </html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Detaillierte Erläuterung der jQuery-Analyse von XML-Dateien

Implementierungsmethode für das dynamische Laden von js-Skriptdateien durch jQuery

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum dynamischen Betrieb von Divs mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!