Блог

Главная - Вопросы по программированию - зачем указывать [0] в результате дочерних элементов (‘:first’)?

зачем указывать [0] в результате дочерних элементов (‘:first’)?

#jquery #children

#jquery #дочерние элементы

Вопрос:

Пожалуйста, объясните значение [0] в этом коде: 

 $(function (){      
    var $cont = $('#cont');     
    var $el = $cont.children(':first'), el = $el[0];    
});

Я попробовал какое-то «оповещение», чтобы найти текст, но я не совсем понимаю, почему мы уточняем индекс, в то время как мы уже знаем, что указываем на «первых» дочерних элементов div … ?

Комментарии:

1. Разве разница не в том, что .children возвращает объект jQuery, содержащий первый элемент (со всеми функциональными возможностями jQuery на нем), а [0] возвращает сам HTML-элемент?

Ответ №1:

В приведенном выше примере $el это объект jQuery, содержащий один элемент, который обеспечивается :first селектором. С другой стороны, el содержит базовый элемент DOM первого (и единственного) элемента в $el объекте jQuery.

Вы можете получить доступ к собственным свойствам el переменной, таким .innerHTML как. Вы можете использовать все поддерживаемые jQuery операции над $el , например $el.html() .

Комментарии:

1. Спасибо! итак, я имею в виду, какова цель нацеливания на элемент внутри объекта jquery? для какого примера нам нужно настроить таргетинг на элемент javascript? jquery обрабатывает то же самое, что и «обычный» js, не так ли?

2. jQuery реализует свои собственные функции, полностью оборачивая элементы DOM, вы не можете использовать собственные свойства для объектов jQuery, как в моем примере с innerHTML/html() выше. Вам может понадобиться исходный элемент, если вы передаете их в библиотеки javascript, не поддерживающие jQuery, для устранения ошибки в jQuery до выпуска исправления, для использования функциональности, специфичной для браузера, или для чего-либо еще. Всегда приятно иметь возможность в библиотеках развернуть и получить исходный объект.

Ответ №2:

Объект jQuery обычно содержит коллекцию / массив DOM-узлов. Например, если вы выполняете итерацию по объекту jQuery, такому как —

 $('div').each(function() {

  //In this context, this refers to the DOM node
  //and $(this) refers to a jQuery object for that particular DOM node
  //therefore $(this)[0] == this

   this.innerHTML = 'foo';
   $(this).html('foo');
   $(this)[0].innerHTML = 'foo';

});

Вы также можете использовать .get() для аналогичного эффекта.

 //retrieves an array of native DOM nodes using jQuery
var allDivNodes = $('div').get();

//retrieves the first node retrieved by the selector
var firstDiv = $('div').get(0);

//this is the same as get(0), however, using an array accessor can throw an exception
var firstDiv = $('div')[0];

Комментарии:

1. Спасибо! итак, я имею в виду, какова цель нацеливания на элемент внутри объекта jquery? для какого примера нам нужно настроить таргетинг на элемент javascript? jquery обрабатывает то же самое, что и «обычный» js, не так ли?

2. По большей части, вам не нужно. Но браузеры могут иметь немного разные реализации DOM, и свойства / методы могут отличаться. Иногда желательно использовать сам собственный узел.

Ответ №3:

Все запросы jQuery возвращают список всех объектов, которые совпали. :first не гарантирует ни одного результата, таким образом, [0] захватывает один элемент.

Комментарии:

1. Спасибо! что ж, если мы нацелимся на идентификатор div и добавим к нему «first», мы почти уверены, что он будет соответствовать только «одному» элементу, первому, нет?

2. @Paul, зависит. Простой запрос, который использует :first , но возвращает более одного элемента, является ul li:first . Этот запрос возвращает первый li тег каждого ul тега, но на странице может быть более одного ul тега (таким образом, возвращая несколько результатов). Более неясной версией этого запроса было бы $("ul").find("li:first") . То же самое, но гораздо сложнее увидеть, что есть несколько результатов.

Ответ №4:

 var $el = $cont.children(':first')

Если селектор совпадает, это дает вам массивоподобный объект с соответствующим элементом. Вам нужен соответствующий элемент — вот почему вы используете [0] — для получения первого (и единственного) элемента возвращаемого «массива».

Это в основном похоже на разницу между: [element] и element (Где, [element][0] = element )

Ответ №5:

[0] — это то же самое, что использовать get(0) для получения элемента DOM, а не элемента jQuery.