четверг, 22 сентября 2011 г.

jQuery.css(display:'none') vs jQuery.hide()

Меня заинтересовал вопрос: какой метод быстрее скрывает элемент на страничке(и востанавливает)
$(container).css('display', 'none') или $(container).hide()

Нашел замечательный сайт http://jsperf.com/jquery-css-display-none-vs-hide/2, на котором проводится тестирование всех возможных способов спрятать элемент под разными браузерами. Вы можете сами запустить тесты или просмотреть уже готовые результаты.

Быстрее: $(container).css("display", "none");
ну а на низком уровне (без jQuery) будет намного быстрее: document.getElementById("hide-me").style.display = "none";

вторник, 20 сентября 2011 г.

jQuery. Исключающий фильтр :not

Постановка задачи: необходимо выбрать все элементы "li" у которых отсутствует класс "test":
  items = $("li:not(.test)");
  //или:
  items = $("li").not(".test")

  //Вывод результата:
  console.log('Items:', items);

Основное применение - исключить по селектору нежелательные вхождения из результирующего набора выборки.

Ссылка на статью в официальной документации: http://api.jquery.com/not/

Для противоположной задачи - уточнить результаты выборки - существует метод .filter() (http://api.jquery.com/filter/). Я опишу его в следующей статье.

пятница, 9 сентября 2011 г.

jQuery. Особенности использования .parent(), .parents(), .closest(), .siblings()

Для того чтобы найти родительский элемент(ы) выбранного узла, можно пользоваться похожими методами: .parent(), .parents(), .closest(). Для поиска соседних узлов пользуются .siblings().

Рассмотрим различия между ними:

Первый метод .parent([selector]) -  находит родителя строго на один уровень вверх.
Пример: $(this).parent()

Для того чтобы получить родителя от родителя нужно применять цепочку вызовов (произвольной глубины): $(this).parent().parent()....

Второй метод .parents([selector])  - возвращает список всех родительских узлов, и,  может содержать селектор, для уточнения набора родителей. 
Пример: $(this).parents("li.test")

Третий метод .closest(selector, [context]) - возвращает первый ближайший родительский узел или же текущий узел - которые удовлетворяют условию в селекторе (селектор обязательный). Может принимать контекст для уточнения поиска (набор узлов заранее выбранных).
Основные отличия его от .parents():
    - может вернуть и текущий узел
    - обязательный селектор
   - возвращает только первый элемент который попал под условие, поиск ведется тоже вверх по дереву.
Пример: $(this).closest("li.test") или $(this).closest("li.test", itemsList)

Ну и наконец последний метод .siblings([selector]) - возвращает набор соседних узлов (тех, которые имеют того же родителя что и текущий), может принимать уточняющий селектор.
Пример: $("ul li#id1").siblings()