Slyweb
На разработку сайта! Скидки 50%!

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

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

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

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

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

  • Код
  • Чистый код
  1.<script src="http://code.jquery.com/jquery-latest.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4. // остальные сниппеты здесь!
  5. });
  6.</script>
  7.

        

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

  • Код
  • Чистый код
  1..filter(":not(:has(.selected))")

        

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

  • Код
  • Чистый код
  1.$("div").css("color","blue");

        

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

  • Код
  • Чистый код
  1.$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});

        

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

  • Код
  • Чистый код
  1.$("DIV:contains(Привет)").css("text-decoration","underline");

        

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

  • Код
  • Чистый код
  1.// удалить у всех элементов DIV класс "class"
  2.$("div").addclass("class");
  3.// удалить у всех элементов div класс "class"
  4.$("div").removeclass("class");
  5.// ищем элементы div с классом "class"
  6.$("div").hasclass("class");
  7.// переключаем класс
  8.$("div.tumble").toggleclass("class");
  9.// переключаем класс по каждому третьему щелчку
10.$("DIV.tumble").toggleClass("highlight", count % 3 == 0);

        

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

  • Код
  • Чистый код
  1.
  2.// HTML
  3.<ul>
  4. <li>Первый элемент</li>
  5. <li>Второй элемент</li>
  6. <li>Третий элемент</li>
  7. <li>Четвёртый элемент</li>
  8. </ul>
  9.</ul>
