Можно ли смешивать JQuery и Javascript?

Question

Мне интересно, могу ли я использовать запрос и javascript вместе, чтобы я мог выбрать элемент по классу с помощью javascript, а затем использовать javascript для работы над этим элементом. Извините, если это не имеет смысла. Ниже приведен пример:

$('.nav_flag').src = "images/flags/"+userCountryLower+".gif"; 

Будет ли это работать, если нет, то каким образом я могу получить элемент по классу с помощью обычного javascript. Благодаря!

EDIT: Я знаю, что JQuery является JavaScript, но мне было интересно, если я мог бы смешивать JQuery селекторы и JavaScript «controller'-за потери лучшего слова

Answer 1

Чтобы ответить на ваш вопрос, как спросил, есть есть несколько способов взять объект jQuery, т. е., то, что возвращается $('some selector'), и получить ссылку на базовый элемент (ы) DOM.

Вы можете получить доступ к отдельным элементам DOM, как элементы массива:

// update the src of the first matching element: 
$(".nav_flag")[0].src = "images/flags/"+userCountryLower+".gif"; 

// if you're going to access more than one you should cache the jQuery object in 
// a variable, not keep selecting the same thing via the $() function: 
var navFlgEls = $(".nav_flag"); 
for (var i = 0; i < navFlgEls.length; i++) { ... } 

Но вы бы не петлю вручную через элементы, когда вы можете использовать jQuery's .each() method, отметив, что в функции обратного вызова вы предоставляете this будет установлен к текущему DOM элемента:

$(".nav_flag").each(function() { 
    this.src = "images/flags/"+userCountryLower+".gif"; 
}); 

Однако JQuery предоставляет способ установить атрибуты с одной строки кода:

$(".nav_flag").attr("src", "images/flags/"+userCountryLower+".gif"); 

Чтобы ответить на вторую часть вашего вопроса, делая то же самое без jQuery, вы можете использовать .getElementsByClassname() или .querySelectorAll(), если вам не нужна поддержка старых браузеров.

Answer 2

Использование .attr() в JQuery, а не смешивать два здесь.

$('.nav_flag').attr('src', "images/flags/"+userCountryLower+".gif"); 

Во многих случаях, это прекрасно, чтобы смешать JQuery с простым JavaScript, но если вы уже включили библиотеку JQuery, вы можете также использовать его. Если, то есть, у вас есть операция, которая в jQuery будет более вычислительно дорогой, чем та же операция в обычном JavaScript.

Answer 3

jQuery IS Javascript. Вы можете смешивать и сопоставлять их вместе. Но вам лучше знать, что вы делаете.

В этом случае вы, вероятно, захотите использовать функцию .attr для установки значения атрибута.

Answer 4

Вы можете сделать это с JQuery тоже:

$('.nav_flag').attr("src", "images/flags/"+userCountryLower+".gif");

Answer 5

иметь в виду, что JQuery это просто библиотека построена на JavaScript.

для любого объекта jQuery, выбрав его элементы по подписке, вернет соответствующий элемент dom.

например.

$('#foo')[0] // is equivalent to document.getElementById('foo'); 

Answer 6

Вам нужно добавить индекс к объекту jQuery, чтобы получить собственный объект Javascript. Изменение:

$('.nav_flag').src = "images/flags/"+userCountryLower+".gif"; 

To:

$('.nav_flag')[0].src = "images/flags/"+userCountryLower+".gif"; 

Чтобы получить элементы по имени класса в JavaScript, вы можете использовать:

document.getElementsByClassName('nav_flag')[0].src = "images/flags/"+userCountryLower+".gif"; 

Answer 7

Чтобы ответить на ваш вопрос, вы можете использовать .toArray() преобразовать JQuery объект в массив стандартных элементов DOM. Затем либо получить первый элемент, либо цикл через массив, чтобы установить все элементы с классом.

Однако, вы могли бы сделать это легче с чистой JQuery с атр или проп в зависимости от версии:

$('.nav_flag').attr("src", "images/flags/"+userCountryLower+".gif"); 

Или использовать чистый JavaScript:

if (navFlagElements = document.getElementsByClassName("nav_flag") && navFlagElements.length > 0) { 
    navFlagElements[0].src = "images/flags/"+userCountryLower+".gif" 
}