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