Warning: main(./common/html/menutop.html) [function.main]: failed to open stream: No such file or directory in /mnt/129/sdb/8/f/gadille/doc/webLanguage/jscript/jquery.php on line 20

Warning: main() [function.include]: Failed opening './common/html/menutop.html' for inclusion (include_path='/mnt/129/sdb/8/f/gadille/include:.:/usr/php4/lib/php') in /mnt/129/sdb/8/f/gadille/doc/webLanguage/jscript/jquery.php on line 20
javaScript

http://www.w3schools.com/jquery/default.asp

Intro


jquery est une suite de fonction jscript que l'on peut intégrer a c'est page web
en copiant le fichier localement ou en prenant celui d'un site web comme google
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<script type="text/javascript" src="http://gadille.free.fr/common/jquery.js">

select


$(this).hide() //cache l'element courant
$("#testId").hide() //id testID
$("p").hide() // tous les p
$(".testClass").hide() //class testClass
code exemple:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();			//hide all p balise
    $(this).hide();			//hide bt
    $("#testId").hide();  	//hide id nomé testId
    $(".testClass").hide() //hide class testClass
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div id="testId">id a cacher</div><br>
<div id="testId2">id pas à cacher</div><br>
<div class="testClass">classa cacher</div><br>
<div class="testClass2">class pas à cacher</div><br>
<button>Click me</button>
</body>
</html>
$(this)curent html
$("p")all p element
$("p.intro")element p avec class intro
$("p#intro")element p avec id intro
$("p#intro:first")premier element p avec id intro
$(".intro")alal elemetn type with class intro
$("ul li:first")le 1er li de chaque ul
$("[href$='.jpg']")tous les elemetn href finisant par .jpg
$("div#intro .head")tous les element head dans un div avec id intro

css selector

$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
CSS Properties Description
$(selector).css(name) Get the style property value of the first matched element
$(selector).css(name,value) Set the value of one style property for matched elements
$(selector).css({properties}) Set multiple style properties for matched elements
$(selector).height(value) Set the height of matched elements
$(selector).width(value) Set the width of matched elements

event

Event Method Description
$(document).ready(function)   Binds a function to the ready event of a document
(when the document is finished loading)
$(selector).click(function) Triggers, or binds a function to the click event of selected elements
$(selector).dblclick(function) Triggers, or binds a function to the double click event of selected elements
$(selector).focus(function) Triggers, or binds a function to the focus event of selected elements
$(selector).mouseover(function) Triggers, or binds a function to the mouseover event of selected elements

effect

>html<
>head<
>script type="text/javascript" src="jquery.js"<>/script<
>script type="text/javascript"<
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
>/script<
>/head<
>body<
>p<If you click on the "Hide" button, I will disappear.>/p<
>button id="hide"<Hide>/button<
>button id="show"<Show>/button<
>/body<
>/html<

autre fonction
$(".panel").slideToggle("slow");
$("div").fadeTo("slow",0.25);

animate avec n etape
$("div").animate({height:300},"slow");
$("div").animate({width:300},"1000");

"slow", "fast", "normal", ou milliseconds


$(selector).toggle(speed,callback);
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
$(selector).animate({params},[duration],[easing],[callback])

callback et le nom d'un function que l'on peut appeler apres execution
$("p").hide(1000,function(){
  alert("The paragraph is now hidden");
});

change html

Function Description
$(selector).html(content) Changes the (inner) HTML of selected elements
$(selector).append(content) Appends content to the (inner) HTML of selected elements
$(selector).after(content) Adds HTML after selected elements

$("p").after("W3Schools.");//rajoute w3 .. apres lelement selectioné ici le paragraphe

Ajax

exemple ici ici
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").load('test.txt');
  });
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>

$(selector).load(url,data,callback) Load remote data into selected elements

mail pour des questions ou de l'aide