В чем отличие написания этих функций?

@morda77 · Регистрация: 22.12.2012

Author24 — интернет-сервис помощи студентам

Здравствуйте! В чем отличие между:

Javascript

1	alert("There are " + $("li").length + "<li>");

и:

Javascript

1 2	var elems = $('li').get(); alert("There are " + elems.length + "<li>");

И почему строка:

Javascript

1	alert("There are " + elems.length + "<li>");

не работает без:

Javascript

1	var elems = $('li').get();

?

Спасибо.

@amr-now · 17.12.2020, 06:25

Здравствуйте!
В первом случае вернет количество элементов коллекции jQuery.
Во втором случае вернет количество элементов настоящего массива Array.

Сообщение от morda77

И почему строка:

Javascript

1	alert("There are " + elems.length + "<li>");

не работает без:

Javascript

1	var elems = $('li').get();

Потому что сначала нужно в переменную elems положить ссылку на настоящий массив, у которого каждый элемент массива является HTML-элементом.
Метод get() как раз из коллекции jQuery возвращает настоящий массив Array.

Without a parameter, .get() returns an array of all of the elements:

https://api.jquery.com/get/#get

@morda77 · 18.12.2020, 03:45 **[ТС]**

amr-now,
Спасибо. А что такое коллекция jQuery? И что подразумевается под массивом, если вернуть надо просто посчитанное количество li на странице?

@amr-now · 18.12.2020, 06:15

Сообщение от morda77

А что такое коллекция jQuery?

Наборы jQuery
Обратите внимание на переменную elems:

Javascript

1	var elems = $('.www');

В нее запишется группа выбранных элементов, так называемый набор элементов jQuery.

Вы можете одновременно менять все элементы набора jQuery (в отличие от querySelectorAll никаких циклов не требуется).

В принципе, переменная elems чаще всего и не нужна, так как jQuery позволяет применять полезные функции прямо к набору, в виде методов.

К примеру, вот так мы получим все элементы с классом .www и поставим им красный цвет:

Javascript

1	$('.www').css('color', 'red');

Почти все методы jQuery возвращают набор, к которому этот метод был применен, что позволяет выстраивать цепочки методов любой длины.

Давайте получим все элементы с классом .www, поставим им красный цвет, и сменим их текст на 'новый текст':

Javascript

1	$('.www').css('color', 'red').html('новый текст');

http://old.code.mu/books/javascript/jquery/

То есть после знака доллара внутри круглых скобок чаще всего будет строка CSS-селектора. Доллар и круглые скобки вернут коллекцию (список) HTML-элементов, которая похожа на document.querySelectorAll("div")

Но эта коллекция не то же самое, что и массив Array []

Сообщение от morda77

И что подразумевается под массивом

https://learn.javascript.ru/array

Сообщение от morda77

вернуть надо просто посчитанное количество li на странице

Чтобы получить свойство length у jQuery-коллекции, её не нужно преобразовывать в Array.
Свойство length у коллекции jQuery сразу есть.
$("li").length

@morda77 · 18.12.2020, 18:09 **[ТС]**

amr-now,
Спасибо. А переменная elems это какая-то встроенная в Jquery переменная или это просто совпадение, что переменную с этим именем используют авторы разных учебников?

@amr-now · 18.12.2020, 18:32

morda77, elems - сокращение от "elements" (элементы, составные части коллекции)
В переменную записывается ссылка на объект с типом jQuery. Объект невидимо болтается в оперативной памяти компьютера и имеет числовой адрес.
Ссылка - числовой адрес, который кладётся в переменную.

@morda77 · 19.12.2020, 18:03 **[ТС]**

Спасибо. Я кажется начинаю понимать. В первом случае машина берет все li из библиотеки (коллекции) Jquery, а во втором со страницы? Если так, то как в первом случае машина понимает, сколько li на странице, если она обращается не к странице, а к библиотеке Jquery? В каком фрагменте кода происходит подсчет?
Или я неправильно понимаю?

