A brief discussion on Jquery core functions_jquery

In Jquery, all DOM objects will be encapsulated into Jquery objects, and only Jquery objects can use Jquery methods or properties to perform corresponding operations.

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

The jquery core function has 7 overloads, as follows:

jquery() This function returns an empty jquery object.
jquery(elements) This function converts one or more DOM elements into Jquery objects (or jquery collections)
jquery(callback) This function is the abbreviation of jquery(document).ready(callback). This function will bind a function that will be executed after the DOM document is loaded. All jquery operations on the page that need to be performed when the DOM is loaded need to 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 look at them in detail

jQuery(expression, [context])

This function receives a string containing a CSS selector, and then uses this string to match a set of elements.

You can retrieve a DOM object through doc[0] and doc[1] respectively, and the others are some properties and methods unique to jQuery objects; in fact, jQuery objects wrap DOM objects and also include some operations on DOM elements. jQuery method.

In the process of using jQuery, the first step and the most important step in most cases is to obtain the jQuery object that wraps the DOM object to be manipulated; and then complete the processing by calling the method of the obtained jQuery object. Operations on DOM objects.

for example

1. Find all elements with node p in #first context, and display the corresponding values ​​in a loop.

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

i is the corresponding index, n is the corresponding node

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

HTML code:

one

two

three

jQuery code:
$("div > p");

Result:
[

two

]

3. In the first form of the document, find all radio buttons (ie: input elements with type value radio).

jQuery code:
$("input:radio", document.forms[0]);
                                                                                                                                  

jQuery(html, [ownerDocument])

Dynamically creates a DOM element wrapped by a jQuery object based on a supplied raw HTML markup string.

You can pass a handwritten HTML string, a string created by some template engine or plugin, or a string loaded via AJAX.

jQuery(html, props)

Dynamically creates a DOM element wrapped by a jQuery object based on a supplied raw HTML markup string. Set a series of properties, events, etc. at the same time.

Parameters

htmlString

HTML tag string used to dynamically create DOM elements

propsMap

Properties, events and methods for attaching to newly created elements

Example

Description:

Dynamicly create a div element (and all content within it) and append it to the body element. Inside this function, markup to DOM element conversion is achieved by temporarily creating an element and setting the element's innerHTML property to the given markup string. Therefore, this function has both flexibility and limitations.

jQuery code:

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

Abbreviation for $(document).ready().

When the DOM is loaded, execute the functions in it.

jQuery code:

 
$(function(){
 // 文档就绪
});

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