JQuery библиотека ви позволява лесно да се манипулира HTML кода, след като тя се показва в браузъра. Той също така предоставя инструменти, които да помогнат на потребителите да взаимодействат с вашия сайт; инструменти, които да ви помогнат да създадете анимации; и инструменти, които ви позволяват да се установи връзка със сървъра, без да презаредите страницата. Скоро преди всичко отида там. За да започнете, помислете за някои основи на JQuery и JQuery да се прилага основната си работа: да получите някои предмети и нещо общо с тях.
Този урок предполага, че сте запознати с HTML и CSS селектори. Ако не знаете как да използвате селектори към специфични елементи, трябва да прекарат известно време и бързо да получите в люлка на нещата, преди да започнете да използвате това ръководство.
Защо $, а не нещо друго?
JQuery библиотеката осигурява функция JQuery. който ви позволява да изберете елементи, използвайки CSS селектори.
Разбира се, ако вече сте видели всичко JQuery-кода, това е може би по-свикнали с нещо като това:
$ (Документ) .ready ()
Преди безопасната употреба JQuery да изпълнява всичко, на страницата, трябва да сте сигурни, че страницата е в състояние, в което тя е готова за манипулация. С JQuery, ние трябва да положим код във функция, а след това тази функция в $ (документ) .ready (). Както можете да видите, ние използваме анонимен функция.
След като документът е готов, изпълнява функция, която се връчва на .ready (). Какво става тук? Ние използваме $ (документ), за да създадете документ JQuery-обект. и след това да извикате функцията .ready () за този обект, минавайки го функцията искаме да се изпълни.
Тъй като това е често, когато се установи, по желание можете да използвате съкратен метод - $ () функция изпълнява двойна задача като псевдоним за $ (документа) .ready (). Ако премине на функцията:
По-нататък в това ръководство, ще приемем, че темата е затворена в код $ (документ) .ready (функция ()). но тази част не е показан за краткост.
Качваме се на някои от елементите
Най-лесният нещо, което можем да направим с JQuery - е да се получи някои елементи и нещо, за да ги изпълни. Ако сте запознати с селектори CSS, получавате произволни елементи е много лесно: просто преминават подходящия избор, за да $ ().
Важно е да се разбере, че всички проби произвежда ще съдържа само тези елементи, които съществуват на страницата в момента на избора. С други думи, ако пишете VAR котви = $ ( 'A'). а по-късно добави още един елемент към вашата страница, а след това на променливите котви няма да съдържат новия елемент.
Други начини за създаване на JQuery обект
Освен прост селектор предаване $ (). можете да създадете JQuery обект и по други начини:
Моята проба съдържа нещо?
Понякога трябва да се направи нещо само, когато изберете съответства на няколко елемента. Тъй като функцията $ () винаги се връща на JQuery обекта, и то винаги е вярно. трябва да се провери съдържанието на проба, за да се определи дали е имало нещо намерен.
Внимание! Грешен код
Можем да намалим теста още повече, когато си спомним, че 0 е фалшива стойност:
Получаване на отделните елементи на пробата
Ако е необходимо да се работи с оригиналния DOM елемент в пробата, е необходимо, за да получите достъп до елемент от обекта JQuery. Например, ако искате да имате достъп директно на стойност собственост на елемента . необходимостта да се работи с оригиналния елемент DOM.
Имайте предвид, че не можете да се обадите JQuery методи за суровини DOM елементи. Ето защо, следния пример няма да работи:
Ако е необходимо да се работи с един от елементите в дадена проба, а вие искате да използвате методи JQuery за тази позиция, можете да получите нова JQuery обект, съдържащ един елемент чрез .eq (). минаваща го индекса.
Създаване на нови елементи
В функция $ е и последната част: създаване на нови елементи. Ако $ () се предава към HTML фрагмент, това ще създаде нов елемент в паметта - с други думи, елементът ще бъде създаден, но не добавя към страницата, докато не го направите.
Можете също да създадете елемент чрез преминаване на обект с информация за създаването му:
Ще разгледаме как да добавяте елементи към страницата, създадена в следващия раздел, която се фокусира върху движението на документа и да ги манипулира в.
Работа с пробата
След създаването на JQuery обект, съдържащ своя избор, вероятно ще искате нещо общо с него. Но преди това, нека разгледаме няколко принципа, които са от ключово значение за разбирането, което прави JQuery.
проба проверка
Ние можем да се определи дали пробата отговаря на определени критерии, като се използват .is (метод). Този метод е най-често се използва за предоставяне селектор като единствен аргумент. Тя връща истина или лъжа, в зависимост от това дали селекторът на пробата съответства на:
Вие също може да премине в метод .is () JQuery обект, оригиналният DOM елемент или дори функцията, ако имате нужда от цялостна проверка. Вижте документацията за повече информация.
Получаването, монтаж и имплицитно изброяване
Скритият изброяване означава, че автоматично JQuery изброява всички елементи, включени в извадката, когато се обадите за създаване метод за вземане на проби. Това означава, че ако искате да направите нещо за всички елементи, включени в извадката, не трябва да се обадя на метода за всеки елемент в проба - просто се обадете на метод за пробата себе си и JQuery ще работите с елементи за вас.
Да предположим, че искате да промените в HTML кода на всички елементи от списъка на една страница. За да направите това трябва да използваме метода на .html () за промяна на HTML код на всички избрания списък с предмети.
Можете също така да премине функция в JQuery метод за инсталация. Върнатата стойност на тази функция се използва като новата стойност, и това отнема два аргумента: индекса на елемента в пробата и старата стойност, която се опитвате да се промени. Това е полезно, когато имате нужда от информация за текущото състояние на елемента, с цел правилно да се създаде новата държава.
Overkill
Понякога проблемът, който се опитвате да решите, не се вписват в нито една от съществуващите техники JQuery и след това, което трябва да направите, е твърде много проба с помощта на метод .Всеки (). В следния код в началото на елемента от списък, ние добавите маркера съдържащ списъка на индекса.
Един от най-печелившите части на JQuery е неговата способност да метод "кука", вместо. Това означава, че можем да наречем набор от методи за проба, без да му повторение или задържане на проба в променлива. Ние дори може да направи нова извадка въз основа на предишната и всички без да се скъса веригата.
Вериги са възможни, защото всеки обстановка в метод JQuery връща извадката, на които той е бил призован. Това е изключително мощна функция, както и много библиотеки са го вземат на борда. Въпреки това, той трябва да се използва с повишено внимание. Големите вериги могат да направят кода много трудно да се чете, променя, и отстраняване на грешки. Все още няма твърди и бързи правила, колко време трябва да е верига, но дори обикновен низ по-горе може би трябва да Преструктуриране на за четливост.
Имахме много преглед на начина, кърлежи JQuery. В следващата част ще разгледаме как всъщност да започне да си взаимодействат с различни неща!
Свързани статии