The chain style

Also called jQuery style

Window.jquery () is a global function we provide

Special function jQuery

JQuery (selector) is used to get the corresponding elements, but it does not return them.

Instead, it returns an object, called a jQuery constructed object, that can manipulate the corresponding element.

Is jQuery a constructor?

is

Because the jQuery function does construct an object

not

Because you don’t need to write new jQuery() to construct an object

All the constructors we’ve seen before are new, so var obj = new Object()

conclusion

JQuery is a constructor that does not require new

JQuery is not a constructor in the normal sense

This is because jQuery uses some tricks

The term

The jQuery object

The jQuery object refers to the object constructed by the jQuery function, which is the API

JQuery object is not jQuery object

For example,

Object is a function. Object represents the Object constructed by Object

Array is a function, and the Array object/Array object represents the constructed object of Array

Function is a Function, and Function objects/Function objects represent the objects constructed by Function

Writing jQuery

The source code

Naming style

The following code is misleading

const div = $('div#test')

We might mistakenly think div is a DOM, but div is actually an API object constructed by jQuery

To such

const $div = $('div#test')

$div.appendChild does not exist because it is not a DOM object

$div.find exists because it is a jQuery object

The chain style

increase

$('<div><span>1</span></div>')

The return value is not a new element, but an API object

$('<div><span>1</span></div>').appendTo(document.body)

AppendTo puts the new element into another element, as above

conclusion

Feel like the DOM is invisible. You don’t need to know any details of the DOM, just use a neat API

A good encapsulation, can let the user completely unaware of the internal details, only through closures

What if you want to know the details

For example 1
const $div = $('div#test')
Copy the code

$div is not a DOM object, but an API object constructed by jQuery

How do I get div from $div?

$div.get(0) to get the first0An element//div
$div.get(1) to get the first1An element//undefined
$div.get(2) to get the first2An element//undefined$div.size() gets the number of elements. $div.length also gets the number of elements//[div]
Copy the code
For example 2
const $div = $('.red') // Suppose there are 3 div.red
Copy the code

$div is not a DOM object, not an API object constructed by jQuery

How do I get div from $div?

The same

$div.get(0) to get the first0An element//div
$div.get(1) to get the first1An element//div
$div.get(2) to get the first2An element//div$div.size() gets the number of elements. $div.length also gets the number of elements//[div,div,div]
Copy the code

$div.get(0)It’s too much trouble. It’s easier to use$div[0]

Let’s go back to the chain style

check
$('#xxx') // The return value is not an element, but an API object
$('#xxx').find('.red') // Find the.red element in # XXX
$('#xxx').parent() // Get a new dad
$('#xxx').children() // Get a son
$('#xxx').siblings() // Get brothers
$('#xxx').index() // Get top rank (starting from 0)
$('#xxx').next() // Get a brother
$('#xxx').prev() // Get brother
$('.red').each(fn) // Iterate and fn each element
Copy the code
increase
$('body') / / get the document body
$('body').append($'<div>1</div>') // Add a younger son
$('body').append('<div>1</div>') / / more convenient
$('body'). The prepend (div or $div)// Add the eldest son
$('#test'.) after (div or $div)// Add a brother
$('#test'). Before (div or $div)// Add a brother
Copy the code
delete
$div.remove()
$div.empty()
Copy the code
change
$div.text(?) // Read and write the text content
$div.html(?) // Read and write HTML content
$div.attr('title',?) // Read/write attributes
$div.css({color: 'red'}) //$div. Style is better, but jQuery uses CSS
$div.addClass('blue')/removeClass/hasClass // Add/remove/check whether there is one
$div.on('click',fn)
$div.off('click',fn)
Copy the code

Note: $div may correspond to multiple div elements

subsequent

Using the prototype

Put all the common properties (functions) in $.prototype

$.fn=$.prototype // The name is too long

Then make api.__proto__ point to $fn

Design patterns

What design patterns do jQuery use

There is no new constructor; there is no name for this pattern

$(supports multiple arguments), this pattern is called overloading

There is no name for this pattern, which hides details with closures

$div.text() is both read and write, getter/setter

$. Fn is an alias for $

JQuery uses different code for different browsers. These are called adapters

What are the design patterns?

A design pattern is a name for common code