A brief introduction to Jquery core functions

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

So Jquery provides a function that encapsulates the DOM object as an Jquery object, the Jquery core function jquery(), also known as the factory function.

The jquery core function has 7 overloads, which are as follows:

jquery() returns 1 empty jquery object.
jquery(elements) This function converts one or more DOM elements into an Jquery object (or jquery collection)
The function jquery(callback) is short for jquery(document).ready(callback). This function will bind a function that executes after the DOM document has been loaded. All jquery operations on the page that need to be performed when DOM has finished loading 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 look at this in more detail

jQuery(expression, [context])

This function takes a string containing the CSS selector and USES that string to match a set of elements.

Through doc[0] and doc[1], one DOM object can be extracted respectively, while the others are 1 specific attributes and methods of jQuery object. In fact, the jQuery object wraps the DOM object and also contains 1 jQuery method that operates on DOM elements.

In most cases, the first and most important step in working with jQuery is to get the jQuery object wrapped to operate on. The operation on the DOM object is then completed by calling the method of the acquired jQuery object.

for example

1. Find the search element with node p in #first context and display the corresponding value in a loop.

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

i is the corresponding node of index and n

2. Find all p elements and they must be children of the div element.

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

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

Results:
[ < p > two < /p > ]

3. In the first form of the document, look for all radio buttons (that is, type elements with radio values).

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

jQuery(html, [ownerDocument])

Based on the supplied original HTML tag string, an DOM element wrapped by an jQuery object is dynamically created.

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)

An DOM element wrapped by an jQuery object is dynamically created based on the supplied original HTML tag string. Set 1 series of properties, events, and so on.

parameter

htmlString

An HTML tag string for dynamically creating DOM elements

propsMap

Properties, events, and methods used to attach to newly created elements

The sample

Description:

Dynamically create 1 div element (and everything within it) and append it to the body element. Inside this function, the markup to the DOM element is converted by temporarily creating 1 element and setting the innerHTML attribute of that element to the given tag string. So, this function is both flexible and limited.

jQuery code:

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

$(document). - ready().

When DOM is loaded, the functions are executed.

jQuery code:

 
$(function(){
 //  The document is ready 
});

This is the end of this article, I hope you enjoy it.