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

Ще кажа това сега - не е нужно да изучавате Javascript, за да използвате jQuery. Вероятно е най -добре, ако мислите за jQuery като еволюция на Javascript - по -добър начин да го направите - отколкото просто библиотека, която добавя функционалност. Всички Javascript, от които се нуждаете, ще бъдат взети по пътя. Предполага се обаче, че като уеб разработчик имате доста добри познания по HTML и CSS (и ето полезно безплатно ръководство за xHTML, ако не!).

Обект модел на документ

jQuery е всичко за обхождане и манипулиране на ПРИСЪД - д окумент ИЛИ bject М odel. DOM е йерархично дървово представяне на страницата, изградено от браузъри след прочитане на целия HTML код. В jQuery ще използваме терминология като родител , деца , и братя и сестри доста често, така че трябва да имате представа какво означава това във връзка с DOM.

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

jQuery code codes here`

$ ('селектор').метод();

Това е, в заглавието горе. Това е основната структура на едно парче код на jQuery за манипулиране на DOM. Лесно, нали?

Theселекторказва на jQuery да намери неща, които отговарят на това правило, и е същото като CSS селекторите (и след това още няколко отгоре). Така че, точно както в CSS бихте стилизирали всички връзки

a { }

Същото би било направено в jQuery като

$('a')

Това може да се направи за всякакви HTML елементи - div, h1, span - каквото и да е. Можете също да използвате CSS класове и идентификатори, за да бъдете по -конкретни.

Например, за да намерите всички връзки с класа „findme“, бихте използвали:

$('a.findme')

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

$('.findme')

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

За да използвате именен елемент ID, използвайте # подпишете вместо това. Ключовата разлика тук е, че селекторът на идентификатор ще избере само един обект, докато селекторът на клас може да намери повече от един.

как да сдвоите дистанционно за Apple TV

$('#something')

По принцип, ако можете да правите в CSS, тогава jQuery също ще го направи. Всъщност можете също да използвате някои доста сложни псевдоселектори в стил CSS3 като: първо

$('body p:first')

Което би грабнало абзаца на страницата. Намирате и елементи с определени атрибути. Помислете за този пример; искаме да намерим всички връзки на страницата, които сочат вътрешно към да се възползват от и ги подчертайте по някакъв начин. Ето как бихме могли да ги намерим:

$('a[href*='makeuseof']')

Не е ли готино? Е, мисля, че е така.

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

Следващата част от уравнението еметод- какво да правите с тези неща, след като ги намерите всички - но ще оставим това за следващия урок. Ако искате да започнете да изпробвате различни селектори сега, предлагам ви да се придържате към следния метод css. Това отнема два параметъра - CSS име на собственост , и нов стойност да се възложи на този имот. Така че, за да придадете на всички връзки червен цвят на фона, трябва да направите:

$('a').css('background-color','red');

Достатъчно просто! Въпреки че това може да не е от практическа полза, то ще ви позволи лесно да видите всички елементи, разположени с помощта на вашите селектори. Сега продължете и изберете - DOM ви очаква.

Надявам се този урок да ви е бил полезен; Опитах се да го направя възможно най -лесен за разбиране. Не се колебайте да задавате въпроси, които имате, или да оставяте отзиви, но имайте предвид, че със сигурност не съм елитен нинджа на jQuery.

Дял Дял Туит електронна поща 5 съвета за зареждане на вашите VirtualBox Linux машини

Уморени ли сте от лошото представяне на виртуалните машини? Ето какво трябва да направите, за да увеличите производителността на VirtualBox.

Прочетете Напред Свързани теми

Уеб култура
Уеб разработка
JavaScript
Програмиране
jQuery

За автора Джеймс Брус(707 статии са публикувани)

Джеймс има бакалавърска степен по изкуствен интелект и е сертифициран по CompTIA A+ и Network+. Когато не е зает като редактор на хардуерни рецензии, той се радва на LEGO, VR и настолни игри. Преди да се присъедини към MakeUseOf, той беше техник по осветление, учител по английски език и инженер в центъра за данни.

Още от Джеймс Брус

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате