For every onxxx event available, like onclick, onchange, onsubmit, there is a jQuery equivalent. Some other events, like ready and hover, are provided as convenient methods for certain tasks.
Here is CSS and script to put <head> tag.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style type="text/css">
.highlight { border: 5px dotted #eee;}
</style>
<script type="text/javascript">
$(document).ready(function () {
//go here the following example scripts
});
</script>
Add the following to <body> tags.
<a name="top" href="#bottom">Go to bottom</a>
<form id="form">
Form 1
<input type="text" value="XXX"/>
</form>
<form>
Form 2
<input type="text" value="YYY"/>
</form>
<a id="reset" href="#">Reset!</a>
<br />
<a id="clickme" href="http://www.aspmemo.net">Click Me!</a>
<p>This is probably the most common mishap. The remedy is simple--yank! It's most easily done
with two people. One to restrain the bird and the <a href="#"> This is a link. Hover me to
highlight the parent paragraph.</a> other to pull the feather. Use pliers, or a hemostat. Tweezers won't
work on primaries.</p>
<p>This is probably the most common mishap. The remedy is simple--yank! It's most easily done
with two people. One to restrain the bird and the <a href="#"> This is a link. Hover me to
highlight the parent paragraph.</a> other to pull the feather. Use pliers, or a hemostat. Tweezers won't
work on primaries.</p>
<a name="bottom" href="#top">Go to top</a>
One task you often face is to call methods on DOM elements that are not covered by jQuery. Think of a form you would like to reset after you submitted it successfully via AJAX.
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});
});
This code selects the first form element and calls reset() on it. In case you had more than one form, you could also do this:
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
This would select all forms within your document, iterate over them and call reset() for each. Note that in an .each() function, this refers to the actual element. Also note that, since the reset() function belongs to the form element and not to the jQuery object, we cannot simply call $("form").reset() to reset all the forms on the page.
The [expression] syntax is taken from XPath and can be used to filter by attributes. Maybe you want to select all anchors that have a name attribute:
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});
This adds a background color to all anchor elements with a name attribute.
More often than selecting anchors by name, you might need to select anchors by their "href" attribute. This can be a problem as browsers behave quite inconsistently when returning what they think the "href" value is. To match only a part of the value, we can use the contains select "*=" instead of an equals ("="):
$(document).ready(function() {
$("a[href*='aspmemo']").click(function() {
alert('Bye JQuery!');
});
});
For all hovered anchor elements, the parent paragraph is searched and a class "highlight" added and removed. In addition, you can also select parent elements (also known as ancestors for those more familiar with XPath). Maybe you want to highlight the paragraph that is the parent of the link the user hovers. Try this:
$(document).ready(function(){
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});
});
For all hovered anchor elements, the parent paragraph is searched and a class "highlight" added and removed.
Lets shop here. See you.
Useful link :
http://www.w3schools.com/jquery/jquery_ref_events.asp
