11540 sujets

JavaScript, DOM et API Web HTML5

Ajouter des méthodes à l’objet jQuery

mon test est le suivant :

HTML file :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/F2.js"></script>


<script type="text/javascript">
 $("p").MonTest();
</script> 	
	
</head>


<body> 

	<a href="javascript:;" onclick="affiche('contenu de la variable 1 : var 1 -- depuis file JS ET');">affiche la variable de la fonction 1</a>
	<br />
	<a href="javascript:;" onclick="affiche('contenu de la variable 2 : var 2 -- depuis file JS ET');">affiche la variable de la fonction 2</a>
	<br />
	<a href="javascript:;" onclick="afficheExT();">Appel une fonction externe dans file JS</a>
	<br />
	<INPUT Type="BUTTON" VALUE="Appel une fonction externe dans file JS" onclick="afficheExT();"> 
	<br />
	<br />
	<br />
	
	<h2>balise Hx</h2>
	<p>texte à cacher</p>
	<p>texte visible</p>
	<div></div>
	



</body>




</html>


le fichier JS 


JQuery.fn.MonTest = function() {
   alert('--------------------------------------------');
}


le but est de faire appel à une script jquery logé dans js, depuis le fichier html

j'obtient le msg suivant : jquery is undefined

j'ai fait de multiple test avec des code test sur le net ou sur un livre ! même résultat!

merci beaucoup pour votre aide... je patoge malheureusement

merci
Administrateur
Version un peu corrigée :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>

<title>Il faut toujours un title</title>
	
</head>


<body> 

	<a href="#" id="lien1">affiche la variable de la fonction 1</a>
	<br />
	<a href="#" id="lien2">affiche la variable de la fonction 2</a>
	<br />
	<a href="#" class="hopla">Appel une fonction externe dans file JS</a>
	<br />
	<input type="button" value="Appel une fonction externe dans file JS" class="hopla"> 
	<br />
	<br />
	<br />
	
	<h2>balise Hx</h2>
	<p class="cacher">texte à cacher</p>
	<p>texte visible</p>
	<div></div>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/F2.js"></script>

<script type="text/javascript">
$(document).ready(function() {
 $("hopla").MonTest();
});
</script> 	

</body>

</html>


F2.js :

$.fn.MonTest = function() {
  // $(this) est l'objet sur lequel on applique cette méthode
  $(this).on('click',function() {
   alert($(this));
  });
}


Récap :
- dans la mesure du possible placer les scripts avant </body>
- sinon le sélecteur $("p")" utilisé initialement ne peut connaître par avance les éléments <p> du document qui n'ont pas encore été chargés
- utiliser les sélecteurs (id, class, etc) pour identifier les éléments HTML à relier à des fonctions JS, plutôt que de mettre des attributs onclick partout
- éviter les href="javascript:;" pour <a>
- c'est jQuery avec un petit "j", les noms sont case-sensitive (sinon cela te renvoie effectivement undefined)
Salut,

Juste pour compléter le message de Dew, en général, on fait toujours un return this pour garantir le chainage :

$.fn.MonTest = function() {
  // $(this) est l'objet sur lequel on applique cette méthode
  $(this).on('click',function() {
   alert($(this));
  });
 return $(this);
}


Ainsi, si par la suite tu souhaites faire :

$("hopla").MonTest().show();


Et bien tu pourras Smiley smile
merci pour vos réponse Dew et Super_baloo8

j'ai fais une petite correction

file html : --> j'ai ajouter le symbole point devant le nom de la classe hopla --> .hopla


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Les paramètres d'une fonction</title>

<link rel="stylesheet" href="css/style.css">



</head>


<body> 

	<a href="#" id="lien1">affiche la variable de la fonction 1</a>
	<br />
	<a href="#" id="lien2">affiche la variable de la fonction 2</a>
	<br />
	<a href="http://www.google.fr" target="parent" class="hopla">lien class hopla</a>
	<br />
	<input type="button" value="bouton" class="hopla""> 
	<br />
	<br />
	<br />
	
	<h2>balise Hx</h2>
	<p class="cacher">texte à cacher</p>
	<p>texte visible</p>
	<div></div>

 	



<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/F5.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
 		alert('Cacher le menu 1  ' + $("[#blue].hopla[/#]").MonTest().hide().text());
 		$("[#blue].hopla[/#]").MonTest().show();	
	});
</script>
</body>




</html>


File JS : --> ajouter "alert('msg appelé depuis fichier JS');" pour vérifier la connection avec JS


/* (function($){ */
	$.fn.MonTest = function() {
  		// $(this) est l'objet sur lequel on applique cette méthode
  		$(this).on('click',function() {
   			alert($(this));
  		});
 	
 	/* alert('msg appelé depuis fichier JS'); */
 		return $(this);
	
	
	}
/* })(jQuery) */


File CSS : je constacte avec ou sans la class CSS cela fonctionne



body {	
	font-family:"Times New Roman",Georgia,Serif;
	margin:0 auto;
	padding:0;
	background-color: grey;
	font-size:24px;
	
}


.hopla{}


Donc pour résumer :

1- il avait une erreure d'ecriture dans file HTML
2- la class déclarée n'est qu'un tag entre HTML et JS

merci de vos confirmations

a+
Sujet clos
Aller à