What is jQuery, what is the difference between jQuery object and DOM object

1. jQuery overview

1.1 JavaScript library

JavaScript library: the library, is a packaged specific collection (methods and functions). To understand the library from the perspective of encapsulating a lot of functions, it is in this library that a lot of pre-defined functions are encapsulated in it, such as animation animate, hide, show, such as getting elements.

Simple understanding: it is a JS file, which encapsulates our native js code and stores it in it. So we can use these encapsulated functions quickly and efficiently.

1.2 The concept of jQuery

jQuery is a fast and concise JavaScript library. Its design purpose is "write Less, Do more", which encapsulates the DOM operations in js, and we can quickly query and use the functions inside.

jQuery encapsulates JavaScript commonly used function codes and optimizes DOM operations. Event handling, animation design and ajax interaction.

Learn the essence of jQuery: learn to call these functions (methods).

advantage:

Lightweight. The core file is only tens of kb, which will not affect the page loading speed
Cross browser compatibility. Basically compatible with current mainstream browsers
Chain programming, implicit iteration
Support for events, styles, and animations greatly simplifies DOM operations
Support plug-in extension development. There are a wealth of third-party plug-ins, such as tree menus, date controls, carousels, etc.
Free and open source

2. Basic use of jQuery

2.1 Download address of jQuery

Official website address: http:jquery.com/

2.2 Introducing jQuery

2.3 jQuery entry function

$(function () {
    
    
    //此处是页面DOM加载完成的入口
});

$(document).ready(function(){
    
    
    //此处是页面DOM加载完成的入口
})

The internal code can be executed when the DOM structure is rendered, instead of waiting for all external resources to be loaded, jQuery helps us complete the encapsulation.
Equivalent to DOMContentLoaded in native js.
Different from the load event in native js, the internal code is executed after the page document, external js file, css file, and image are loaded.

2.4 jQuery's top-level object $

$It is J Q U E R & lt Y of another said, in the generation of the code are available to make a J Q U E R & lt Y generations instead$ .
$Is J Q U E R & lt Y of the top level of the object, relative to when in the primary raw J A V A S C R & lt I P T in the W I n- D O W . The element prime advantage with$ packaged jQuery object, the method can be called jQuery.

2.5 jQuery object and DOM object

Objects obtained with native JS are DOM objects
The object obtained by jQuery is a jQuery object.
The essence of jQuery object: the object (stored in pseudo-array form) generated after wrapping the DOM element with $.
```
//1. DOM对象
var mydiv = document.querySelector('div');
//2. jQuery对象
$('div');
```

jQuery objects can only use jQuery methods, and DOM objects can only use native JavaScript attributes and methods

//1. jQuery隐藏方法
$('div').hide();
//2. DOM对象隐藏方法
mydiv.style.display = 'none';
//二者不可混用

DOM objects and jQuery objects can be transformed into each other. Because native js is larger than jQuery, some native attributes and methods of jQuery are not encapsulated. To use these attributes and methods, you need to convert the jQuery object into a DOM object before you can use it.

Convert DOM object to jQuery object: $(DOM object)

Convert jQuery object to DOM object (two ways)

1. $('div')[index]  index是索引号
2. $('div').get(index)  index是索引号

<body>
    <video src="mov.mp4"></video>
</body>
<script>
    //1. DOM对象转化为jQuery对象
	//(1) 直接获取，得到jQuery对象
	//$('video');
	//(2) 用js原生已获取DOM对象，再转化为jQuery对象
	var myvideo = document.querySelector('video');
   // $(myvideo).play();jQuery里面没有play这个方法，需要将jQuery转化为DOM对象
    //2.jQuery对象转化为DOM对象
    $('video')[0].play();
    $('video').get(0).play();
    
</script>