Explication détaillée des étapes pour faire fonctionner dynamiquement les divs avec jQuery-js tutoriel-php.cn

Explication détaillée des étapes pour faire fonctionner dynamiquement les divs avec jQuery

php中世界最好的语言

Libérer： 2018-04-23 15:18:47

original

1753 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes pour faire fonctionner dynamiquement des divs avec jQuery. Quelles sont les précautions pour les étapes pour faire fonctionner dynamiquement des divs avec jQuery. Ce qui suit est un cas pratique, voyons. jetez un oeil.

Les exemples de code sont les suivants :

<!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>

Copier après la connexion

Le code ci-dessus peut ajouter un p au p parent. Ensuite, nous présenterons comment supprimer un p. Seul le code principal est donné ci-dessous. :

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

Copier après la connexion

Le code ci-dessus peut supprimer le p.

Exemple 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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Explication détaillée de l'analyse par jQuery des fichiers XML

Méthode d'implémentation de jQuery chargeant dynamiquement les fichiers de script js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!