Отдавна не съм имал статии за JQuery в моя блог. Не, имаше статии, които го използваха, разбира се, но там той действаше като помощен инструмент, а междувременно секцията „Изучаване на JQuery“ беше покрита с прах. Междувременно дойде време да преминем към най-интересната част от обучението - добавянето на различни ефекти, поради което много хора започват да го изучават. И в днешната статия ще научите как да променяте свойствата на CSS в движение.

Преди да навлезем в самите ефекти, нека направим малко резервно копие и да разгледаме CSS. В предишни статии променихме външен видстраници, чрез добавяне или премахване на различни CSS класове, които първо трябва, разбира се, да бъдат създадени в CSS файла. Като цяло това е правилният начин, защото взема предвид ролята на CSS при изграждането на страницата.

Въпреки това, има моменти, когато трябва да промените CSS стил, който не е в листа със стилове или който не може да бъде описан. За такива случаи JQuery има метода .css().

За да получим стойността на CSS свойство, трябва просто да предадем името на свойството като низ, нещо подобно. css('backgroundColor') .

Свойства, състоящи се от няколко думи, могат да бъдат написани с тире, както в CSS файл (background-color), или с различен регистър, както са написани в DOM (backgroundColor). За да зададе CSS свойства, методът .css() използва два метода. Първият метод е два параметъра, името на CSS свойството и неговата стойност, разделени със запетаи. Втората е карта, състояща се от двойки собственост-стойност.

Css("свойство","стойност") .css((свойство1: "стойност1", "свойство-2": "стойност2"))

Ще използваме метода. css(), точно както използвахме .addClass() - комбинираме ги със селектор и обвързваме събитието. Нека да разгледаме метода .css(), използвайки конкретен пример. Ще ни трябва следното HTML маркиране:

И малко CSS:

#textbox( граница: 1px solid #000; background: #DFECFF; margin: 20px auto; text-align: left; padding: 10px; width: 400px; color: #0000a0; font-style: italic; clear: both; )

В резултат на това ще имаме страница като тази:

На страницата има два бутона - за увеличаване и намаляване на шрифта. По принцип тук можем да използваме метода .addClass(), описан в предишната статия, но нека усложним малко задачата и си представим, че трябва да намаляваме или увеличаваме текста при всяко натискане на съответния бутон. Това, разбира се, може да се реализира чрез описване на отделен клас за всяко кликване, но ще бъде много по-лесно да получите текущия размер на текста и да го увеличите (намалите) с дадена стойност.

Нашият код традиционно започва с $(document).ready() и манипулатор на събитие на бутон $("#increase").click() :

$(document).ready(function())( $("#increase").click(function())( ))

