Home > Developer > Web Develop
A Code style
In a jquery program, both the selection of page elements and the built-in function functions are the starting point of the dollar sign "$". And this "$" is the most important and exclusive object of jquery: jquery object, so we can write this when the page element chooses or executes a function function:
<Scriptsrc=".. /jquery-1.10.1.js "type= "Text/javascript"></Script><Scripttype= "Text/javascript"> $(function(){}); //execute an anonymous function $('#box'); //ID element selection for execution $(function(){ $('#box'). CSS ('Color','Red'); //executes a function function that sets an inline style for the element with the ID box }); </Script></Head><Body><DivID= "box">Basic Core</Div></Body>
Since $ is itself an abbreviated form of the JQuery object, the above three-segment code can also be written in the following form:
<Scriptsrc=".. /jquery-1.10.1.js "type= "Text/javascript"></Script><Scripttype= "Text/javascript">JQuery (function(){}); //execute an anonymous functionJQuery ('#box'); //ID element selection for executionJQuery (function(){ $('#box'). CSS ('Color','Red'); //executes a function function that sets an inline style for the element with the ID box }); </Script></Head><Body><DivID= "box">Basic Core</Div></Body>
alert (jquery===$);//True to indicate that two are equal
In executing the function function, we find that the. css () function function is not directly executed by the "$" or jquery object call, but rather first gets the element and returns an object before invoking the. css () function. In other words, this returned object is actually a jquery object.
$ (). CSS (' Color ', ' red '); Theoretically legal, but actually missing elements and errorIt is worth mentioning that, after the implementation of the. CSS () function, the final return is the jquery object, that is to say, jquery code pattern is the use of the concatenating way, you can continuously call function functions.
<Scriptsrc=".. /jquery-1.10.1.js "type= "Text/javascript"></Script><Scripttype= "Text/javascript">JQuery (function(){ $('#box'). CSS ('Color', 'Red'). CSS ('font-size', '50px'); //concatenating });</Script></Head><Body><DivID= "box">Basic Core</Div></Body>
Code annotations and JavaScript are consistent in jquery, with two of the most common comments: single-line use of "/...", multiline use "/* ... * *".
Two Load mode:
We have been using $ (function () {}) in the previous code, and this code is wrapped, so why do we have to wrap this code? The reason is that our jquery library file was loaded before the BODY element, and we had to wait for all DOM elements to load and delay support for DOM operations, otherwise it would not be available.
JavaScript delays waiting for loading, as follows:
Window.onload = function () {}; JavaScript waiting to loadjquery delays waiting for loading by following this method:
$ (document). Ready (function () {}); jquery Waiting to loadWindow.onload = function () { //is covered by the following alert (1);} window.onload = function () { alert (2);}
$ (document). Ready (function () { ///will not be covered by the following alert (1); }); $ (document). Ready (function () { alert (2); });In practical applications, we seldom go directly to the window.onload because he needs to wait for large elements such as images to be loaded before the JS code can be executed. Therefore, the most headache is the slow speed of the situation, the page has been fully expanded, the picture is still slowly loading, then any of the page JS Interactive function in the state of suspended animation. And can only perform a single time in multiple development and team development will bring difficulties.
Three Object Interchange
Although the jquery object is unique to the jquery library, it is also encapsulated by JavaScript. We can output it directly to get the information.
<Scriptsrc=".. /jquery-1.10.1.js "type= "Text/javascript"></Script><Scripttype= "Text/javascript">JQuery (function() {alert ($);//JQuery Object Method Interioralert ($ ());//the object returned by the jquery object, or the jqueryAlert ($ ('#box')); //The package ID element Returns an object, or JQuery });</Script></Head><Body><DivID= "box">Basic Core</Div></Body>
From the above three sets of code we found: As long as the package is used, the final return is the JQuery object. The benefits are obvious and can be concatenating handled. But sometimes, we also need to return native DOM objects, such as:
Alert (document.getElementById (' box ')); [Object Htmldivelement]JQuery wants to reach the native DOM object, which can be handled as follows:
Alert ($ (' #box '). Get (0)); The first native DOM of an ID elementFrom the above get (0), the index here shows that jQuery can be processed in batches of the DOM, which can be more handy in many processes that require loop traversal.
Alert ($ (document.getElementById (' box ')). CSS (' Color ', ' red ')); // interchange between jquery objects and Dom objectsFour Conflicts between multiple libraries
When multiple third-party libraries are introduced into a project, conflicts between libraries and libraries are unavoidable because there is no namespace constraint (the namespace is the same as a folder in the same directory, and the same name creates a conflict).
So, since there are conflicting issues, why use multiple libraries? The reason is that jQuery is nothing more than a DOM-based library that facilitates our daily Web development. But sometimes, our projects have more special features that need to be introduced into other libraries, such as a library of UI aspects of the user interface, a library of game engines, and so on.
Many libraries, such as prototype and the base library of our JavaScript curriculum, use "$" as the base starting character, if you want to share with JQuery in two ways:
1. When the jquery library is introduced before the base library, the ownership of "$" is owned by the base library, and jquery can be called directly with the jquery object, or create a "$$" character for jquery to use.
var $$ = jquery;$ (function () { //jquery library is referenced before the base library, then $ ownership is the alert ($ (' #box ') of the Base library. GE (0)); Alert ($$ (' #box '). Get (0));});2. If the jquery library is introduced after the base library, then the ownership of "$" is owned by the jquery library, and the base library will conflict and lose its role. Here, JQuery provides a way to:
Jquery.noconflict (); Self-end, to put their own $ ownership culling var $$ = jquery;$ (function () { //jquery library is referenced after the base library, then $ ownership is the alert ($ (' #box ') of the JQuery Library. GE (0) ); Alert ($$ (' #box '). Get (0));});jquery Foundation Core
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
