$ () Function usage in jQuery. jquery Summary

Source: Internet
Author: User

$ () 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 exampleulAllli:

$ul = $('ul');$li = $.('li', $ul);


$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, inulCreateli:

// 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.createElementTo create DOM elements. We need to know where the new element belongs.documentObject. 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).readyAnd$(window).loadDifferences:

  • 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.