• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 419
  • Last Modified:

understanding jquery

Im having a hard time understanding what happen "behind the scenes" of the jquery code
I attched a simple jquery code .
what happening when creating the function()  when do I need to create it I understand that $ is actully built a new query object and that  and when you call a function .functionName its a method that dec declared in jquery class/object

Thank you!
$(document).ready(function(){
   $("a").click(function(event){
     alert("As you can see, the link no longer took you to jquery.com");
     event.preventDefault();
   });
 });

Open in new window

0
Nura111
Asked:
Nura111
  • 5
  • 3
  • 2
1 Solution
 
guru_samiCommented:
0
 
Nura111Author Commented:
I already read a few tutorial and still didnt understand it I was hoping for an explanation from the experts..
0
 
crysallusCommented:
$(document)

Surrounding the jQuery $ variable around an element creates an instance of jQuery containing whatever element is in the brackets, as you've already said. $(...) is essentially a method to create an instance of jQuery. In this case, it contains the standard DOM object document.

.ready(...)

Just about all jQuery code should only run once the document has loaded, and the DOM is filled with all the objects in the document. When that occurs, this jQuery ready event is triggered. So standard practice is to wrap all jQuery code within a function added to the ready event to ensure that it only executes once the DOM is filled.

$("a")

Within that function to be called when the document is ready, is this. Again, using $, a jQuery object is created with the selctor "a". This means that jQuery will scan the entire DOM looking for any elements that match that selector, which is any anchor tag in this case, and store them within that jQuery object. These DOM elements can be retrieved much like an array (not sure if they are stored as such...). So:

var $a = $("a");
// alert's the number of a elements found
alert($a.length);
// alert the DOM id property of the first a tag
alert($a[0].id);

though normally, the selected DOM elements only need to be accessed using jQuery methods. But it's nice to understand how that connects with the DOM that you might be familiar with.

.click(function(event){...});

Having created a jQuery object containing all anchor tags, the click method is called on them. The click method is a shorthand event adding method that wraps the jQuery bind method. There are several other shorthand event functions, hover etc. Internally they all call the bind method which attaches a function to a particular event. The bind method can also be used directly if you wish, to achieve the same effect. eg.

.bind('click', function(event){...});

will do the same thing.

alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();

So, having bound a click event to all the anchor tags, the function attached to that event is passed the event object, which is a jQuery object containing useful information pertaining to that event. If you don't need it, this argument can be ommitted, but in this instance it is required to call event.preventDefault(). This is simply a catch-all method that will prevent any default browser behvaiour for the current event. In this case, being an anchor tag, the default behaviour is obviously to redirect to the link. Calling event.preventDefault prevents this from happening.
0
Configuration Guide and Best Practices

Read the guide to learn how to orchestrate Data ONTAP, create application-consistent backups and enable fast recovery from NetApp storage snapshots. Version 9.5 also contains performance and scalability enhancements to meet the needs of the largest enterprise environments.

 
Nura111Author Commented:
what about when its a function that fired up does it still need to be wrapped in $(document).ready(function())

because if its fired up by a user click for exmple its sure that the document is ready right?
0
 
crysallusCommented:
Yes. Good point. As far as I understand, event driven jQuery code doesn't need to wrapped in the ready method.
0
 
Nura111Author Commented:
".click(function(event){...});

Having created a jQuery object containing all anchor tags, the click method is called on them. The click method is a shorthand event adding method that wraps the jQuery bind method. There are several other shorthand event functions, hover etc. Internally they all call the bind method which attaches a function to a particular event. The bind method can also be used directly if you wish, to achieve the same effect. eg.

.bind('click', function(event){...});

will do the same thing."



so for exmple here when creating a function() in the click() its binding the click with this function meaning that when a click will happen on the element (in this case a )  this function will fired up as well?
0
 
crysallusCommented:
Yes.
0
 
Nura111Author Commented:
thank you for the nice explanation

Can you also take a look on the next question about jquery:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27344572.html
0
 
guru_samiCommented:
To clarify your question in #36713290
When you bind an element to some event, you should place it in the $(document).ready(function(){});
i.e. $("#somebutton").click(function(event){...});
should go inside document.ready. Why because you are doing $("#somebutton") i.e. finding element with id #somebutton. You want to make sure that the element is available when the binding statement is executed.

But if you have a stand alone function like: function Add(x,y){} it does not need to be in document.ready..
0
 
Nura111Author Commented:
Yes I understood that Thank you.
feel free as well to look in http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27344572.html

about jquery..
0

Featured Post

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

  • 5
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now