Реальный пиарJavaScriptJquery → Чего-нибудь с ними делаем

Чего-нибудь с ними делаем

jquery примеры

Объект, который возвращают селекторы jQuery, является довольно интересным зверем. Он представляет собой набор DOM-элементов и ведет себя немного как массив: у него есть свойство length, к его элементам можно получить доступ по индексу и (что более важно) Firebug расценивает его именно как массив при отображении в своей консоли. Это не более, чем красивая иллюзия: набор элементов, на самом деле, — это объект jQuery, у которого есть большое число методов для выбора, изменения или расширения имеющегося набора.
В jQuery имеется три разных категории методов: первые манипулируют со всеми элементами, которые подходят по шаблону, вторые возвращают значение от первого найденного элемента, и третьи изменяют саму выборку.

Не будем перечислять все доступные методы (это можно посмотреть и на visualjquery.com), но приведем некоторые примеры. Если у вас есть Firebug, вы можете попробовать их самостоятельно: просто нужно воспользоваться закладкой «Вставить jQuery» (javascript:void(function(){var s=document.createElement('script');
s.src='http://code.jquery.com/jquery-1.1.2.js'; document.getElementsByTagName('head')[0].appendChild(s);}())) для загрузки самой библиотеки для любой страницы, а затем вставить примеры кода в консоль Firebug (прим.: можно и без Firebug: достаточно загрузить jQuery с помощью указанной ссылки и вызвать приведенные примеры в адресной строке браузера, не забыв в начале javascript: и какой-либо alert в конце (чтобы на страницу не выводилось возвращаемое значение)).

• jQuery('div#primary').width(300);
Выставляет ширину div id="primary" в 300 пикселей.
• jQuery('p').css('line-height', '1.8em');
Выставляет высоту строки в 1.8em для всех параграфов.
• jQuery('li:odd').css({color: 'white', backgroundColor: 'black'});
Применяет 2 CSS-правила для каждого пункта списка; заметьте, что функция css() может принимать объект таблицы стилей вместо двух строк.
• jQuery('a[@href^="http://"]').addClass('external').attr('target', '_blank');
Добавляет класс "external" для всех внешних ссылок (тех, что начинаются с http://), затем добавляет target="_blank", чтобы увеличить различие. В данном примере используется цепочка вызовов, описанная ниже.
• jQuery('blockquote').each(function(el) { alert(jQuery(this).text()) });
Для каждого тега blockquote на странице выводит сообщение (alert) с его текстовым содержанием (включая HTML-теги).
• jQuery('a').html('Нажми здесь!');
Заменяет весь текст в ссылках на странице призывом «Нажми здесь!».
Ниже несколько примеров методов, которые возвращают значение от первого элемента, найденного по шаблону:
• var width = jQuery('div').width();
Какая ширина у первого div на странице?
• var src = jQuery('img').attr('src');
Какое значение у атрибута src у первой картинки на странице?
• var color = jQuery('h1').css('color');
Какой цвет у первого h1?

Отметим удобную симметрию таких методов: они используются как для выставления атрибутов (когда принимают 2 аргумента или у передаваемого объекта несколько свойств), так и для прочтения значений этих атрибутов (если передается только один аргумент). Такая симметрия используется во всей библиотеке jQuery, что очень сильно облегчает запоминание API.
Также есть несколько методов, которые изменяют весь набор найденных элементов. Многие из них также обеспечивают перемещение по DOM-дереву:

• jQuery('div').not('[@id]')
Возвращает все div, у которых нет атрибута id.
• jQuery('h2').parent()
Возвращает все элементы, которые являются непосредственными родителями h2.
• jQuery('blockquote').children()
Возвращает все элементы, вложенные в blockquote.
• jQuery('p').eq(4).next()
Находит пятый параграф на странице, потом находит следующий элемент (т.е. непосредственного соседа справа).
• jQuery('input:text:first').parents('form')
Находит родительский элемент для формы, которая содержит первое поле input type="text" на странице. Опциональным параметром для parents() является другой селектор.

Цепочки вызовов
Команда разработчиков jQuery часто гордятся поддержкой в этой библиотеке цепочки вызовов, доходя до заявлений типа «jQuery создана для того, чтобы изменить ваш стиль программирования на JavaScript» прямо на главной странице. Эту технику находят скорее боковым ответвлением, чем дорогой в будущее, но вы можете использовать jQuery, избежав длинных цепочек вызовов.
Цепочки можно использовать для нескольких интересных трюков. В дополнение к использованию набора DOM-выборок вы можете применить jQuery-метод end() для перемещения по стеку объектов и выхода из текущего контекста. Это немного сложно объяснить, но когда вы используете метод, который изменяет текущий (объектный) контекст (например, children() или filter()), вы можете использовать end() чуть позже, чтобы вернуться к предыдущей выборке. Jesse Skinner приводит хороший пример использования этой возможности в своем учебнике Делаем разработку на AJAX проще с jQuery:

$('form#login')
// прячем внутри формы все label с классом optional
.find('label.optional').hide().end()
// добавляем красную границу ко всем полям типа password в форме
.find('input:password').css('border', '1px solid red').end()
// добавляем обработчик на событие submit для формы
.submit(function(){
return confirm('Вы действительно хотите отправить данные?');
});

Все это большое преобразование займет всего одну строку. Оно находит форму, находит некоторые элементы внутри нее, применяет к ним изменения, возвращается обратно к форме и добавляет к ней обработчик события submit().


Источник: http://webew.ru

Рекомендуем



Перехватываем события Все JavaScript-библиотеки нуждаются в методах для обработки событий, и jQuery не является исключением


jQuery UI. Widgets. Dialogs (Окна) buttons - в этой опции передают объект, в котором можно определить кнопки, отображаемые в диалоговом окне, и связать их с callback-функциями;


jQuery для JavaScript Выбор CSS-селекторов в качестве базиса было, конечно, изящной идеей, но использование цепочек преобразований выглядело немного замысловато, и сама библиотека, по-видимому, не покрывала всех возможных случаев