Home > Developer > Web Develop

Introduction to jquery Learning Notes (i)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The most confusing of several concepts jquery objects are not equal to DOM objects

The DOM is the abbreviation for the Document Object model, and Chinese is the file-based one. It is an application interface for HTML and XML, and the DOM maps the entire page to a file composed of hierarchical nodes.
"Example 1"

<! DOCTYPE html><html lang="en"><head>    <title>Standard DOM Example</title></head><body><H1>This is a simple Document Object model</H1><ul>    <li>D represents the document</li>    <li>O represents the Object</li>    <li>M represents the model</li></ul></body></html>

In this DOM tree,

  • tags are
      child nodes of the label and can be accessed through the Getelementbytagname () method of the Document object. All of the above nodes and elements are part of the DOM object, and Getelementbytagname () is the built-in method provided by the DOM model, all of which form the basis of the DOM object.
      A new object created by the JQuery object wrapping the DOM object through the jquery framework is essentially a JS object that contains a collection of Dom objects.

    • The jquery framework defines the methods and properties that are used independently for the jquery object, which cannot invoke the DOM object method directly , nor can the DOM object directly invoke the methods or properties of the jquery object .
    $ ("#wrap"). Innerhtml= "Embedded text";//jquery Object Call Dom property

    Conversion between a JQuery object and a DOM object

    They can be converted to each other because the objects they manipulate are DOM elements, except that the jquery object contains multiple DOM elements , and the DOM object itself is a DOM element.
    1. # # # #把jQuery对象转换成DOM对象
    * Use array subscripts to read a DOM element object in the collection of jquery objects

    <! DOCTYPE html><html lang="en"><head>    <title>Standard DOM Example</title>    <meta charset="Utf-8"/></head><body><H1>This is a simple Document Object model</H1><ul>    <li>D represents the document</li>    <li>O represents the Object</li>    <li>M represents the model</li></ul></body><script src="Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="Text/javascript"></script><script type="Text/javascript">$ (function() {  var $li =$ ("Li");        var li = $li [0];    alert (li.innerhtml); })        </script></html>
    * 借助jQuery对象方法，如get()方法，为get()方法传递一个下标值，即可从jQuery对象中取出一个DOM对象元素
        $(function  () {        var $li=$("li");        var li = $li.get(‘0‘);        alert(li.innerHTML);    })
      1. # # #把DOM对象转换成jQuery对象
        For Dom objects, simply pass him to the $ () function, and the jquery object will automatically wrap it as a jquery object and then be free to invoke the method defined by jquery.
    <script type="text/javascript">    $(function  () {        var li = document.getElementsByTagName(‘li‘);        var $li=$(li[0]);        alert($li.html());    })</script>
    jquery's ready is not equal to the load of JavaScript

    The load time is not executed until all content in the Web page has been loaded.
    The ready event of jquery is executed after the DOM structure has been drawn, that is, before the loading of the external file.

    Introduction to jquery Learning Notes (i)

    This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

    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

    Get Started for Free

    • Sales Support

      1 on 1 presale consultation

      Chat Contact Sales

    • After-Sales Support

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

      Open a Ticket

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

      Learn More