What does jQuery do?

The main content

JQuery object

jQuery is a multi-browser compatible javascript script library. T he core idea is to write less and do more, and using jQuery will greatly improve the efficiency of writing javascript code, helping developers save a lot of work and making the written code more elegant and robust. A t the same time, the rich jQuery plug-ins on the web have turned our work into "with jQuery, everything so easy." -- Because we're already on the shoulders of giants.

Launched in January 2006 by American John Resig at Barcamp in New York, jQuery attracted a large number of JavaScript experts from around the world, led by Dave Methvin. Today, jQuery is the most popular javascript framework, with more than 55% of the world's top 10,000 most visited sites using jQuery.

Jquery download and installation

Download

Download the jQuery library from jquery.com

version

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (ie6 7 8 is not supported if 1.X needs to be downloaded)

(1) Full version : jquery-2.1.4.js -- > learning version (learning source code want master learning is the best way to learn)

(2) Compressed version: jquery-2.1.4.min.js --> development version (compressed version, reduce transmission)

Currently in use: jquery-3.4.1 .js

merit

(1) Provides powerful function functions

(2) Solve browser compatibility issues

(3) Implement rich UI and plug-ins

(4) Script knowledge to correct errors

Installation

Just introduce it on the page

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

Jquery Core

The $symbol represents a reference to the jQuery object in jQuery, with "jQuery" being the core object. T his object allows you to get the jQuery object, call the methods provided by jQuery, and so on. Only the jQuery object can call the methods provided by jQuery.

$ <==> jQuery

Dom object and Jquery wrap set object

Clarifying the concepts of Dom objects and jQuery wrappers will greatly speed up our learning. The original DoM object has only the methods and properties provided by the DOM interface, and the objects obtained from the js code are dom objects, while the object obtained through jQuery is the jQuery wrapper set object, or jQuery object for short, and only the jQuery object can use the method provided by jQuery.

Dom object

Get the Dom object in javascript, and the Dom object has only a limited number of properties and methods:

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

Jquery wraps the set object

Can be said to be the expansion of the Dom object. In the world of jQuery, all objects, whether one or a group, are encapsulated into a jQuery wrapper set, such as getting a jQuery wrapper set that contains an element:

var jQueryObject = $("#testDiv");

Dom Object Turns Jquery Object

The Dom object becomes a jQuery object and only needs to be wrapped using the $() method

var domDiv = document.getElementById('mydiv');  // 获取Dom对象
mydiv = $(domDiv);

Jquery object turns dom object

The jQuery object turns to the Dom object, and all it takes is the elements in the array

// 第一种方式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
// 第二种方式 获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom

The object obtained by traversing the jQuery object array is a Dom object that can be converted from $() to a jQuery object

$('#mydiv').each(function() {//遍历
       var jquery = $(this);    
});

Case:

<div id="mydiv">write less, do more</div>
 
<script type="text/javascript">
    console.log("-------------获取dom对象------------------")
    // dom对象
    var domDiv = document.getElementById("mydiv");
    console.log(domDiv);
 
    console.log("-------------获取jquery对象------------------")
    // 获取jquery对象
    // 第一种方式
    var jqueryDiv = jQuery('#mydiv');
    console.log(jqueryDiv);
    // 第二种方式
    jqueryDiv = $('#mydiv');
    console.log(jqueryDiv);
 
    console.log("-------------dom转jquery------------------")
    // dom转jquery包装集/对象
    var obj = $(domDiv);
    console.log(obj);
 
    console.log("-------------jquery转dom------------------")
    // jquery对象转dom对象
    var dom = $('#mydiv')[0]; // 获取jquery对象转为dom
    // 或
    var dom2 = jqueryDiv[0]; // 将jquery对象转为dom
    console.log(dom);
    console.log(dom2);
 
    /* this代表了dom对象，不是jquery对象 */
    console.log("-------------dom转jquery------------------")
    $('#mydiv').each(function() {
   // 通过id选择器选择了id为mydiv的所有元素然后进行遍历
   // 那么遍历出的每个元素就是id为mydiv的标签元素
   // 而this就代表了当前的这个元素
        var jquery = $(this);   
    });
 
    console.log("-------------jquery转dom------------------")
    $('#mydiv').each(function() {
        var dom3 = this;    
    });
</script>