JQuery is currently the most widely used library in the world, used by more than 80% of websites worldwide. Released in 2006, it is currently the longest-lived front-end library. In this article, we will introduce the design pattern of jQuery.

Through the study of jQuery Chinese documents and Ruan Yifeng’s “jQuery Design Ideas”, and through the DOM library to implement simple jQuery design ideas, I can understand that jQuery is an efficient, concise and rich JavaScript tool library. It provides an API that is easy to use and compatible with many browsers.

Although jQuery is easy to get started, it is not easy to master.

Let’s take a look at some of the notes about jQuery.

  1. JQuery fetching elements
  2. JQuery chain operation
  3. JQuery create element
  4. JQuery moving elements
  5. JQuery modifies the attributes of elements

JQuery fetching elements

The basic idea and usage of jQuery is to “select a web element and then manipulate it.”

The first step in using jQuery is to put a selection expression into the constructor jQuery()($(), the core API of jQuery), and get the selected element.

Expressions can be CSS selectors:

$(body) // Select the body element

$('#testId') // Select the webpage element whose ID is testId

$('div.myClass') // Select the div element whose class is myClass

$('input[name=first]') // Select the input element whose name attribute is equal to first
Copy the code

It can also be a jquery-specific expression:

$('input:radio') // Find all radio buttons

$('a:first') // Select the first a element
Copy the code

The constructor finds the set of elements that return a match, and gets the elements from the set operation:

$('#testId').get(0) // Get the first element of testId
Copy the code

JQuery chain operation

In the previous step, we used the chain operation to get an element from a collection of elements. Now let’s look at jQuery’s chain call

$('div').text('hi').addClass('red').animate({left: 100})
Copy the code

$(selector) is used to get the corresponding elements, but it does not return them. Instead, it returns a jquery-constructed object that contains an API to manipulate these elements. In these apis, each step of the jQuery operation returns a jQuery object, so different operations can be linked together.

Additionally, jQuery provides the.end() method

$('div')
    .find('h3')
    .eq(2)
    .html('hello')
    .end() // Step back to all h3 elements selected
    .eq(0) // Select the first element
    .html('World')
Copy the code

JQuery create element

Creating an element is as simple as passing the new element directly into the jQuery constructor.

const $div = $('
      

        New content 
      
')
Copy the code

In addition to passing in a selector to find an element, the constructor can also pass in an element label string for element creation. This is done through JS function overloading. A function can accept different arguments. The specific code is as follows

Function overloading

$(fn)
$('div')
$(div)
$($(div))
$('span'.'#scope1')
Copy the code

JQuery moving elements

JQuery provides two sets of methods for manipulating the position of elements in a web page. One way is to move the set of elements matched by jQuery() directly, the other way is to move other elements so that the target element is where we want it to be.

Let’s continue with the div element created in the previous step. We move it after the body element.

The first method is to use.appendto () to move the div after the body

$div.appendTo(document.body)
Copy the code

The second method is.append(), which inserts the body before the div

$(body).append($div)
Copy the code

The effect of the two methods is the same, but the difference is the perspective of operation. Another important difference is that they return a different set of elements. The first method returns a div element and the second method returns a body element.

There are four groups of this type of operation.

  • .insertafter () and.after() insert elements from behind outside the element
  • .insertbefore () and.before() outside the element, insert the element from the front
  • .appendto () and.append() insert elements from behind inside the element
  • .prependto () and.prepend() inside the element, insert the element from the front

JQuery modifies the attributes of elements

Finally, we can use the API to modify the attributes of the matched elements.

  • .text() Reads and writes the text content of the element
  • .html() reads and writes the HTML content of the element
  • .attr() reads and writes elements’ attributes
  • .css() reads the value of the CSS property of the first element or sets the CSS property of each element
  • .addClass() adds the style class name to the matching set of elements
  • .on() binds one or more events to matched elements
  • .off() Removes events

Although few new projects are being developed using jQuery, its concise API style and readability of code are worth learning for programmers.