Въведение в jQuery (Част 2): Методи и функции

реклама

Това е част от непрекъснатото въвеждане на начинаещи в серията за програмиране на jQuery. Част 1 обхвана основите на jQuery Урок за jQuery - Първи стъпки: Основи и селекториМиналата седмица говорих за това колко е важно jQuery за всеки модерен уеб разработчик и защо е страхотно. Тази седмица мисля, че е време да си изцапаме ръцете с някакъв код и да научим как ... Прочетете още за това как да го включите във вашия проект и селектори. В част 2 ще продължим с основното използване, като разгледаме някои методи, които можете да изпълните на тези елементи на DOM, и някои други езикови основи.

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

Ако си спомняте от урок 1, това е основната структура на DOM манипулация в jQuery. DOM манипулацията не е единственото нещо, което можете да направите с jQuery, разбира се, но това е най-лесното място, от което да започнете и най-често срещаното, така че затова го избрахме.

За бързо резюме на селектор част от това изявление ви позволява да използвате имена, класове или идентификатори, подобни на CSS, за да намерите части от DOM. Например, за да вземете всички с име на клас от

.hidden, бихме използвали:

$ ( "Div.hidden")

Втората част на това уравнение е метод да изпълнява на тези DIVs, след като ги намерим (ако изобщо съществуват; или те могат да бъдат само един "съвпадащ" елемент). Не забравяйте, че jQuery ще връща само един елемент за избор на ID, тъй като идентификаторите трябва да се отнасят до уникални елементи. Ако ще имате повече от нещо, то трябва да бъде дефинирано като клас в CSS.

След това към методите; какво можете да направите с елементи на DOM все пак?

Първо, запознах ви с .css метод за последен път, за да можете да го използвате за тестване. Форматът е прост:

.css ( "собственост", "стойност");

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

Ако предпочитате да анимирате промените в CSS, тогава имам страхотна новина за вас; има и метод, наречен .animate (). Но е малко по-сложно:

.animate ({ 'свойство': 'стойност'}, скорост);

Като пример:

.animate ({ 'непрозрачност ":" 0,25 "," височина ":" 100 пиксела "}" бързо ");

В този момент може би се чудите за какво са къдравите брекети; те се наричат ​​„обект буквално“ и обикновено се използват за създаване на списък на свойство: стойност двойки, вид като индексиран масив ако идвате от други езици. Ще ги използвате много в jQuery, така че отново ще кажа това - свикнете да проверявате правилно затворени скоби и скоби!

Разгледайте тази страница за много работни примери на анимационния метод.

Освен че манипулирате CSS свойствата на нещо, можете да коригирате съдържанието му с .текстови (), .html () и .val () методи (val е за съдържанието на елементите на формата). Тези методи действат като и двете комплектters и GETването; ако не посочите стойност, те ще получат текущата стойност. Ако посочите стойност, те ще заменят текущата стойност.

Ето няколко бързи примера:

Вземете текущата стойност на полето за име във формата за коментар и го присвойте на променлива comment_name:

var commenter_name = $ (# коментар-форма # име) .val ();

Задайте стойността на до стойността, грабната от COMMENTER_NAME:

$ ('span.name'). текст (commenter_name);

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

Да речем, че сте искали динамично да вмъквате блок от рекламни изображения след всеки 3-ти параграф в колоната със съдържание, но го правите в Javascript, за да може първоначалното зареждане на страницата да бъде поддържани чисти. Звучи доста сложно, нали? Едва ли ...

$('Разделение # съдържаниер: nth-дете (3n)').след('');

Разбивайки това, помолихме jQuery да:

1. Намерете div с идентификатор на „content“
2. Намерете p, съдържащи се в този div
3. Филтрирайте до всяко 3-то п използване на псевдоселектор nth-дете (повече за това тук)
4. Вмъкнете произволен знак след всеки съвпадащ елемент

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

Също така имайте предвид, че може да има повече от един начин да направите нещо. Ако например не можете да стесните правилния обект до insertAfter (), може би помислете за намирането на следващия дете надолу и използване insertBefore () вместо.

Метод на верига

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

$ ( "НСА # меню") fadeIn ( "бързо. '); $ ( "НСА # меню") addClass ( "beingShown. '); $ ( "НСА # меню") CSS ( "марж-надясно", "10px. ');

Това звучи достатъчно разумно, нали? Но можете да направите същото само в един ред:

$ ( "НСА # меню") fadeIn ( "бързо") addClass ( "beingShown") CSS ( "марж-надясно", "10px")...;

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

Защо? Е, всеки път, когато извиквате основната jQuery $ команда и селектор, вие го молите да търси през DOM дървото, търсейки съвпадащ елемент. Когато веригирате методи, не е нужно да се препращате отново към DOM, защото той знае къде се намират сега и може да извърши метода моментално.

Това е за днес и мисля, че вероятно сме покрили доста. Вече трябва да сте въоръжени с възможността да извършвате някои доста тежки DOM манипулации, така че имайте ход, веригирайте вашите методи заедно и направете истинска каша на страницата. Засега ще искате да поставите скриптите си в долния колонтитул, за да дадете време за зареждане на останалата част от страницата. Следващата седмица ще се заемем с проблема да накараме jQuery да прави нещата само когато всичко е заредено правилно със събития и любопитен случай на анонимни функции.

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