Getting Started with jQuery and DOM objects

1. Development Readiness

1. Download version:

jquery-3.3.1.min.js: Compact, release 84.8KB
jQuery-3.3.1.js: General Edition, Developer Edition 265KB

2. Develop tools:

hbuilder webstrom (recommended) dreamweaver idea

notepad++

3. Use:

The introduction of jQuery

If an error occurs in html without prompting!
If the debugging tool (F12) no error, but the show inconsistent results, consider html errors
: Common Errors
When introduced js library

must be

<script type="text/javascript src="...">
</script>

Can not

<script type="text/javascript src="..."/>

2. initialization function

1.jQuery

$等效于jQuery
--- jQuery初始化函数 ---
$(document).ready(function(){

});//初始化函数，当网页中的dom元素（不包含图片、视频、资源）全部加载完毕后 立刻执行
--- jQuery初始化函数简化版 ---
$(function(){
    
});

2.javascript

onload:

javascript, initialization function immediately after the execution dom element (related images, videos, resources) web page is fully loaded.

3. Example

        <script type="html/javascript" src="jquery-3.4.1.js">
        </script>
        
        <script type="text/javascript">

            $(function(){           //jQuery初始化函数
                var $title = $("#myTitle");
                alert($title.html()+"jquery");
            });
        
            function init(){        //javascript初始化函数
                var title = document.getElementById("myTitle");
                alert(title.innerHTML);
            }
        </script>   
    </head>
    <body onload="init()">
        <p id="myTitle">你喜欢什么颜色？</p>
    </body>

3. Object

1.dom model:

The markup language document structure such as html xml dom as model

2.dom three types of nodes:

Element node:
- Attribute node: title src alt
- Text node: a text node

3.Dom objects:

Specific types of target nodes is three or more objects Dom.

Use levels: Javascript Object who can direct the operation, that is, Dom objects.

E.g

var title = document.getElementById("myTitle");//通过js获取到的title对象 就是一个dom对象（就是<p>对象）   myTitle是属性id值

4.jQuery objects

Use levels: all objects can be directly operated jQuery, jQuery object is.

E.g:

var $title = $("#myTitile") ; //通过jquery获取到的 $title 就是一个jquery对象。   myTitle是属性id值

- a same element, i.e. the object can be a dom (JavaScript Object), it can also be a jquery object -

Note: dom object is only applicable to a variety of js syntax (functions, properties), jquery jquery object is only used for a variety of syntax (functions, properties).
each independently jquery dom objects and object.

For example :

title dom is the object, it is possible to use a method or property js title.innerHTML
Jquery object is $ title, it is possible to use a method or property jquery title.html $ ()

Recommended:
JS objects directly write title
jQuery plus $, such as $ title

5.dom jquery objects and object conversion:

title.innerHTML;
tile ->$title

dom Object -> jquery Object: jquery factory, $ (dom objects)

                var title = document.getElementById("myTitle");
                    alert($(title).innerHTML);

$title.html();
$title->title

jquery object -> dom objects:

Base: jQuery default objects is an array or collection; DOM objects default is a separate object

Array: jquery Object [0]
set: jquery .get objects (0)

                var $title = $("#myTitle");
                    alert($title[0].html()+"jquery");
                        alert($title[0].innerHTML+"javascript");
                        alert($title.get(0).innerHTML+"javascript");