След това размерът на шрифта може лесно да бъде получен чрез $(“#textbox”).css("fontSize") . Въпреки това, върнатата стойност ще съдържа както числото, така и единиците, така че трябва да съхраним всяка част в собствена променлива, след което можем да увеличим числото и да прикрепим отново единиците към него. Освен това планираме да използваме JQuery обекта повече от веднъж, така че би било добра идея да го съхраняваме и в променлива.

$(document).ready(function() ( $("#increase").click(function() ( var $speech = $("div.speech"); var currentSize = $speech.css("fontSize") ; var num = parseFloat (currentSize, 10); var unit = currentSize.slice(-2); $speech.css("fontSize", num + unit ));

Първият ред във функцията .click() съхранява променлива с блока #textblock.

Обърнете внимание, че използваме символа $ в името на променливата $speech. Тъй като $ е валиден знак за JavaScript променливи, можем да го използваме като напомняне, че тази променлива съхранява JQuery обект. Следващият ред запазва размера на шрифта на блока #textblock в променлива - например 12px.

След това използваме parseFloat() и slice(). Функцията parseFloat() се използва за преобразуване на низови стойности в числови (десетични) стойности. Например, низът 12 ще бъде преобразуван в числото 12. Ако низът започва с нецифров знак, parseFloat() ще върне NaN, което означава: „Не числова стойност» ( Не е номер).Вторият аргумент на функцията parseFloat() гарантира, че числото ще бъде преобразувано в десетична стойност.

Методът .sice() връща подниз, започващ с определен характерлинии. Тъй като името на единиците, които използваме, е дълго два знака (px), ние уточняваме, че поднизът трябва да започва с последните два знака на основния низ.

Всичко, което трябва да направим, е да умножим получената стойност на променливата num по 1,4 и след това да зададем размера на шрифта чрез свързване на двете променливи num и unit:

$(document).ready(function())( $("#increase").click(function())( var $speech = $("#textbox"); var currentSize = $speech.css("fontSize" ); var num = parseFloat (currentSize, 10); var unit = currentSize.slice(-2); $speech.css("fontSize", num + unit ));

Сега, след като щракнете върху бутона „Увеличаване“, текстът в блока се увеличава, както на представената екранна снимка:

Следващият клик върху същия бутон продължава да увеличава текста в блока.

За да работи бутонът “Намали”, ще разделим стойността на променливата – num/=1.4 . И за да не увеличаваме размера на кода, можем да комбинираме два манипулатора на събития .click() в един, чрез класа бутон. След това, след като зададем променливите, можем лесно да умножим или разделим въз основа на ID на бутона, който е бил натиснат. Ето как трябва да изглежда кодът:

$(document).ready(function())( $("input").click(function())( var $speech = $("#textbox"); var currentSize = $speech.css("fontSize") ; var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); if (this.id=="увеличаване")(num*=1.4; ) else if(this.id=="decrease) ") ( num/=1.4; ) $speech.css("fontSize", num + unit ));

Горното беше дадено най-прост примеризползване на метода .css() на практика. Може да се даде още един пример за използване на този метод.

Разделяне на елементи от менюто

Доста често в дизайна има такава техника като разделяне на елементи от менюто вертикална линия, а първият и последният елемент от менюто не трябва да имат странична линия.

Такова меню ще изисква следното HTML маркиране:

Ul( list-style: none; ) ul li( list-style: none; float: ляво; background: #DFECFF; display: block; padding: 10px; border-right: 1px gray solid; ) ul li a( text- декорация: няма цвят: #000;

Ето как ще изглежда нашето меню:

И за да премахнете десния разделител от последния елемент от менюто (четвърти елемент), можете да използвате този код:

$(document).ready(function())( $("#menu ul li:last").css("border-right", "none"); ));

И в резултат на това получаваме това меню:

Както можете да видите, използването на този метод е доста просто и удобно, но все пак се опитайте да не злоупотребявате с него, но го използвайте само в случаите, когато не е възможно да добавите желания стил към CSS файла.

Нека да разгледаме добавянето на свойства, използвайки няколко примера. CSSкъм страницата на сайта с помощта на jQuery. Нека да разгледаме плюсовете и минусите на двата основни начина за промяна на стилове на страница.

За да промените настройките на съдържанието на страницата с помощта на библиотеката jQuery за JavaScript, можете да използвате два метода:

1. Промяна на отделни свойства

Нека променим елементи със свойства клас-първии .клас-вторикогато задържите курсора на мишката над елемент с клас .уебсайт.

$(".сайт"). mouseover(функция()( $(".class-one, .class-two") . css ("ширина", "30%"); $(".class-one, .class-two") . css("височина", "240px"); } ) ;

Смяна на класове

Този метод е за предпочитане и по-удобен, ако трябва да промените много различни свойства от използвайки jQuery. Ако всички тези свойства са посочени в js файл, тогава можете сериозно да усложните четливостта и разбирането на целия код. По-добре е да регистрирате всички стилове в CSS файли използвайте jQuery, за да ги промените.

Когато се случи събитие, ние ще променим стила .клас-първивърху стилове .class-one .class-two:

$(".сайт"). on ("mouseover mousemove", функция () ( $(".class-one"). removeClass(). addClass("клас-един клас-два"); } ) ;

Ако погледнете внимателно кода по-горе, може да се чудите защо премахваме класа клас-първии след това го връщаме заедно с другия.

Това е необходимо, защото в този кодекс е решено .клас-първиизползвайте го като „пряк път“, така че в бъдеще да можете да обработвате този елемент, без да помните какъв нов клас има.

Библиотеката jQuery ви позволява да манипулирате свойствата и атрибутите на елементите на обвит набор чрез промяна на оригиналните стойности. Можете да задавате нови свойства и да получавате и променяте стойностите на оригиналните свойства. Чрез премахване или добавяне на класове можете динамично да променяте стила на показване на елементите.

Манипулиране на свойствата и атрибутите на елемента

1. Добавяне и премахване на клас

1.1. Method.addClass()

Добавя посочения клас (или множество класове) към всеки елемент от обвития набор. до този методработи, трябва предварително да създадете стил за добавения клас. Методът не премахва стария клас, а просто добавя нов.

AddClass (име на клас) име на клас— едно или повече имена на класове, разделени с интервали. .addClass(функция)- връща едно или повече имена на класове, разделени с интервал, за да бъдат добавени към съществуващите. Взема като аргумент индекса на елемент в набора и съществуващото име на класа(овете).

1.2. Method.removeClass()

Премахва указаното(ите) име(на) на клас от всички елементи на обвития набор.

RemoveClass (име на клас) име на клас— незадължителен параметър, едно или повече имена на класове, разделени с интервал. Ако името на класа не е посочено, методът премахва всички съществуващи класове от елементите на набора. Ако е посочено име на клас, изтрива само посочения клас. .addClass(функция).removeClass(функция)

- Връща едно или повече имена на класове, разделени с интервал, за да бъдат премахнати от съществуващите. Взема като аргумент индекса на елемента в набора и старото име на класа(овете).

1.3. Method.toggleClass()

Добавя или премахва един или повече класове от всеки елемент в набора. Всеки елемент от опакования комплект се проверява отделно. Методът добавя указаното име на клас, ако не присъства в елемента, и го премахва от тези елементи, където присъства. Използва се за превключване на визуалното представяне на елементи. име на клас ToggleClass(име на клас) име на клас- едно или повече имена на класове, разделени с интервали, които ще се превключват за всеки елемент от набора. .toggleClass(име на клас, булево)- едно или повече имена на класове, разделени с интервали, които ще се превключват за всеки елемент от набора. .toggleClass(име на клас, булево)булева стойност .addClass(функция)— инсталира, добавя или премахва посочения клас. True добавя класа, false го премахва. .toggleClass(име на клас, булево).toggleClass(булев)

— незадължителен параметър, задава дали ще се превключват класовете на всеки елемент от набора.

.toggleClass(функция, булево)

- връща името на класа, който ще бъде превключван за всеки елемент от набора. Получава индекса на елемента в набора и старата стойност на класа като аргументи. име на клас— незадължителен параметър, задава дали ще се превключват класовете на всеки елемент от набора.

1.4. Method.hasClass()

Проверява дали поне един елемент в съвпадащия набор има указаното име на клас. Връща true, ако поне един от елементите в набора има валидно име на клас, false в противен случай.

HasClass(име на клас)

— низ с името на класа, който да търсите. 2. Промяна на атрибутите на елемента- Връща стойността на атрибута на първия елемент в обвития набор. Ако атрибутът липсва, връща undefined. 2. Промяна на атрибутите на елемента .attr(име на атрибут, стойност)значение - низ или число, което ще бъде добавено като стойност на атрибут за всички елементи на обвития набор..attr(атрибути) 2. Промяна на атрибутите на елементаатрибути .addClass(функция)- стойностите, които се копират от свойствата на обекта, ще бъдат зададени за всички елементи на обвития набор.

.attr(име на атрибут, функция)

— указва името на атрибута, за който ще бъде зададена определената стойност.

— приема като аргументи индекса на елемента в набора и старата стойност на атрибута. Върнатата стойност ще бъде зададена на стойността на атрибута. 2. Промяна на атрибутите на елемента 2.2. Method.removeAttr()

Премахва посочения атрибут от всеки елемент на обвития набор.

RemoveAttr(име на атрибут)

— низ, определящ атрибута за изтриване.

3. Промяна на свойствата на елемента 3.1. Method.css()Връща изчислената стойност на свойството стил за първия елемент в обвития набор или задава едно или повече CSS свойства за всеки елемент в набора. Css (име на свойство)име на собственост 3.1. Method.css() .attr(име на атрибут, стойност)— низ с името на свойството, връща изчислената му стойност за първия елемент от набора. 3.1. Method.css().css (имена на свойства) .addClass(функция)имена на имоти — масив от свойства, връща техните изчислени стойности за първия елемент от набора..css(име на свойство, стойност)

е низ или число, което ще бъде зададено като стойност на посоченото свойство за всички елементи на обвития набор.

.css(име на свойство, функция)

— низ с името на свойството.

— индексът на елемента в набора и старата стойност на свойството се предават като аргументи на функцията. Връщаната стойност ще бъде зададена за всички елементи от набора. .attr(име на атрибут, стойност)- цяло числова стойност или стойност на низ с ширината, която ще бъде зададена за всеки елемент от набора. .addClass(функция).width(функция)

- приема като аргумент индекса на елемента и старата стойност на свойството, върнатата стойност ще бъде зададена на ширината за всички елементи.

4.2. Method.height()

Връща текущата стойност на височина за първия елемент в набор или задава височината за всеки елемент в набор. .attr(име на атрибут, стойност) Height() Методът се извиква без параметри. Връща текущата стойност на височината за първия елемент в набора. .addClass(функция).height(стойност)

— цяло числова стойност или стойност на височина на низ, която ще бъде зададена за всеки елемент от набора.

.height(функция)

- приема като аргумент индекса на елемента и старата стойност на свойството, върнатата стойност ще бъде зададена на височината на всички елементи. .attr(име на атрибут, стойност) 4.3. Method.innerWidth() .addClass(функция)

Връща ширината на първия елемент в обвития набор, включително подложката, или го задава за всеки елемент от обвития набор.

InnerWidth() Методът се извиква без параметри. Връща текущата вътрешна ширина за първия елемент в набора.

.innerWidth(стойност) .attr(име на атрибут, стойност)— цяло числова стойност, която ще бъде зададена за всеки елемент от набора. .addClass(функция).innerWidth(функция)

4.4. Method.innerHeight()

Връща височината на първия елемент в обвития набор, като взема предвид подложката.

InnerHeight() Методът се извиква без параметри. Връща текущата стойност на вътрешна височина за първия елемент в набора. .toggleClass(име на клас, булево)

.innerHeight(стойност)

— цяло числова стойност, която ще бъде зададена за всеки елемент от набора.

.innerHeight(функция) .toggleClass(име на клас, булево)- приема като аргумент индекса на елемента и старата стойност на свойството, върнатата стойност ще бъде зададена на вътрешната ширина за всички елементи от набора.

4.5. Method.outerWidth()

Връща ширината на първия елемент в обвития набор. Тези размери включват дебелината на рамката и ширината на отстъпа. OuterWidth(булева)като свойствата ляво и горно съдържат px координатите на първия елемент от обвития набор спрямо началото на документа. Методът се прилага само за видими елементи.

Offset() Методът се извиква без параметри.

4.8. Method.position()

Връща JavaScript обект със свойства left и top, съдържащ px координатите на първия елемент от обвития набор спрямо най-близкия родителски елемент. Методът се прилага само за видими елементи.

Position() Методът се извиква без параметри.

Добър ден на всички Днес, както обещах в урока, ще разгледаме методите, които се използват за управление CSSизползване на стилове jQuery.

Позволете ми да ви напомня, че с помощта на стилове можем не само да определим външния вид на даден елемент на уеб страница, но и да контролираме неговата позиция, да го показваме и скриваме по желание, да променяме размера му и много други. Образно казано, този, който получава достъп до управление на стила CSS, той контролира самата уеб страница! А jQueryпредоставя тази възможност на своите потребители!

IN jQueryИма три категории методи: някои манипулират избрани елементи, други връщат стойности на елементи, а трети променят самите елементи.

За да добавите стил към всеки елемент, трябва да използвате следния метод: .css(име,стойност)

Нека променим стила на заглавието на статията, преди да отидем твърде далеч от горната част на страницата. Нека го направим например червено:

.

$("#title".css("цвят", "#cc0000");

В този пример избрах елемента с id id="заглавие", който отговаря за показването на името на сайта и добавения стил, т.е. цвят. И бутоните отговарят за прилагането или връщането на стила по подразбиране.
Параметрите могат да бъдат имена и стойности, приложими в CSS: фон, рамка, стил на шрифта, цвяти т.н.

Ако трябва да посочите няколко за даден елемент CSS-правила, по-добре е да използвате следната конструкция:

.css((свойства))

$("#text").css(( "color" : "синьо", "fontStyle" : "italic", "font-weight" : 900 ));

Тази инструкция ще промени цвета на текста на предишния параграф на син и ще зададе теглото на шрифта на 900.

Моля, имайте предвид, че за комплексни имоти CSSкато тегло на шрифтаи цвят на фонатехните еквиваленти от JavaScript: fontWeight, backgroundColorи т.н.

За да демонстрирам други методи за работа със стилове, ще използвам помощта на многоцветни квадрати, които вече са ми служили много пъти в такива уроци като и.

Нека ви напомня кода и стиловете за създаването им:

HTML код:

CSS стилове:

DivRel (position:relative; width:600px; height:275px; border:dotted 1;).big (position:absolute; width:200px; height:200px; left:200px; top:50px; background-color:red; border :плътно 1px бяло; text-align:right; z-index:1;) .red (position:absolute; width:100px; height:50px; background-color:red; border:solid) 1px бяло; z-индекс: .green (position: absolute; width: 250px; top:green; border: solid 1px white; text-align: дясно; z-индекс:2;) .синьо (позиция:абсолютна; ширина:100px; ляво:300px; горе:100px; фон -цвят:син; граница:плътно 1px бяло;цвят:бяло; z-индекс:3;

Помислете за изтриване и присвояване на някакъв елемент CSS-клас:
.removeClass(клас)
.addClass(клас)

$("#style2").click(function())( $("#divRel1 > div:first").removeClass(); )); $("#rstyle2").click(function())( $("#divRel1 > div:first").addClass("big"); ));

Тези инструкции за натискане на бутона: „Изтриване на класа“, ще премахне класа от първия дъщерен елемент, съдържащ се в идентификатора id="divRel1"и добавете клас към него клас="голям"след натискане на бутона: „Добавяне на клас“.

Следният метод добавя посочения клас към елемент, ако не съществува, или премахва този клас, ако елементът вече има такъв:
.toggleClass(клас)

Опитайте да щракнете с мишката в рамката около цветните квадратчета. Цветът на фона ще се променя последователно.

$("#divRel1").click(function () ( $(this).toggleClass("yellow"); ));

И можете да получите (първи ред) и да зададете (втори ред) съответно ширината и височината на елемента на елемента, като използвате методите:
.width()
.width(стойност)
.height()
.height(стойност)

$("#divRel1 > div:last").toggle(function())( $ (this).width(200).height(170); ),function())( $ (this).width(100) .височина (100));

Кодът, показан по-горе, избира последното :последноидентификатор елемент id="divRel1"и с помощта на превключвателя превключвампроменя или възстановява стойността по подразбиране, когато щракнете върху синия квадрат. Подсказката за стил има дефинирано свойство: курсор: показалец.

Това е много интересно и важна характеристикаметоди jQuery: те се използват за задачипараметри и за получаванестойности на тези параметри.

Но това не е всичко! jQueryпозволява, ако е необходимо, да се изтрие CSS-файл, свързан с HTML-страница и свържете нова:
$("връзка").attr("href", "Alternative.css");

Опитайте да промените стиловете или кода по свое усмотрение jQuery. Чудя се какво можеш да направиш?

дата: 2011-06-28

Tweet

като

Коментари към бележката:

Страхотна статия. Всичко е ясно. благодаря

Точно затова набираме дистанционни служители, които да вършат работата, тоест да харесват и да получават заплащане за това.

Трябва само да се регистрирате в нашата услуга. > www.oplata-vklike.tk<

Ние ви предлагаме работа без инвестиции, използвайки система за автоматично приемане и обработка на поръчки.

Ние предоставяме:

Нашият лицензиран софтуер.
- документи с цялата необходима допълнителна информация. информация.
- постоянен техническа поддръжка.

Плащане от 5500 на ден. Плащания ежедневно.

повече подробна информацияна нашия уебсайт >> obrabotka.zarplatt.ru<<

Нашата услуга предоставя истински харесвания на снимки за клиенти, които са готови да платят за качество.

За да станете наш отдалечен служител и да започнете да харесвате, докато печелите 45 рубли за 1 харесване,

Трябва само да се регистрирате в нашата услуга. > http://oplata-vklike.tk/<

Теглене на спечелените средства ежедневно в рамките на няколко минути.

Стабилна работа с обучение, високо заплащане!

Работите от вкъщи! Напълно честен и прозрачен;
Достъпно за всеки - без значение кой сте или какъв опит имате в Интернет!
Ще спечелите: над четири хиляди рубли на ден!
Трудност: Лесно!
Плащане: - на следващия ден парите са във вашата сметка!

Прочетете правилата и условията на нашия уебсайт. > realno-money.tk< Скопируйте и вставьте в адресную строку Вашего браузера.

Нашата услуга предоставя истински харесвания на снимки за клиенти, които са готови да платят за качество.

Точно затова набираме дистанционни служители, които да вършат работата, тоест да дават харесвания и да печелят пари за това.

За да станете наш отдалечен служител и да започнете да харесвате, докато печелите 45 рубли за 1 харесване,

Трябва само да се регистрирате в нашата услуга. > oplata-vklike.tk<

Теглене на спечелените средства ежедневно в рамките на няколко минути.

работа чрез интернет, с ежедневни плащания до 11 000 рубли.

Регистрирайте се на нашия уебсайт. > www.airline-rabota.tk<

предлагам. Вълнуваща работа в Интернет. Без опит. Уверен доход от 5000 рубли. на ден. Тази система е разбираема за абсолютно всички.
Не е нужно да работите цял ден! Достатъчно е да посветите няколко часа на ден на работа.
Спрете да мислите какво има вътре World Wide WebНе можете да правите пари, но можете да правите пари в Интернет!
По лесни и разбираеми начини за всеки. Най-важното е да си честен!
Можете сами да зададете режима на работа.
По-подробна информация има на нашия уебсайт. > http://oplata-vklike.tk< скопируйте и вставьте в адресную строку вашего браузера.

Точно затова набираме дистанционни служители, които да вършат работата, тоест да дават харесвания и да печелят пари за това.

За да станете наш отдалечен служител и да започнете да харесвате, докато печелите 45 рубли за 1 харесване,

Трябва само да се регистрирате в нашата услуга. > http://oplata-vklike.tk/<

Теглене на спечелените средства ежедневно в рамките на няколко минути.

Уникална услуга, която ви помага да получите заем от частен инвеститор, както и от кредитни институции. Подходящ както за фирми, така и за физически лица.

Заем от частен инвеститор.

Нашата компания помага да се срещнем с инвеститора и кредитополучателя.

Директен контакт с инвеститора
Всяка кредитна история
Всичко, от което се нуждаете, е паспорт
Работим с частни лица и фирми
Всеки регион
Сума от 5 000 до 50 000 000 рубли
Процент на одобрение 97%

Предимства:

Без обезпечение и гаранция!
- Тарифа - само от 1% на месец!
- Без скрити такси или комисионни!

Изпратете заявление на нашия уебсайт. > www.ch-investor.tk<

Нашата услуга предоставя истински харесвания на снимки за клиенти, които са готови да платят за качество.

Точно затова набираме дистанционни служители, които да вършат работата, тоест да дават харесвания и да печелят пари за това.

За да станете наш отдалечен служител и да започнете да харесвате, докато печелите 45 рубли за 1 харесване,

Трябва само да се регистрирате в нашата услуга. > http://oplata-vklike.tk/<

Теглене на спечелените средства ежедневно в рамките на няколко минути.

Водещата компания в Русия и страните от ОНД в продажбата на самолетни билети

Най-голямата международна компания, продаваща A/V билети
спешно набира служители на постоянна основа за прости
работа чрез интернет, с ежедневни плащания от 11 000 рубли.

Работейки в нашата компания Вие получавате:

Спазване на кодекса на труда
- Пълен пакет обезщетения, платен отпуск, отпуск по болест, санаториум.
- Всеки наш служител у дома гарантирано получава висок доход. търкайте. на ден.
- Гарантирани стабилни плащания на спечелените пари.
- Плащанията се извършват ежедневно банкови картиили електронни портфейли.

Регистрирайте се на нашия уебсайт. > http://airline-rabota.tk/<

Без инвестиция, опит и професионални умения!