10.
11.// jQuery
12.$(function(){
13. $("li").toggle(
14. function () {
15. $(this).css({"list-style-type":"disc", "color":"blue"});
16. },
17. function () {
18. $(this).css({"list-style-type":"disc", "color":"red"});
19. },
20. function () {
21. $(this).css({"list-style-type":"", "color":""});
22. }
23. );
24.});
25.

        

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. Добавить класс к элементу с определённым классом

  • Код
  • Чистый код
  1.$("input").has(".email").addClass("email_icon");

        

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

  • Код
  • Чистый код
  1.$('link[media='screen']').attr('href', 'Alternative.css');

        

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

  • Код
  • Чистый код
  1. $("tr:odd").addClass("odd");
  2. $("li:odd").addClass("odd");
  3.

        

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

  • Код
  • Чистый код
  1.a.toggleClass('blueButton');


        

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

  • Код
  • Чистый код
  1.if ($.browser.msie) { // определили Internet Explorer }

        

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

  • Код
  • Чистый код
  1.("p.value:contains('thetextvalue')").hide();

        

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

  • Код
  • Чистый код
  1.# Определяем браузер Safari (if( $.browser.safari)),
  2.# Определяем IE6 и выше (if ($.browser.msie && $.browser.version > 6 )),
  3.# Определяем IE6 и ниже (if ($.browser.msie && $.browser.version <= 6 )),
  4.# Определяем FireFox 2 и выше (if ($.browser.mozilla && $.browser.version >= '1.8' ))

        

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

  • Код
  • Чистый код
  1.if ($('#someDiv').length) {//hooray!!! it exists...}

        

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

  • Код
  • Чистый код
  1.$(".mydiv").delay(5000).hide('blind', {}, 500);

        

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

  • Код
  • Чистый код
  1.jQuery.fn.center = function () {
  2.this.css('position','absolute');
  3.this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
  4.this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;}

        

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

  • Код
  • Чистый код
  1.jQuery.log = jQuery.fn.log = function (msg) {
  2. if (console){
  3. console.log("%s: %o", msg, this);
  4. }
  5. return this;
  6.};

        

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

  • Код
  • Чистый код
  1.$("ul li").click(function(){
  2. window.location=$(this).find("a").attr("href"); return false;
  3.});

        

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

  • Код
  • Чистый код
  1. $.fn.replaceUrl = function() {
  2. var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
  3. this.each(function() {
  4. $(this).html(
  5. $(this).html().replace(regexp,'<a href="$1">$1</a>')
  6. );
  7. });
  8. return $(this);
  9. }
10.
11. $('p').replaceUrl();

        

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

  • Код
  • Чистый код
  1.$(function(){
  2. $('<a>', {
  3. text: 'jQuery фреймовик!',
  4. href: 'http://www.jquery.com',
  5. id: 'hereid',
  6. rel: 'external',
  7. title: 'Атрибут title для ссылки'
  8. }).appendTo('body');
  9.
10.});
11.

        
Листинг 11.

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

  • Код
  • Чистый код
  1. $("div").data("myName", 'addy');
  2. $("div").data("myName") === 'addy';

        

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

  • Код
  • Чистый код
  1. <ul>
  2. <li>jquery.com</li>
  3. <li>slyweb.ru</li>
  4. <li>linkexchenger.net</li>
  5. <li>vremenno.net</li>
  6. <li>anton.shevchuk.name</li>
  7. <li>other blog</li>
  8. </ul>
  9.
10.
11.
12.// первые два li
13.$('li').slice(0,2).css('background-color', '#f1f1f1');
14.// первые второй и третий
15.$('li').slice(2,4).css('background-color', 'yellow');
16.// два последних
17.$('li').slice(-2).css('background-color', '#cadceb')
18.
19.

        
Листинг 11.

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

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

  • Код
  • Чистый код
  1.
  2.$(function(){
  3.var aol = $.browser.aol(); // AOL Explorer
  4.var camino = $.browser.camino(); // Camino
  5.var firefox = $.browser.firefox(); // Firefox
  6.var flock = $.browser.flock(); // Flock
  7.var icab = $.browser.icab(); // iCab
  8.var konqueror = $.browser.konqueror(); // Konqueror
  9.var mozilla = $.browser.mozilla(); // Mozilla
10.var msie = $.browser.msie(); // Internet Explorer Win / Mac
11.var netscape = $.browser.netscape(); // Netscape
12.var opera = $.browser.opera(); // Opera
13.var safari = $.browser.safari(); // Safari
14.
15.var userbrowser = $.browser.browser(); //detected user browser
16.
17.//operating systems
18.
19.var linux = $.browser.linux(); // Linux
20.var mac = $.browser.mac(); // Mac OS
21.var win = $.browser.win(); // Microsoft Windows
22.
23.//version
24.
25.var userversion = $.browser.version.number();
26.
27./* ----------------------------------------------------------------- */
28.
29.if (mac == true) {
30.
31. $("#os").text("mac");
32.
33.} else if (linux == true) {
34.
35. $("#os").text("linux");
36.
37.} else if (win == true) {
38.
39. $("#os").text("windows");
40.
41.}
42.
43./* ----------------------------------------------------------------- */
44.
45.if (userbrowser == "Safari") {
46.
47. $("#browser").text("safari");
48.
49.} else if (userbrowser == "Firefox") {
50.
51. $("#browser").text("firefox");
52.
53.} else if (userbrowser == "Camino") {
54.
55. $("#browser").text("camino");
56.
57.} else if (userbrowser == "AOL Explorer") {
58.
59. $("#browser").text("aol");
60.
61.} else if (userbrowser == "Flock") {
62.
63. $("#browser").text("flock");
64.
65.} else if (userbrowser == "iCab") {
66.
67. $("#browser").text("icab");
68.
69.} else if (userbrowser == "Konqueror") {
70.
71. $("#browser").text("konqueror");
72.
73.} else if (userbrowser == "Mozilla") {
74.
75. $("#browser").text("mozilla");
76.
77.} else if (userbrowser == "Netscape") {
78.
79. $("#browser").text("netscape");
80.
81.} else if (userbrowser == "Opera") {
82.
83. $("#browser").text("opera");
84.
85.} else if (userbrowser == "Internet Explorer") {
86.
87. $("#browser").text("ie");
88.
89.} else {}
90.
91.
92.$("#version").text("" + userversion + "");
93.});
94.

        

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

  • Код
  • Чистый код
  1.$('#elm').hover(
  2. function(){ $(this).addClass('hover') },
  3. function(){ $(this).removeClass('hover') }
  4.)
  5.

        

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

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

  • Код
  • Чистый код
  1.// Safari
  2.if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );
  3.
  4.// IE 6 версии и выше
  5.if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );
  6.
  7.//IE 6 версии и ниже
  8.if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );
  9.
10.// Firefox 2 and above
11.if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

        

Заключение

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


Александр Ермаков