Member 13610262 Ответов: 3

Что означает $ в javascript?


У меня есть этот код, который работает (кто-то написал его для меня), но $ в нем ускользает от меня. Я читал в интернете, что это идентификатор, но в моем случае он не работает как идентификатор. Я заменяю знак $ на что-нибудь другое, следующая функция не работает. Вот этот код:

var modal = document.getElementById('modal');

var img = document.getElementsByClassName('.image');
var modalImg = $("#modal-img");
var captionText = document.getElementById("modal-text");
$('.image').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    captionText.innerHTML = this.alt;
});

var span = document.getElementsByClassName("close-x")[0];

span.onclick = function() {
  modal.style.display = "none";


Спасибо

Что я уже пробовал:

Я пробовал заменить $ такими вещами, как getElementById, любой другой идентификатор и т. д.

Karthik_Mahalingam

вы хотите конвертировать все в jquery или чистый javascript ?

Member 13610262

Как насчет того, чтобы все было в jQuery? Как выглядит этот код? Спасибо за ваш ответ.

Karthik_Mahalingam

проверьте решение

3 Ответов

Рейтинг:
21

David_Wimbley

Короче говоря, ваш код выглядит как jquery, знак доллара используется jquery. На самом деле вам не нужно смешивать jquery и vanilla javascript (код document.getElementById), вы должны выбрать маршрут, по которому хотите пойти, и преобразовать весь код в него. Учитывая, что он уже написан в jquery, мне кажется (мне) бессмысленным пытаться переработать все это в простом javascript.

jQuery[^]

Быстрый поиск в Google дает следующие:

соглашения об именах - может ли кто-нибудь объяснить знак доллара в Javascript? - переполнение стека[^]

$ вход в javascript[^]


Member 13610262

Спасибо за ваш ответ. Итак, как я могу преобразовать элемент get по ID-коду в jQuery? Будет ли работать что-то вроде функции $(x) {return document.getElementById(x);}?

David_Wimbley

Так что я не понимаю вашего вопроса. Почему бы вам просто не использовать jquery? Похоже, вы пытаетесь создать функцию jquery, чтобы использовать простые селекторы javascript для возврата элемента.

Почему бы просто не сохранить свой код jquery? Этот код, о котором вы спрашиваете, намеревается сделать то же самое, что и $(".modal"). document.getElementByClassName(".modal") будет простой версией javascript (или что-то в этом роде).

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

Если вы делаете это для обучения, я думаю, вам нужно выбрать путь и придерживаться его. Пытаясь использовать jquery в качестве оболочки вокруг простого javascript (что уже делает jquery), вы просто создадите себе огромную головную боль.

Member 13610262

Я вижу. Я довольно новичок в Javascript и еще не изучил jQuery, поэтому мне интересно, в чем разница между ними. Итак, прямо сейчас я использую как базовый Javascript, так и jQuery, верно? Или это версия кода jQuery? Если да, то почему некоторые селекторы правильно написаны в формате .js (document.getElementById и т. д.), а другие написаны знаками доллара? Я понимаю, что все усложняю, я даже этого не знал. Не могли бы вы просто дать мне код, который я вам показал, но полностью с помощью jQuery, чтобы я мог сравнить и понять разницу?

David_Wimbley

Похоже, что Karthik Bangalore предоставил вам свой код в виде прямого jquery.

Но чтобы прояснить некоторые другие ваши вопросы.


- Мне интересно, в чем разница между ними. "
На базовом уровне jquery-это оболочка вокруг javascript, которая облегчает написание большого количества кода javascript. Для получения дополнительной информации об этом я предлагаю вам обратиться к ссылкам, которые я предоставил. Быстрый поиск в google скажет вам больше того, что вы ищете, чем то, что я могу сидеть здесь и печатать.

- Итак, прямо сейчас я использую как базовый Javascript, так и jQuery, верно?"

В вашем примере кода и последующем вопросе-да.

- Или это версия кода jQuery?"

Смотреть выше

"Если да, то почему некоторые селекторы правильно написаны в стиле .js (document.getElementById и т. д.), а другие написаны знаками доллара?"

Я не знаю, почему код был написан так, как он был, но знак доллара с селекторами, которые вы видите, являются эквивалентом jquery document.getElementById. Экс: $("#MyTextBox") является эквивалентом ocument.getElementById("MyTextBox").

- Не могли бы вы просто дать мне код, который я вам показал, но полностью с помощью jQuery, чтобы я мог сравнить и понять разницу?"

См. второе решение, предоставленное Karthik

Member 13610262

Большое вам спасибо; я спрошу, хотя код работает, но в консоли есть ошибка, которая говорит, что Uncaught ReferenceError: $ не определен в finissants.js:1 что это значит?

Member 13610262

Да, и спасибо, что уделили мне время. Это очень полезно для новичка вроде меня.

Рейтинг:
20

Karthik_Mahalingam

Цитата:
Как насчет того, чтобы все было в jQuery? Как выглядит этот код?

var modal = $('#modal');
       var img = $('.image');
       var modalImg = $("#modal-img");
       var captionText = $("#modal-text");
       img.click(function(){
           modal.show();
           var newSrc = this.src;
           modalImg.attr('src', newSrc);
           captionText.html( this.alt);
       });

       var span = $(".close-x");

       span.click(  function() {
           modal.hide();
       }


обратитесь к этим
эффекты jQuery - скрыть и показать[^]
селекторы jQuery[^]
метод jQuery html() [^]
метод jQuery attr() [^]


Member 13610262

Большое спасибо. Я упомяну, что код отсутствует ); в конце концов, так как это была ошибка, пойманная консолью. Тем не менее, код работает отлично. Могу ли я спросить, почему консоль говорит, что $ не определен (uncaught referenceError)?

Karthik_Mahalingam

Вам нужно будет добавить ссылку на jquery в тег head

Member 13610262

Черт возьми, ты молодец. Большое спасибо.

Karthik_Mahalingam

Добро пожаловать

Member 13610262

Конечно.

Позвольте мне побеспокоить вас в последний раз. Что означают эти строки?
var newSrc = this.src;
modalImg.attr('src', newSrc);
captionText.html( это.alt);

Например, я знаю, что var img = $('.image'); позволяет мне выбрать éimage и назвать его "img" в моем файле, но какой смысл в этих строках? Они дают новый источник для изображения? Что? В принципе, зачем они мне нужны и что они делают?

Karthik_Mahalingam

Проверьте ссылки, размещенные в решении.

Karthik_Mahalingam

    var modal = $('#modal'); // ID Selector
        var img = $('.image');  // Class selector 
        var modalImg = $("#modal-img");  // ID selector 
        var captionText = $("#modal-text");// ID selector 
        img.click(function(){  // click function delegate
            modal.show();   // jquery function to show 
            var newSrc = this.src;  // get src attribute from anchor tag
            modalImg.attr('src', newSrc);  // set src for new image 
            captionText.html( this.alt);  // add text to the modal-text control from the iamge alt attribute
        });

        var span = $(".close-x");  // class selector

        span.click(  function() {   // click event 
            modal.hide(); // jquery function to show 
        }

Member 13610262

Спасибо тебе за это. Не могли бы вы просто сказать мне, какова роль "этого" в строке кода: var newSrc = this.src;

Я имею в виду, что представляет собой этот файл. src? Исходный источник изображения? Если да, то почему я не могу просто поставить src? Почему мне нужно добавить ключевое слово "это"?

Karthik_Mahalingam

Это означает, что текущий объект внутри события click тега image.. так что это объект image

Если вы видите типичный тег изображения вы можете увидеть src и alt атрибут для указания источника изображения и альтернативного текста

Member 13610262

А что означает .src? Я имею в виду, как " это " знает, какой источник следует учитывать?

Karthik_Mahalingam

Src означает исходный атрибут тега изображения..
Это используется внутри события щелчка изображения, так что это изображение.. такое же, как и другие управляющие события

Рейтинг:
2

Member 13902311

$ предназначен для ссылки на jQuery , в jquery, когда вы хотите добавить какое-то событие в код, вы обычно делаете это так :
jquery("элемент").event(функция для определения);

для экономии времени при написании кода команда jquery решила сделать его таким:
$("элемент").event(функция для определения);

Итак, $ = = jquery


Dave Kreskowiak

Спрашивали и отвечали 6 месяцев назад с ответами гораздо более обширными, чем ваши.