Home  >  Article  >  Web Front-end  >  Is jquery a library?

Is jquery a library?

青灯夜游
青灯夜游Original
2022-11-03 18:03:551875browse

jquery is a library. jquery is an excellent JavaScript code library. It is a class library developed to simplify JS development or DOM and other operations; it encapsulates commonly used functional codes (functions) of JS, provides a simple JS design pattern, and optimizes HTML. Document operation, event processing, animation design, Ajax interaction, etc.

Is jquery a library?

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

jQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (framework) after Prototype. It was released by John Resig in January 2006. The purpose of jQuery's design is "write less, do more", which means writing less code and doing more things. It encapsulates common JavaScript function codes, provides a simple JavaScript design pattern, and optimizes HTML document operations, event processing, animation design and Ajax interaction.

jquery is a class library encapsulated in JavaScript. It refers to an encapsulated JavaScript function library, a lightweight JavaScript library that "writes less and does 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 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 language features:

1. Quickly obtain document elements

jQuery’s selection mechanism is built on the Css selector , which provides the ability to quickly query elements in DOM documents, and greatly enhances the way to obtain page elements in JavaScript.

2. Provide beautiful page dynamic effects

jQuery has a series of built-in animation effects, which can develop very beautiful web pages. Many websites use jQuery’s built-in effects, such as fade-in Dynamic special effects such as fade out and element removal.

3. Create AJAX non-refresh web pages

AJAX is the abbreviation of asynchronous JavaScript and XML. It can develop very sensitive non-refresh web pages, especially when developing server-side web pages, such as PHP websites. , need to communicate with the server back and forth. If AJAX is not used, the web page has to be refreshed every time the data is updated. However, after using AJAX special effects, the page can be partially refreshed to provide dynamic effects.

4. Provide enhancements to the JavaScript language

jQuery provides enhancements to basic JavaScript structures, such as element iteration and array processing.

5. Enhanced event handling

jQuery provides various page events, which can prevent programmers from adding too much event handling code in HTML. Most importantly, its event handling The browser eliminates various browser compatibility issues.

6. Change the content of the web page

jQuery can modify the content of the web page, such as changing the text of the web page, inserting or flipping the web page image. jQuery simplifies the way that JavaScript code needs to be processed.

The reason why JQuery is so excellent is that it integrates many excellent features, mainly including the following features:

  • ·Utilization CSS selectors provide fast element search behavior.

  • ·Provides an abstraction layer to standardize various common tasks and can solve compatibility issues of various browsers.

  • ·Simplify complex code and provide serial programming mode, which greatly simplifies the operation of the code.

There are three basic ways to use jQuery:

1. Execute after loading the page:

Normally when we use preloading we have to bind the method to onload():

<script type="text/javascript">
	document.onload = function () {
            // 这个事件在页面加载完成之后加载的
        }
</script>

But in jQuery we only need to use $() to load the method

    <script type="text/javascript">
        $.ready(function () {

        });
        $(function () {
            //这两个都可以
            console.log("页面加载");
        });
        //在$()中的函数可以自动加载onload函数
    </script>

2. Through the tag selector string, return the jQuery wrapper line of the tag object

In the DOM object we use:

    <script type="text/javascript">
        var div = document.getElementsByTagName("div")[0];
    </script>

to select a tag.

But in jQuery:

    <script type="text/javascript">
        var div = $("div");
    </script>

p here is an array

3. The third method converts DOM objects into jQuery objects

We can convert the DOM object into a jQuery object:

    <script type="text/javascript">
        var div1 = document.getElementsByTagName("div")[0];
        var jqy = $(div1);
    </script>

Here we have the method of the DOM object in jqy.

Total code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
    <!--选择器 -->
        div{
            /*重定义标签选择器*/
            background: #000;
        }
    </style>
</head>
<body>
    <div>Hello!</div>
    <script src="js/jquery-3.4.1.slim.min.js"/>
    <script type="text/javascript">
        document.onload = function () {
            // 这个事件在页面加载完成之后加载的
        }
        $.ready(function () {

        });
        $(function () {
            //这两个都可以
            console.log("页面加载");
        });//可以自动加载onload函数
        /*
        * 2.通过标签选择器字符串,返回标签对象的的jQuery包装对线
        * */
        //在DOM对象中,我们使用
        // var div = document.getElementsByTagName("div")[0];
        //选择的是div的集合
        var div = $("div");
        div.css("","");//两个值,前面的是名称,后面是值
        /*
        * 3.第三种方法把DOM对象转换成jQuery对象
        * */
        var div1 = document.getElementsByTagName("div")[0];
        var jqy = $(div1);
    </script>
</body>
</html>

[Recommended learning: jQuery video tutorial, web front-end video]

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn