About Jquery core functions

About Jquery core functions

In Jquery, all DOM objects are encapsulated into Jquery objects, and only Jquery objects can use Jquery methods or attributes to perform corresponding operations.

Therefore, Jquery provides a function that can encapsulate DOM objects into Jquery objects, that is, Jquery core function jquery (), also known as a factory function.

Jquery core functions have seven reloads:

Jquery () This function returns an empty jquery object.
Jquery (elements) This function converts one or more DOM elements into Jquery objects (or jquery sets)
Jquery (callback) this function is short for jquery (document). ready (callback. This function is bound to a function executed after the DOM document is loaded. All jquery operations that need to be executed when DOM loading is complete on the page must be included in this function. This function can appear multiple times on the page.
Jquery (expression, [context])
Jquery (html)
Jquery (html, props)
Jquery (html, [ownerDocument])

Let's take a closer look at

JQuery (expression, [context])

This function receives a string containing the CSS selector and uses this string to match a group of elements.

You can retrieve a DOM object by using doc [0] And doc [1]. Others are the attributes and Methods unique to jQuery objects. In fact, jQuery objects encapsulate DOM objects, it also contains some jQuery methods that operate DOM elements.

In the process of using jQuery, the first step is also the most important work in most cases, that is, to obtain the jQuery object that wraps the DOM object; then, you can call the method of the obtained jQuery object to perform operations on the DOM object.

For example

1. Search for an element in # first context where the node is p and the corresponding value is displayed cyclically.

$(function() {    var items = $("p", "#first");    $.each(items, function(i, n) {      alert(i);    });  });

I is the corresponding index and n is the corresponding node.

2. Find all p elements, and these elements must be child elements of the div element.

HTML code:
<P> one </p> <div> <p> two </p> </div> <p> three </p>

JQuery code:
$ ("Div> p"); <br>

Result:
[<P> two </p>]

3. In the first form of the document, find all the radio buttons (that is, the input element with the type value of radio ).

JQuery code:
$ ("Input: radio", document. forms [0]);

JQuery (html, [ownerDocument])

Dynamically create DOM elements encapsulated by jQuery Objects Based on the provided original HTML Tag string.

You can pass a handwritten HTML string, a string created by some template engines or plug-ins, or a string loaded through AJAX.

JQuery (html, props)

Dynamically create DOM elements encapsulated by jQuery Objects Based on the provided original HTML Tag string. Set a series of attributes and events.

Parameters

HtmlString

HTML Tag string used to dynamically create DOM elements

PropsMap

Attributes, events, and Methods attached to newly created elements

Example

Description:

Dynamically create a div element (and all its content) and append it to the body element. In this function, an element is created temporarily and the innerHTML attribute of this element is set to a given tag string to convert the tag to the DOM element. Therefore, this function has both flexibility and limitations.

JQuery code:

$("<div>", { "class": "test", text: "Click me!", click: function(){  $(this).toggleClass("test"); }}).appendTo("body");

$ (Document). ready.

After the DOM is loaded, execute the function.

JQuery code:

$ (Function () {// document ready });

The above is all the content of this article. I hope you will like it.