jquery Core-jquery () method

Source: Internet
Author: User
Original: Http://www.w3school.com.cn/jquery/core_jquery.asp#syntax1
Instance

Find all the P elements that belong to the child elements of the DIV element, and then set their border properties:

$ ("div > P"). CSS ("Border", "1px solid Gray");

Try the definition and usage for yourself

The JQuery () method accepts a string that contains a CSS selector for matching the collection of elements.

The JQuery () function has three syntaxes: Syntax 1

Accepts a string that contains the CSS selector used to match the collection of elements:

JQuery (selector, [context])

Detailed usage Syntax 2

Use the raw HTML string to create the DOM element:

JQuery (Html,[ownerdocument])

Detailed usage Syntax 3

Bind a function to execute after the DOM document is loaded:

JQuery (callback)

Detailed usage jQuery (selector, [context])

This syntax has several uses: use 1: Set selector environment Syntax

JQuery (selector, [context])

By default, the selector searches the DOM from the root of the document. However, you can set optional context parameters for $ ().

For example, if we want to search for an element in a callback, we can qualify the following search: instance

$ ("Div.foo"). Click (function () {
  $ ("span", this). AddClass ("Bar");

Since we have limited the span selector to this environment, only the span in the clicked element will get the additional class.

Internally, the selector environment is implemented through the. Find () method, so $ ("span", this) is equivalent to $ (this). FIND ("span").

The core functions of jQuery are implemented through this function. Everything in jquery is based on this function, or it is used in some way. The basic use of this function is to pass an expression to it (usually composed of a CSS selector) and then find all the matching elements based on the expression.

By default, if the context parameter is not specified, $ () looks for the DOM element in the current HTML document, and if the context parameter, such as a DOM element set or JQuery object, is specified, it is looked up in the context. After the JQuery 1.3.2, the order in which the elements are returned is equivalent to the order in which they appear in the context. usage 2: Using DOM elements Grammar

JQuery (Element)

This function allows us to create jQuery objects by using DOM elements that are otherwise found. The usual use of this feature is to call JQuery on elements that have passed through the This keyword to the callback function: instance

$ ("Div.foo"). Click (function () {
  $ (this). Slideup ();
});

This meeting hides the element when it is clicked by using a sliding animation. Because the clicked item in the This keyword accepted by the handler is a pure DOM element, you must wrap the element in the jquery object before invoking the JQuery method.

This function can also receive XML documents and Window objects (although they are not DOM elements) as valid arguments.

When XML data is returned from an Ajax call, we can use the $ () function to wrap the data through the JQuery object. Once completed, we can use. Find () and other DOM traversal methods to retrieve the individual elements of the XML structure. Usage 3: Cloning a JQuery object Grammar

jquery (jquery object)

When a JQuery object is passed as a parameter to the $ () function, a copy of the object is created. As with the original object, the new JQuery object references the same DOM element. Usage 4: Returns an empty collection Grammar

JQuery ()

For jquery 1.4, calling the No-parameter jquery () method returns an empty jquery collection. In previous versions of JQuery, this would return a collection containing the document node. jQuery (HTML, [ownerdocument])

The syntax has several uses: use 1: Create a new element syntax

JQuery (Html,[ownerdocument])

You can pass a handwritten HTML string, or a string created by some template engine or plug-in, or a string that is loaded over AJAX. However, when you create an INPUT element, there is a limit, and you can refer to the second example.

Of course, this string can contain a slash (such as an image address) and a backslash. When you create a single element, use either a closed tag or an XHTML format. For example, to create a span, you can use $ ("<span/>") or $ ("<span></span>"), but not $ ("<span>"). In JQuery, this syntax is equivalent to $ (document.createelement ("span")).

If you pass a string to $ () as a parameter, JQuery checks to see if the string is HTML (for example, there is a label somewhere in the string). If not, the string is interpreted as a selector expression, as explained above. However, if the string is an HTML fragment, JQuery attempts to create the DOM element that is described by the HTML fragment. It then creates and returns a JQuery object that references these DOM elements: instance

$ ("<p id=" test ">my <em>new</em> text</p>"). Appendto ("body");

If HTML fragments are more complex than simple tags without attributes, as in the example above, the actual creation of the element is done by the browser's innerHTML mechanism. Specifically, JQuery creates a new <div> element and then sets the element's InnerHTML property for the incoming HTML fragment. When the parameter is simply a label, such as $ ("</a>"), JQuery creates the element through the native JavaScript createelement () function.

To ensure cross-platform compatibility, fragments must have a good structure. Tags that can contain other elements must appear in pairs (with closing tags):

$ ("<a href=" http://jquery.com "></a>");

However, JQuery also allows XML-like tag syntax:

$ ("<a/>");

Labels that cannot contain other elements can be closed or not closed:

$ ("
Usage 2: Setting properties and Events Grammar
JQuery (Html,props)

For JQuery 1.4, we can pass an attribute mapping to the second parameter. This parameter accepts a superset of the properties that can be passed to the. attr () method. In addition, you can pass any event type, and you can call the following JQuery method: Val, CSS, HTML, text, data, width, height, or offset.

Note that Internet Explorer does not allow you to create input elements and change their type; You must use the "<input type=" checkbox "/>" to specify the type. instance

Creates a <input> element, setting the type attribute, the property value, and some events.

$ ("<input>", {
  type: "Text",
  val: "Test",
  focusin:function () {
    $ (this). AddClass ("active");
  } ,
  focusout:function () {
    $ (this). Removeclass ("active");
  }
). Appendto ("form");
JQuery (callback)

Allows you to bind a function that executes after the DOM document is loaded.

The function acts as a $ (document). Ready (), except when you use this function, you need to wrap all the other $ () operators in the page that need to be executed when the DOM load completes. Although technically, this function is linked, there is not much that is actually linked in this way. Example

When the DOM is loaded, the function is executed:

$ (function () {
  //document Ready
});

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.