JavaScript / jQuery syntax

Question

Hi guys I'm wondering why the $ sign needs to be before the function for the proram to work. I console.log($) and as I thought it is the jQuery selector object. But don't understand why it needs to be there. Please help!!

$(function(){
            console.log($, 'testing')
            // when the client clicks SEND
            $('#datasend').click( function() {
                var message = $('#data').val();
                $('#data').val('');
                // tell server to execute 'sendchat' and send along one parameter
                socket.emit('sendchat', message);
            });

            // when the client hits ENTER on their keyboard
            $('#data').keypress(function(e) {
                if(e.which == 13) {
                    $(this).blur();
                    $('#datasend').focus().click();
                }
            });
        });

`$(function(...){ ... })` is equivalent to `$(document).ready(function(...){ ... })`... — Andrew Li, Dec 10 '16 at 06:48
`$` isn't just for selecting DOM elements, it has many functions depending on what you pass to it. It's a jQuery object constructor though it has other uses. — Andrew Li, Dec 10 '16 at 06:54
check this [link](http://stackoverflow.com/a/10787372/4053389) — abpatil, Dec 10 '16 at 06:58

Sandeep · Answer 1 · 2016-12-10T07:10:11.900

0

Javascript variable naming rules allow "$" sign to be used as a valid variable name. That's why, it acts as a shorthand, and jQuery uses it.

Example:

var a = 10;
console.log(a);

I can also write

var $ = 10;
console.log($);

what jQuery does is:

jQuery = {};
$ = jQuery;

so same jQuery object can be accessed via "$" variable as well. Which acts as a shorthand. If there are two libraries, which tries to use global "$" as their Object, it gives a conflict.

Now the function we pass inside $(), is nothing but a callback. jQuery wants to know, what code do you want to run on document ready. So, it accepts a function as an argument.

var $ = function( data){
    if(typeof data == "function" ){
        // jquery registers this callback to ready event automatically
    } else {
       // uses the selector, and returns the elements
    }
}

// so this will be registered to ready event
$( function(){
    alert('hi');
});    

// and this will give us the jQuery object with DOM elements
$( "body" );

Now, if we pass a selector to jQuery("selector"), jQuery executes that right away.

But if a function is passed as an argument, jQuery registers that function to the ready event automatically. Hence, this callback is executed at ready event.

edited Dec 10 '16 at 07:10

answered Dec 10 '16 at 06:54

Sandeep

88
8

This isn't what the question is asking. It's asking why the `$(function(){...})` is there - what it's function is – Andrew Li Dec 10 '16 at 06:56
@AndrewLi please don't panic. There is always some possibility to edit the answer. – Sandeep Dec 10 '16 at 07:03
Well, your edit doesn't make much sense to me. That code block is quite confusing and contradictory. You said it was a callback, run on document ready. Please show that... – Andrew Li Dec 10 '16 at 07:05
@AndrewLi let's hope it makes more sense now. – Sandeep Dec 10 '16 at 07:13
Your example doesn't run on document ready. I think you're overcomplicating this. jQuery does different things based on the type of arguments passed to the 'constructor', but the example isn't needed (it actively harms the explanation IMO) – Andrew Li Dec 10 '16 at 07:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130273/discussion-between-sandeep-and-andrew-li). – Sandeep Dec 10 '16 at 07:17

JavaScript / jQuery syntax

1 Answers1