In jquery (function ($) {...}) (JQuery)

Source: Internet
Author: User

Today I saw someone write a jquery code about the horizontal scrolling of the screen found him with (function ($) {...}) (jQuery) In this way, as a beginner we are usually most accustomed to using $ (function () {}); this style, so I looked at the other brick to explain the way, very detailed and good understanding of the record as follows:

When you first See "(Function ($) {...}) (jQuery) "How do you feel?" Hehe, I was still unable to stop from the bottom of my heart scold A-------------------what unwinnable. Time passes, for now extremely relies on jquery of me, self-perceived at the moment is so ignorant, sneak in today, explain what "(function ($) {...}) (jQuery) "How to understand:

Code One:

123456789101112 <title> code One </title> <meta http-equiv= " Content-type " content= " text/html; Charset=utf-8 " > <script type= "Text/javascript" >      (function (name) { alert (name); &NBSP;&NBSP;&NBSP;&NBSP; "Gaohuanjie" </SCRIPT>

Description: Running the above code in the browser will bring up a dialog box with the contents of Gaohuanjie.

JavaScript script executed in the above code and "(function ($) {...}) (JQuery) "is the same, that is to say" (function ($) {...}) (jQuery) "function is automatically executed, then how to understand" (function ($) {...}) (JQuery) "? (function ($) {...}) (JQuery) "Actually represents an anonymous function that is already in the calling State: function ($) {...} is a defined anonymous function with a parameter of $ (the argument is declared as $ to not conflict with other libraries), and in order to invoke the function, parentheses and arguments are appended to the anonymous function (jquery here), but because of the precedence of the operator, the function itself also needs parentheses, so it adds parentheses to the anonymous function.
To dispel doubts:

One, I run the following code why error--jquery is not defined:

123456789101112 <title> code two </title> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 " > <script type= "Text/javascript" >      (function ($) {           alert ($); &NBSP;&NBSP;&NBSP;&NBSP; </SCRIPT>
Well, the browser in the parsing of the above JS script does have a problem, if you add double quotation marks for jquery, again using the browser to run the above script will not be wrong, why not add error, hehe, actually here jquery is a variable, if the above code to introduce the jquery library, Running the above code again using the browser will not have the problem:
12345678910111213 <title>代码三</title><script type="text/javascript" src="./jquery-1.6.2.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript">    (function($){        alert($);    })(jQuery);</script>

There is no error after the introduction of the jquery library because jquery variables are defined in the jquery library.

Two, and $ (function () {}) compared to (function ($) {...}) Is the execution time of the Web page Dom loaded?

No, such as the following example:

123456789101112 <title>代码四</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript">    (function(){        alert(document.getElementById("name").value);    })();</script> <input id="name" name="name" value="GaoHuanjie" type="hidden">
The above example will be error when running in the browser, the reason (function () {...}) The execution time of the function is not executed until the DOM is loaded, but as the page executes from top to bottom, if you change it to the following code, running the script again using the browser does not occur:
12345678910111213             <title>代码五</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">                <input id="name" name="name" value="GaoHuanjie" type="hidden">        <script type="text/javascript">            (function(){                alert(document.getElementById("name").value);            })();        </script>   

Sentence: "$ (function () {});" The code used to hold the DOM object, the DOM object already exists when executing the code; "(function () {}) (jQuery);" The code used to store the development plug-in, and the DOM does not necessarily exist when executing code.

In jquery (function ($) {...}) (JQuery)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.