JQuery is the longest-lived library in the world, and is used by 80% of the world’s websites. You can learn some of its best design ideas from studying jQuery, which are still used in many popular libraries today. Here are some of the most important design ideas I’ve learned about jQuery.

1. How does jQuery get elements

The basic design idea and usage of jQuery is to “pick an element and then do something with it”. The first step is to select an element and place it in a special constructor, jQuery(). – ‘). — `). — ‘(select expression)’

This selection expression can be a CSS selector or jquery-specific expression

  1. $(CSS selector)
$('#test') $('div. ClassName ') $('input[name=first ') // Select the input element whose name attribute is firstCopy the code
  1. $(jquery-specific expression)
$('div:first') // Select the odd row $('#myForm:input') // select the input element from the formCopy the code

2. How is jQuery chained

JQuery’s chain operation is to select an element and perform a series of operations on it, all of which can be linked together as a chain. For example: $(‘ # test). The find (‘ child1 ‘). The addClass () ‘red’. AddClass (‘ blue ‘)

The expanded version looks like this:

$('#test').find('.child1').addClass('red').child1 add a class named red to.child1 .addClass('blue') // Add a class named blue to.child1Copy the code

The essence and ingenuity of jQuery is that each step of the jQuery operation returns a single jQuery object, so different operations can be linked together.

JQuery also provides the.end() method to jump to the previous step

$('#test') // find('.child1') // select element.addClass('red') // add a class named red.end () to.child1 .addClass('blue') // Add a class named blue to #testCopy the code

3. How does jQuery create elements

JQuery creates a new element simply by passing it directly into the jQuery constructor.

$(' < div > Hello < / div > ') $(' < p > < / p > 'new p element) $(' < ul > < li class = "new" > new list item < / li > < / ul >')Copy the code

4. How does jQuery move elements

The design of jQuery provides two ways to manipulate element movements. One is to move the element directly, and the other is to move the element to where we want it to be.

  1. The first way is to use.insertAfter()To move a div element after a p element:

$('div').insertAfter($('p'));

  1. The second way is to use.after()Add the p element to the front of the div element:

$('p').after($('div'));

On the surface, there is no difference between the two methods, except that the order is different, one is the div element after the P element, the other is the p element before the div element. In fact, the difference between the two is the return value. The first method returns a div element, and the second method returns a P element. We can choose which method to use according to the actual situation. There are four ways to use this mode of operation:

  1. .insertAfter()and.after()Insert elements from behind, outside of existing elements
  2. insertBefore()and.before()Insert the element from the front outside the existing element
  3. .appendTo()and.append()Inside an existing element, insert the element from behind
  4. .prependTo()and.prepend()Insert the element from the front outside the existing element

5. How does jQuery modify element attributes

One of the most common operations we do with web elements is to evaluate and assign them, which is to modify the attributes of the element. In jQuery, getters and setters are combined into one. Whether to evaluate or assign depends on the parameters of the function. Such as:

$(' h1). The text (' Hello ') / / it is to give the h1 assignment $(' h1). The text () / / text () no value, the value is for h1Copy the code

The functions for modifying element attributes are as follows: Note that $div may correspond to a div element

  1. $div.text()Read and write text content
  2. $div.html()Read and write HTML content
  3. $divattr('title',??)— Read and write properties
  4. $div.css({color:'red'})— Read-write style. //$div.styleIt would be better
  5. $div.addClass('blue')/$div.removeClass()/$div.hasClass()Add, delete, and traverse properties
  6. $div.on('click',fn)Add listening events
  7. $div.off('click',fn)— Delete listening events