Home > Web Front-end > JS Tutorial > body text

jQuery core functions and jQuery objects_jquery

WBOY
Release: 2016-05-16 18:31:40
Original
1195 people have browsed it
1. jQuery core functions
First, we will introduce several core functions of jQuery. They play a vital role in jQuery, and they are the most used in the actual front-end development process.
1. jQuery(elements)
Convert one or more DOM elements into jQuery objects.
This function can also receive XML documents and Window objects (although they are not DOM elements) as valid parameters.
Return value: jQuery object
Parameters
elements: DOM elements used to encapsulate jQuery objects
Copy code The code is as follows:

// Set the background color of the current page to black
jQuery(document.body).css( "background-color", "black" );
Look at the following code again
// Set the background color of the current page to black
$(document.body).css( "background-color", "black" );
The code can also run normally , and the execution effect is the same as the previous code; so what is the relationship between the $ here and the previous jQuery identifier?
Open the jQuery source file jquery-1.3.2.js and find the following code
jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
}

It turns out that $ and jQuery represent the same function in the jQuery framework, using jQuery The effect is the same as $; in fact, the jQuery framework uses $ as an alias for jQuery methods (easier to use), due to concerns about the $ identifier in other javascript frameworks (such as asp.net ajax) or even in personal code. If a conflict occurs, you can also use the jQuery.noConflict() function to remove the association between $ and the jQuery function, so that $ does not represent the jQuery method, but represents the original $ object.
2. jQuery(expression,[context])
This function receives a string containing a CSS selector, and then uses this string to match a set of elements.
The core functions of jQuery are implemented through this function. Everything in jQuery is based on this function, or uses this function in some way. The most basic use of this function is to pass it an expression (usually composed of a CSS selector) and then find all matching elements based on this expression.
Return value: jQuery object
Parameters
Expression: String used to find DOM elements
context: (optional) As the DOM element set, document or jQuery object to be found, used to limit Search range
Copy code The code is as follows:

// Find A elements under all DIV elements
$("div > a");

3. jQuery(html)
Based on the HTML string, dynamically create a DOM wrapped by a jQuery object element.
Return value: jQuery object
Parameters
HTML: HTML string used to create DOM elements
Copy code The code is as follows:

// Add a jquery.com hyperlink element to the main element of the page
$("jquery.com").appendTo("body");

2. jQuery object
The return value of jQuery core function is a jQuery object. By operating on objects, most tasks in JavaScript programming can be completed; so what exactly is this jQuery object?
jQuery core functions and jQuery objects_jquery
You can retrieve a DOM object through doc[0] and doc[1] respectively, and the others are some properties and methods unique to the jQuery object; in fact, the jQuery object wraps the DOM object and also Contains some jQuery methods for manipulating DOM elements.

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 call the method of the obtained jQuery object To complete the operation on DOM objects.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!