Solved

understanding jquery

Posted on 2011-09-27
10
406 Views
Last Modified: 2012-06-21
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
Comment
Question by:Nura111
  • 5
  • 3
  • 2
10 Comments
 
LVL 41

Expert Comment

by:guru_sami
ID: 36712285
0
 

Author Comment

by:Nura111
ID: 36712385
I already read a few tutorial and still didnt understand it I was hoping for an explanation from the experts..
0
 
LVL 8

Accepted Solution

by:
crysallus earned 500 total points
ID: 36713244
$(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
 

Author Comment

by:Nura111
ID: 36713290
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
 
LVL 8

Expert Comment

by:crysallus
ID: 36713298
Yes. Good point. As far as I understand, event driven jQuery code doesn't need to wrapped in the ready method.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:Nura111
ID: 36713301
".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
 
LVL 8

Expert Comment

by:crysallus
ID: 36713343
Yes.
0
 

Author Comment

by:Nura111
ID: 36713345
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
 
LVL 41

Expert Comment

by:guru_sami
ID: 36713390
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
 

Author Comment

by:Nura111
ID: 36713399
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

This article provides a case study on how our local youth baseball league deployed a new website, including the platform selection, implementation and benefits to the league.
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now