Переменная JavaScript равна jQuery селектор создает открытые и закрывающие теги.Зачем?

Question

Пожалуйста, будь милым. Мой первый вопрос здесь. Я изучаю JavaScript и JQuery. Google не сильно помогает, потому что я не знаю, как задать правильный вопрос. Нужно вмешательство человека, пожалуйста. Я пытаюсь понять, что происходит с этим простым кусочком кода:

var myVar = $("<p>");

Это создает открывающий и закрывающий тег <p>, и я не понимаю, почему.

Далее я добавлю этот абзац к существующему элементу #myDiv. Например:

$("myDiv").html(myVar); приводит к следующему:

<div id="myDiv"><p></p></div>

Продолжение ...

$("myDiv").html(myVar.text("A string for the paragraph"));

Результаты:

<div id="myDiv"><p>A string for the paragraph</p></div>

Почему этот первый фрагмент создает открывающий и закрывающий тег <p>? Как это называется?

Answer 1

Это правильный вопрос, который нужно задавать, пока вы учитесь, и это хорошо для вас!При этом один SO-пост не сможет ответить на него полностью, по крайней мере, так, как я думаю вы спрашиваете об этом, но я (мы) предоставлю вам все, что могу.

Начнем с того, что JavaScript взаимодействует с HTML через Document Object Model (DOM).Это все равно что взять весь HTML-документ и разрезать его на отдельные элементы, теги, атрибуты и т. Д., А затем построить представление этого документа в «простом» JavaScript как (очень большой) Object.Имя переменной, присвоенной этому объекту, равно document.Этот специальный объект имеет всевозможные магические свойства и методы (функции), которые можно использовать для чтения и обновления любого фрагмента DOM (который в конечном итоге переводится в HTML, который вы видите в браузере).

What I 'описанное выше не имеет ничего общего с jQuery, и все эти манипуляции могут быть выполнены с простым JavaScript (например, ответ Джека Бэшфорда).Однако из-за того, как браузеры и другие веб-технологии развивались на протяжении многих лет, многие «ошибки» существуют (или когда-то существовали), когда дело доходит до выполнения любой из этих вещей в «простом» JavaScript.С исторической точки зрения jQuery является невероятно важным инструментом, поскольку он предоставляет «стандартный» способ написания очень прямого кода для выполнения всего этого чтения или манипулирования DOM, а библиотека jQuery гарантирует, что все «ошибки» были исключены.

Итак, что такое jQuery (то есть в коде)?Ну, на это может быть много технических ответов, и один важный технический ответ заключается в том, что это Объект, потому что в JavaScript (почти) ВСЕ - это Объект .Однако давайте сосредоточимся на рассматриваемом вопросе и предоставленном вами коде:

$("<p>");

Здесь знак доллара - это jQuery (или переменная, указывающая на объект jQuery).Следующие скобки указывают, что объект jQuery называется как функция.Это все равно, что сказать в коде: «сделайте jQuery с этой строкой символов: '<p>'».Делая шаг назад, полный оператор

var myVar = $("<p>");

говорит, что "эта переменная 'myVar' теперь указывает на результаты того, что делает jQuery с '<p>', даст нам. "

" Волшебная "вещь при написании в jQuery заключается в том, что синтаксис почти всегда ощущается одинаково (и дает ему интуитивное чувство).

1. Возьмите объект jQuery. Обычно это переменная $, но jQuery также будет работать.

2. Вызов функции ($()). Бывают случаи, когда вы этого не делаете, например запросы ajax, но это отдельная тема и пример использования.

3. Предоставьте ему любой тип селектора ($('#myDiv')), - это способ ссылки на конкретные элементы HTML на основе их свойств и местоположения в документе (здесь мы ищем конкретный элемент на основе его id).

4. Работа с результатом ($('#myDiv').html(...etc))

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

В последнем примере мы получим ссылку на элемент #myDiv, для которого мы затем вызовем другую функцию (.html()), котораябудет либо читать, либо обновлять содержимое этого HTML-элемента.

В случае строки, о которой вы специально спрашивали, синтаксис, используемый для «выбора» тега «p», будет интерпретироваться jQuery, чтобы не искать все элементы «p» в документе (этот синтаксис будет $("p")), но лучше создать один новый элемент 'p' и сохранить его в памяти как объект jQuery, который указывает на этот вновь созданный элемент.Узнайте больше об этом синтаксисе и его возможностях здесь .

Что ж, надеюсь, это было полезно.Я, конечно, любил писать, и даже сам кое-чему научился.

Answer 2

Это просто более лаконичный метод этого в чистом JavaScript:

var myVar = document.createElement("p");

И это относится к jQuery так:

var myVar = $("<p></p>");

И потому что это jQuery, и он получает большеи более кратко, это в конечном счете становится:

var myVar = $("<p>");