$ () Function usage in jQuery. jquery Summary
JQuery must be an essential component in front-end development. It provides DOM object encapsulation, unified event mechanism, and a series of tool functions. I was suddenly asked about jQuery during the interview.$()
There are several usage methods, and I have not answered all of them in an instant. Although such a question is quite like Kong Yiji's question, "How many methods are there to write the beans ?", However, I would like to take this opportunity to sort out my knowledge and take the opportunity to learn!
First, we need to introduce jQuery. If you have not heard of jQuery, please go to another article or introduce this in your website:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
JQuery$()
Function documentation here: http://api.jquery.com/jQuery/ jQuery's $ () function usage includes:
- DOM selection, you can specify the context;
- DOM creation, which can specify the document, attributes, events, and even all jQuery methods;
- DOM load completion event listening, yes
$(document).ready()
.
DOM Selection
The most common choice is to use the selector:
jQuery( selector [, context ] )
See? The second optional parameter can specify the context, which can be a DOM object or a jQuery object. For exampleul
Allli
:
$ul = $('ul');$li = $.('li', $ul);
Equivalent:
$li = $ul.find('li');
In addition to the selector, you can also use DOM objects, DOM object arrays, jQuery objects, and even a common object as parameters. They will be encapsulated into jQuery objects.
DOM Creation
Using jQuery to create DOM is also a common operation, for example, inul
Createli
:
// Method declaration jQuery (html [, ownerDocument]) // example $ ('<li>'). appendTo ($ ul );
Note the second optional parameter. The default value is the Document loaded by jQuery. If you want to create an element in IFrame, you must specify the Document because jQuery useswindow.document.createElement
To create DOM elements. We need to know where the new element belongs.document
Object. For example:
$("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document)
When creating a DOM element, you can specify the document and element attributes:
// Method declaration jQuery (html, attributes) // example $ ('<a>', {href: 'http: // jquery.com '}); // Of course, you can also write it in a stupid way: $ ("<a href = 'HTTP: // jquery.com '> </a> ");
More interestingly, since jQuery1.8, when creating an element, you can not only specify attributes$.fn.
Methods can be specified, for example:
$( "<div/>", { "class": "test", text: "Click me!", click: function() { $( this ).toggleClass( "test" ); }}).appendTo( "body" );
DOM loaded
Generally, JavaScript needs to be executed after the DOM is loaded. Otherwise, the DOM operation may become invalid. JQuery provides a convenient method for listening to DOM loading:
// Method declaration jQuery (callback) // example $ (function () {// executed after DOM loading });
$(callback)
Is equivalent$(document).ready(callback)
. Both return values are jQuery objects that contain documents. Therefore, the difference between the two lies in that the latter can be written in a chain:$(document).ready(x).ready(x)...
. However.
Here I will mention$(document).ready
And$(window).load
Differences:
- The former will be called after the HTML document is loaded and the DOM is ready.
- The latter will be called after the HTML document is loaded, DOM is ready, and the page rendering ends (iframe and img loading is complete.
Unless indicated, this blog post is original, reprinted please in the form of a link to indicate the address: http://harttle.com/2015/08/06/jquery-object.html
Copyright Disclaimer: This article is the original article of the blogger. For more information, see the original article link.