@amr-now · 19.12.2020, 18:21

morda77, коллекция jQuery состоит из ссылок на настоящие HTML-элементы.
В любом случае сами <li> находятся на странице. Они никуда не копируются.
Коллекция содержит адреса этих объектов <li> в оперативной памяти.

querySelectorAll тоже собирает коллекцию ссылок на <li>, которые на странице. Элементы из текста html при разборе DOM-дерева превращаются в объекты в оперативной памяти.

@morda77 · 19.12.2020, 19:12 **[ТС]**

amr-now, спасибо. А что тогда собой представляет коллекция Jquery? Коллекция это часть всей библиотеки или или библиотека=коллекция? Как эта коллекция выглядит и устроена, говоря человеческим языком, на примере ассоциаций с чем-то простым и осязаемым?
Просто мне пока не очень понятны обоснованность ее существования и взаимодействие с элементами страницы.

@amr-now · 19.12.2020, 22:46

morda77, заново прочитайте ещё раз все сообщения в этой теме и по ссылкам тоже почитайте.

@morda77 · 20.12.2020, 04:41 **[ТС]**

amr-now, 6 раз упоминается "коллекция", но нигде не упоминается, что именно такое коллекция Jquery.

@amr-now 6492 / 3903 / 2005 Регистрация: 14.06.2018 Сообщений: 6,781
	19.12.2020, 22:46	10
	morda77, заново прочитайте ещё раз все сообщения в этой теме и по ссылкам тоже почитайте. 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,469
	20.12.2020, 04:41 [ТС]	11
	amr-now, 6 раз упоминается "коллекция", но нигде не упоминается, что именно такое коллекция Jquery. 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,469
	18.12.2020, 03:45 [ТС]	3
	amr-now, Спасибо. А что такое коллекция jQuery? И что подразумевается под массивом, если вернуть надо просто посчитанное количество li на странице? 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,469
	18.12.2020, 18:09 [ТС]	5
	amr-now, Спасибо. А переменная elems это какая-то встроенная в Jquery переменная или это просто совпадение, что переменную с этим именем используют авторы разных учебников? 0

@amr-now 6492 / 3903 / 2005 Регистрация: 14.06.2018 Сообщений: 6,781
	18.12.2020, 18:32	6
	morda77, elems - сокращение от "elements" (элементы, составные части коллекции) В переменную записывается ссылка на объект с типом jQuery. Объект невидимо болтается в оперативной памяти компьютера и имеет числовой адрес. Ссылка - числовой адрес, который кладётся в переменную. 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,469
	19.12.2020, 18:03 [ТС]	7
	Спасибо. Я кажется начинаю понимать. В первом случае машина берет все li из библиотеки (коллекции) Jquery, а во втором со страницы? Если так, то как в первом случае машина понимает, сколько li на странице, если она обращается не к странице, а к библиотеке Jquery? В каком фрагменте кода происходит подсчет? Или я неправильно понимаю? 0

@amr-now 6492 / 3903 / 2005 Регистрация: 14.06.2018 Сообщений: 6,781
	19.12.2020, 18:21	8
	morda77, коллекция jQuery состоит из ссылок на настоящие HTML-элементы. В любом случае сами <li> находятся на странице. Они никуда не копируются. Коллекция содержит адреса этих объектов <li> в оперативной памяти. `querySelectorAll` тоже собирает коллекцию ссылок на <li>, которые на странице. Элементы из текста html при разборе DOM-дерева превращаются в объекты в оперативной памяти. 0

@morda77 20 / 20 / 7 Регистрация: 22.12.2012 Сообщений: 2,469
	19.12.2020, 19:12 [ТС]	9
	amr-now, спасибо. А что тогда собой представляет коллекция Jquery? Коллекция это часть всей библиотеки или или библиотека=коллекция? Как эта коллекция выглядит и устроена, говоря человеческим языком, на примере ассоциаций с чем-то простым и осязаемым? Просто мне пока не очень понятны обоснованность ее существования и взаимодействие с элементами страницы. 0