What is jquery a class library?

jquery is a class library encapsulated in JavaScript. jQuery is a class library developed to simplify JS development or DOM operations; it encapsulates commonly used functional codes (functions) in JS, provides a simple JS design mode, and optimizes HTML document operations, event processing, and animation design. , Ajax interaction, etc.

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.

jquery is a class library encapsulated in JavaScript.

In order to simplify JavaScript development or DOM operations, some JavsScript libraries were born.

JavaScript libraries encapsulate many predefined objects and utility functions.

It can help users create rich client pages with Web2.0 features that have difficult interactions, and is compatible with major browsers.

jQuery is another excellent JavaScript library after Prototype

jQuery philosophy: write less, do more.

jQuery encapsulates common JavaScript function codes, provides a simple JavaScript design pattern, and optimizes HTML document operations, event processing, animation design and Ajax interaction.

The jQuery library includes core libraries, UI, plug-ins, and jQuery Mobile modules.

With its powerful selectors, chain operations, and excellent browser compatibility, jQuery greatly simplifies operations such as accessing and updating HTML pages, DOM operations, event processing, and animation execution.

The purpose of jQuery design is "write Less, Do More", which means writing less code and doing more things.

The core features of jQuery can be summarized as follows: It has a unique chain syntax and a short and clear multi-functional interface; it has an efficient and flexible CSS selector, and can extend the CSS selector; it has convenient plug-in extensions Mechanism and rich plug-ins. jQuery is compatible with various mainstream browsers, such as IE 6.0, FF 1.5, Safari 2.0, Opera 9.0, etc.

jQuery version

• 1.xx.x version: compatible with almost all browsers currently on the market

• 2.xx.x version: Initially no longer compatible with IE browser, later changed to no longer compatible with IE6/7/8 version

• 3.xx.x version: Not compatible with IE6/7/8

Factory function

When the factory function is used as an entry point for jQuery operations, pass This function can realize functions such as locating page elements, packaging DOM objects into jQuery objects, and creating page elements.

Two ways to write the factory function:

• $()
• jQuery()

Explanation: The "$" symbol and The word "jQuery" has the same meaning, which is a convention of the jQuery core library.

window.jQuery = window.$ = jQuery;

Code:

        //DOM操作（返回DOM对象） - 获取页面中的按钮元素
        var but = document.getElementById('but1');
        // var but2 = document.getElementById('but2');
        console.log(but);


        /*
            jQuery操作 - 获取页面中的按钮元素
            jQuery() - 称为jQuery的工厂函数
              作用 - 该函数是jQuery的一个入口
                1.用于定位页面元素
              用法 - 另一种用法是'$()'
              返回值 - jQuery对象
        */
        var but = jQuery('#but');
        // var but2 = $('#but');
        console.log(but)

Effect:

##DOM object and jQuery object

jQuery object

The so-called jQuery object refers to an object encapsulated by a DOM object.

That is, the underlying logic of the jquery object is still the DOM object. The jQuery object is just encapsulated into a new object based on the DOM object, and provides a series of properties and methods

jQuery convention

In order to better distinguish the DOM Object, jQuery object, we agree to add a "$" in front of the object defined by jQuery. This is not mandatory.

 //jQuery操作 - 返回变量增加一个前缀“$”
        var $but = jQuery('#but');
        var $but = $('#but');

DOM object and jQuery object

1. Convert DOM object to jQuery object - factory function

	var but = document.getElementById('but1');
        //将DOM对象转换为jQuery对象 - 工厂函数
        var $but = jQuery(but);
        console.log($but);

2. Convert jQuery object to DOM object

jQuery object is an array-like object - jQuery object [index value]
• jQuery object provides the get(index) method - index represents the index value

• 	/*
              将jQuery对象转换为DOM对象
                  jQuery对象是一个类数组对象 - jQuery对象[索引值]
                  jQuery对象提供了get(index)方法 - index表示索引值
          */
  
          var but1 = $but[0];
          console.log(but1);
          var but2 = $but.get(0);
          console.log(but2);

【Recommended learning:

jQuery video tutorial, web front-end video】

The above is the detailed content of What is jquery a class library?. For more information, please follow other related articles on the PHP Chinese website!