Как повторить методы jQuery, например find(), closest() и т.д., на чистом JavaScript? Есть ли где-нибудь полные соответствия?

Question

[Кирилл]

Хотел бы найти полные соответствия методам jQuery, написанные на нативном чистом JavaScript. К примеру, метод parent() jQuery на чистом JavaScript такой.

Есть ли какие-нибудь сайты, где приводятся такие соответствия? Возник вопрос не использовать jQuery при разработке, а воспользоваться чистым JavaScript.

Спасибо!

Answer 1

[Сергей Соколов]

Прочитать исходники jQuery и вытащить только нужные методы.

Например closest() определён в traversing.js:

closest: function( selectors, context ) {
		var cur,
			i = 0,
			l = this.length,
			matched = [],
			targets = typeof selectors !== "string" && jQuery( selectors );

		// Positional selectors never match, since there's no _selection_ context
		if ( !rneedsContext.test( selectors ) ) {
			for ( ; i < l; i++ ) {
				for ( cur = this[ i ]; cur && cur !== context; cur = cur.parentNode ) {

					// Always skip document fragments
					if ( cur.nodeType < 11 && ( targets ?
						targets.index( cur ) > -1 :

						// Don't pass non-elements to Sizzle
						cur.nodeType === 1 &&
							jQuery.find.matchesSelector( cur, selectors ) ) ) {

						matched.push( cur );
						break;
					}
				}
			}
		}

		return this.pushStack( matched.length > 1 ? jQuery.uniqueSort( matched ) : matched );
	},

Отсюда ещё надо распутать зависимости jQuery.find.matchesSelector() и jQuery.uniqueSort()

Answer 2

[RubaXa]

Чистый JS и его аналоги в jQuery

const nodeList = document.querySelectorAll('...'); // .find(...).toArray()
const element = document.querySelector('.button'); // .find().first()[0];
const {parentNode} = element; // .parent()[0]
const closestElement = element.closest('...'); // .closest()[0]
element.apeend(...); // .append(...)
// ну и так далее, смотрите DOM4 API

Только важно понимать, что результат `document.querySelectorAll !== $(...).find`, есть нюанс

Answer 3

[dom1n1k]

Если нужно совершенно полное соответствие - нет, это невозможно.
Ну, точнее возможно, конечно же, но тогда придется фактически воспроизвести jQuery.
Если достаточно упрощенно-приблизительного - выше дали хорошие ссылки.