jQuery сниппеты для CSS и определения браузера

Опубликовано admin - чт, 03/24/2011 - 10:40

В интернете появилось достаточно большое количество статей о jQuery сниппетах, которые по сути, если назвать их по-русски являются обычными jQuery примерами. Я подумал и решил начать их коллекционировать, но не просто так от статьи к статье беспорядочно, а разделив их по разделам. Некоторые сниппеты можно отнести к анимационным эффектам, другие к добавлению css свойств, третьи - к добавлению классов, других атрибутов, четвертые – к созданию и использованию элементов. Так можно долго проводить дифференциацию.

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

jQuery сниппеты для работы с css

1. Главный сниппет всех сниппетов

2. Выбрать элемент не имеющий определенного класса

3. Устанавливаем единичное css свойство

4. Устанавливаем несколько css свойств

5. Устанавливаем единичное css свойство элементу с заданным текстом

6. Удаляем, добавляем, проверяем класс

7. Переключеие css свойств для списка(ul) с помощью toggle()

8. Таблица css селекторов для поиска и подсчета элементов

Метод jQuery Описание метода
var col = $("*").length; Шаблон CSS "*" обозначает универсальный селектор, по которому jQuery находит все элементы HTML. Пример вернет количество элементов на странице:
var col = $("DIV").length; Пример вернет количество элементов DIV на странице
var col = $("DIV P").length; Пример вернет количество элементов потомков P внутри родительского элемента DIV
var col = $("DIV > P").length; Пример вернет количество элементов потомков P внутри родительского элемента DIV, основное отличие от предыдущего примера состоит в том, что элементы P, хотя и могут находиться в элементе DIV, но являясь дочерними элементами другого элемента, не будут учитываются при подсчете
var col = $("DIV:first-child").length; Пример вернет количество первых элементов-потомков P внутри родительского элемента DIV
var col = $("DIV + DIV").length; Пример вернет количество элементов DIV, которые немедленно следуют за другими элементами DIV
var col = $("DIV[foo]").length; Пример вернет количество элементов DIV, имеющих атрибут foo
var col = $("DIV[foo='attr']").length; Пример вернет количество элементов DIV, имеющих атрибут foo со значением равным "attr"
var col = $("DIV[foo$='attr']").length; Пример вернет количество элементов DIV, имеющих атрибут foo, заканчивающихся на "attr"
var col = $("DIV[foo~='attr']").length; Пример вернет количество элементов DIV, имеющих атрибут foo, среди значений которых, разделанных пробелом содержится "attr":
var col = $("DIV[foo^='attr']").length; Пример вернет количество элементов DIV, имеющих атрибут foo, значение которого начинается с "attr"
var col = $("input:disabled").length;
var col = $("input:enabled").length;
var col = $("input:checked").length;
jQuery поддерживает селекторы, введенные в CSS3, для элементов формы как отключенных, так и не отключенных, или отмеченных элементов(для checkbox)
var col = $("DIV:contains(Привет)").length; В CSS3 введён селектор "содержимого". В этом примере будет подсчитано количество элементов DIV, содержащих текст "Привет".

9. Добавить класс к элементу с определённым классом 

10. Переключить стиль для всей страницы

11. Для удобного чтения нечётных строк таблицы

12. Быстрое переключение класса

13. Выполнение скрипта только для браузера Internet Explorer

14. Как скрыть элемент содержащий заданный текст

15. Быстрое определение браузера

16. Проверить существует ли элемент

17. Скрываем элемент по прошествии определённого времени

18. Центрирование элемента

19. Проверка существования элемента с выводом сообщения на консоль

20. Делаем элементы списка (LI) ссылками

21. Делаем все HTTP адреса на странице ссылками

22. Создание ссылки через объект jQuery

23. Сохраняем данные в атрибут элемента

24. Создаём стиль для определённого набора элементов

25. Подробное определение браузера, операционной системы

Подключить browserdetect.js и используйте следующий код.

26. Смена классов при наведении или отведении курсора

27. Упрощенное определение имени браузера и его версии

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

Заключение

Это пока все сниппеты, которые были найдены либо на этом сайте, либо на других и касаются только свойств CSS или кроссбраузерности. В следующих статьях я соберу сниппеты для работы с элементами - создание, удаление и их модификация.

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время. читать...

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

читать...
На разработку сайта! Скидки до 20%!