jquery Technology Insider preview version. Pdf2

Source: Internet
Author: User
Tags event listener

The second chapter constructs the jquery object

The jquery object is a class array object that contains continuous integer attributes, a length property, and a large number of jquery methods, and $ () is the abbreviation for jquery ()

Constructor jquery ()

If the arguments passed in when calling the constructor jquery () are different, the logic of the created jquery object will vary

JQuery (Selector[,context]):

If you pass in a string parameter, jquery checks whether the string is a selector expression or an HTML code. If it is a selector expression, traverse the document, find the DOM element that matches it, and create a jquery object that contains references to those DOM elements, and if no element matches it, create an empty jquery object that contains no elements with length equal to 0;

By default, a lookup for a matching element starts from the root element document object, or it can pass in the second parameter context (the contextual) to qualify the lookup range

$ (' Div.foo '). Click (function () {

$ (' span ', this). addclass (' Bar '); Limit the lookup range, equivalent to $ (' this '). Find (' span ')

});

jquery (Html[,ownerdocument]), jquery (html,props):

If the incoming string is a piece of HTML code, jquery attempts to create a new DOM element with this HTML code and create a jquery object that contains references to those DOM elements

$ (' <p id= ' test ' >My<em>text</em></p> '). AppendTo (' body ');

The second parameter, ownerdocument, specifies the document object that creates the DOM element, such as the default current document object, if not passed in;

If the HTML code is a separate label, then the second argument can also be props,props is a normal object that contains properties, events, and after you call Document.createelement () to create a DOM element, The parameter props is passed to the jquery method. attr (), attr () is responsible for setting parameters props attributes, events to the newly created DOM element

The parameter props can contain the following special properties: Val, CSS,
HTML, text, data, width, height, offset, the corresponding JQuery method:. val (),. css (),. html (),. Text (),.
Data (),. width (),. Height (),. Offset () are executed, and the value of the property is passed in as a parameter

$ ("<div/>", {

"Class": "Test",//class is a JavaScript reserved word

Text: "Click me!"

Click:function () {

$ (this). Toggleclass ("test");

}

}). AppendTo ("body");

jquery (Element), jquery (Elementarray):

If a DOM element or an array of DOM elements is passed in, the DOM element is encapsulated in a JQuery object and returned,

This feature is common in event listener functions, which enclose the DOM element referenced by the keyword this as a JQuery object.
The jquery method is then called on the jquery object.

$ (' div. foo '). Click (function () {

$ (this). Slideup ();

});

JQuery (object):

If a normal JavaScript object is passed in, the object is encapsulated in a JQuery object and returned to add method properties for the encapsulated object

JQuery (callback):

If a function is passed in, a ready event listener function is bound to the document when the DOM structure loads
Executed when finished, the ready event is triggered earlier than the Load event

jquery (jquery object):

If a jquery object is passed in, a copy of the jquery object is created and returned, and the copy is associated with the incoming
JQuery objects reference exactly the same DOM elements

JQuery ():

If no arguments are passed in, an empty JQuery object is returned, with a property length of 0

Line 25th also defines a variable jquery, whose value is the jquery constructor

The 97th ~ 319 Row covers the prototype object of the constructor JQuery ()

Line 98th overrides the prototype object's property constructor, making it point to the JQuery constructor

Line 99th defines the prototype method JQuery.fn.init (), which is responsible for parsing the types of parameters selector and context and performing the appropriate lookups

1) Why do you create and return an instance of another constructor with operator new inside the constructor JQuery ()?

For example, Newdate () returns a Date object, but if the constructor has a return value, the object created by operator new is discarded and the return value is used as the value of the new expression.

By creating and returning an instance of another constructor by using operator new inside the constructor jquery (), omit the constructor, jquery (), before the operator new, that is, when we create the jquery object, we can omit the operator new to write jquery directly ()

2) Why do Jquery.fn = Jquery.prototype in line 97th, set the prototype object Jquery.prototype of Jquery.fn to the constructor jQuery ()?

Jquery.fn is a shorthand for jquery.prototype, which can be written less than 7 characters to facilitate spelling.

3) Since the calling constructor jquery () returns the JQuery object that is actually the constructor of the JQuery.fn.init ()
Instance, why can I call the constructor on the instance of the constructor JQuery.fn.init () The prototype method of JQuery () and the genus
Of For example, $ (' #id '). Length and $ (' #id '). Size ().

Prototype object with the constructor jQuery () when executing jQuery.fn.init.prototype = Jquery.fn on line No. 322
A prototype object that overrides the constructor JQuery.fn.init () so that an instance of the constructor JQuery.fn.init () can also be visited
Ask the constructor JQuery () The prototype method and properties

4) Why wrap the 25th to 955 lines of code in a self-invoking anonymous function and then set the 25th line
The semantic constructor jquery () as the return value is assigned to the 22nd row of the jquery variable? Remove this self-invoking anonymous letter
Number, defining the constructor directly on line 25th JQuery () No, you can? Is it easier to read and understand than to get rid of it?

Removing the self-invocation anonymous function from line 25th to 955 can, however, potentially increase the construction of the JQuery object module
The degree of coupling with other modules. A number of other local variables are also defined between rows 25th to 97, which are only
Used inside the construction JQuery object module. By wrapping these local variables in a self-invoking anonymous function, you implement
The design idea of cohesion-poly low coupling

Why overwrite the constructor JQuery () 's prototype object Jquery.prototype?

The properties and methods defined on the prototype object Jquery.prototype are inherited by all JQuery objects and can have
Reduce the memory required for each JQuery object

 

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.