jquery
- Understand me ( DOM )
- Setup me
- Use me
- Find me
- Animate me
- Rate me
- Plug me
- Handle me
Variables associated with an object are called properties of the object.
Function that can be executed by an object are called methods of the object.
There are three kinds of objects in jQuery/javascript
- User-defined
- Native objects like Array, Math, and Date
- Host objects like window, document, location, history, XMLHttpRequest, setTimeout
Maps make use of conventions like direction, nodes, and scale. In order to read a map, we need to understand these conventions and it’s the same with the DOM.
The most important convention used by the DOM is the representation of a document as a tree.
To add jQuery into our web page, we need to used <script> tag
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// we will add our javascript code here
</script>
</head>
<body>
<!-- we will add our HTML content here -->
</body>
</html>
<html>
<head>
<title>Hello jQuery</title>
<script type=“text/javascript” scr=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function() {
$("a").click(function() {
alert("Hello jQuery!");
});
});
</script>
</head>
<body>
<a href=“#”>Click me</a>
</body>
</html>
The first uses a combination of CSS and XPath selectors passed as a string to the jQuery constructor (eg. $("div > ul a")):
$(‘.class’) $(‘#id’) $('tag') $(‘E[@attr]’) $(‘E[@attr=val]’) $(‘E[@attr*=val]’)$(document).ready(function(){
$("a.first").click(function(){
$("div.stuff").toggle();
});
$("a.second").click(function() {
if($('div.stuff:visible').length){
$('.stuff').hide(1000,"easeInOutExpo");
} else {
$('.stuff').show(1000,"easeInOutExpo");
}
});
$("a.third").click(function(){
$(".stuff").animate({ height: '25px', opacity: '1' }, 'slow');
});
});
$(document).ready(function() {
//generate markup
$("#rating").append("Please rate: ");
for ( var i = 1; i <= 5; i++ ) {
$("#rating").append("<a href='#'>" + i + "</a>");
}
// add markup to container and apply click handlers to anchors
$("#rating a").click(function(e) {
// stop normal link click
e.preventDefault();
// send request
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format and output result
$("#rating").html("Thanks for rating, current average: "
+ $("average", xml).text() + ", number of votes: "
+ $("count", xml).text());
});
});
});
Plugin Naming Find a name for your plugin, lets call our example "foobar". Create a file named jquery.[yourpluginname].js, eg. jquery.foobar.js
Adding a Custom Method Create one or more plugin methods by extending the jQuery object, eg.:
jQuery.fn.foobar = function() {
// do something
};
Which will then be accessible by performing:
$(selector).foobar();
Bind:- attach the event handler to all of the elements that are matched! That is not good.
Live:- attaches the event handler to the root level document along with the associated selector and event information.
Delegate:- behaves in a similar fashion to the .live() method, but instead of attaching the selector/event information to the document, you can choose where it is anchored.