Home > Developer > Web Develop
Today's web development is often inseparable from the use of Jquery. Jquery has won the favor of software R & D peers with its concise usage and good browser compatibility. As a member, it is no exception, although Jquery was rejected at the beginning, today I will talk about $ and $ in Jquery. fn's understanding and understanding are not correct:
1. What is $?
A: jquery is another form of expression;
2. See the following example:
Example 01:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> $ and $. fn -- demo 01 </title>
<Script type = "text/javascript" src = "./jquery-1.6.2.js"> </script>
<Script type = "text/javascript">
$. Test = function (a, B ){
Return a + B;
};
Alert ($. test (4, 4 ));
</Script>
</Head>
<Body>
</Body>
</Html>
Example 02:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> $ and $. fn -- demo 02 </title>
<Script type = "text/javascript" src = "./jquery-1.6.2.js"> </script>
<Script type = "text/javascript">
$. Extend ({
Test: function (a, B ){
Return a + B;
}
});
Alert ($. test (4, 4 ));
</Script>
</Head>
<Body>
</Body>
</Html>
In the above two examples, what are the differences and similarities between the yellow background codes?
A: apart from the same functions, the biggest similarity lies in the same method of calling functions (or methods). The biggest difference between the two examples above is that the method of declaring and creating the test method is different.
3. See the following example:
Example 03:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> $ and $. fn -- demo 03 </title>
<Script type = "text/javascript" src = "./jquery-1.6.2.js"> </script>
<Script type = "text/javascript">
$. Fn. test = function (){
Return $ (this). val ();
};
$ (Function (){
Alert ($ ("# name"). test ());
});
</Script>
</Head>
<Body>
<Input type = "hidden" id = "name" name = "name" value = "Gao huanjie"/>
</Body>
</Html>
Example 04:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> $ and $. fn-demo 04 </title>
<Script type = "text/javascript" src = "./jquery-1.6.2.js"> </script>
<Script type = "text/javascript">
$. Fn. extend ({
Test: function (){
Return $ (this). val ();
}
});
$ (Function (){
Alert ($ ("# name"). test ());
});
</Script>
</Head>
<Body>
<Input type = "hidden" id = "name" name = "name" value = "Gao huanjie"/>
</Body>
</Html>
In the above two examples, what are the differences and similarities between the green background codes?
A: apart from the same functions, the biggest similarity lies in the same method of calling functions (or methods). The biggest difference between the two examples above is that the method of declaring and creating the test method is different.
4. What is the difference between $ and $. fn in Jquery?
A: Before answering this question, you need to understand the fact that the Jquery method can be expanded. The above four examples are extensions of the Jquery method, from the method of calling the Declaration to create a method, there are two types: one class is called directly by the $ operator, and the other class is called by the $, speaking of this, do you think of static methods and instance methods in the Java language? Yes, it may be better to understand calling the created Jquery method from the java class perspective, although Javascript does not have a clear concept of classes. Now you can answer the question: $ the expansion method is a static method. You can use $ to directly call it. There are two ways to expand it. Generally, $ is used. extend ({}); and $. the fn expansion method is an instance method, which must be called by "object" $ (""). There are two ways to expand fn, usually $. fn. extend ({}).
5. What is fn for knowledge extension?
A: open a Jquery file (0-point download) Search for the character "jQuery. prototype ", tell me what you see: jQuery. fn = jQuery. prototype = {......}, well, you may have guessed that fn is prototype, right? See the following two examples:
Example 05:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> $ and $. fn-demo 05 </title>
<Script type = "text/javascript" src = "./jquery-1.6.2.js"> </script>
<Script type = "text/javascript">
$. Prototype. test = function (){
Return $ (this). val ();
};
$ (Function (){
Alert ($ ("# name"). test ());
});
</Script>
</Head>
<Body>
<Input type = "hidden" id = "name" name = "name" value = "Gao huanjie"/>
</Body>
</Html>
Example 06:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> $ and $. fn-demo 06 </title>
<Script type = "text/javascript" src = "./jquery-1.6.2.js"> </script>
<Script type = "text/javascript">
$. Prototype. extend ({
Test: function (){
Return $ (this). val ();
}
});
$ (Function (){
Alert ($ ("# name"). test ());
});
</Script>
</Head>
<Body>
<Input type = "hidden" id = "name" name = "name" value = "Gao huanjie"/>
</Body>
</Html>
The above two examples can be run after fn is changed to prototype. You guessed it.
Download demo at 0:The website and website. fnin jqueryare separated by. Zip.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
