ID селектор в jQuery

Публикуван: 14 април 2013
Категория: jQuery

Този урок ще бъде по-кратък от обикновено. В него ще научиш едно единствено нещо. Това е работата на ID селектора в jQuery.

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

Демо Свали

Начинаещите в повечето случаи задават елементарни въпроси. Същевременно очакват и елементарни отговори. В последно време забелязвам, че когато някой “начинаещ” се затрудни с определена задача и поиска съвет от някой “напреднал”, вторият му дава адекватно решение, но пропуска да обясни защо е така. Т.е. с течение на времето “начинаещия” създава “датабаза” от готови решения, които не се базират на разбиране. Още при следващия проблем, за който “начинаещия” няма готово решение, той отново се обръща за помощ. Това е един постоянен кръговрат, в който “начинаещия” си остава начинаещ (може би с минимален напредък).

Това трябва да спре.

Правилното разбиране на материала не се базира върху готови решения. То се базира върху стабилна основа от знание. Както се казва в една известна поговорка:

“Дай на човек една риба и той ще яде един ден. Научи го да лови риба и той винаги ще има храна.”

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

Какво представлява ID селектора?

(ID селектор на страницата на jQuery)

Този селектор ти позволява да селектираш даден елемент от страницата посредством стойността в id атрибута. Това става по следния начин:

$("#stoinost")

..., където:

# - подсказва на кода, че това е id селектор; и
stoinost - е стойността на id атрибута.

Възможен html код пасващ на селектора по-горе е следния:

<h2 id="stoinost">Заглавие</h2>

Може би забелязваш, че #stoinost има същия синтаксис като id селектора в CSS. Това е напълно вярно. Едно от нещата, които правят jQuery толкова лесен за научаване е факта, че можеш да използваш голяма част от познатите ти CSS селектори.

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

<-- Неправилно -->
<h2 id="zaglavie">Заглавие</h2>
<h2 id="zaglavie">Заглавие</h2>

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

От гледна точка на време за изпълнение, ID селектора е изключително бърз. Това се дължи на факта, че jQuery използва JavaScript функцията document.getElementById(), която е супер ефикасна.

Друг фактор, за който трябва да внимаваш е използването на специалните мета-символи !"#$%&'()*+,./:;<=>?@[\]^`{|}~ в id стойността. Разгледай следния html код:

<h2 id="h2.zaglavie[1]">Заглавие</h2>

За да селектираш този елемент, трябва да “ескейпнеш” всеки от символите . [ ] с две ляво наклонени черти \\. Селектора ще придобие следния вид:

$("#h2.zaglavie[1]") // грешно
$("#h2\\.zaglavie\\[1\\]") // правилно

Упражнение

В това упражнение ще ти покажа нагледно как работи ID селектора.

Стъпка 1

Ще създам страница с няколко заглавия, между които ще поставя по един текстов параграф. Всяка двойка заглавие + параграф ще бъде оградена в div с уникално id. HTML кода изглежда така:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ID селектор в jQuery</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="custom.js" type="text/javascript" ></script>
    </head>
    <body>
        <div id="div-edno">
            <h2 id="zaglavie.1">Заглавие 1</h2>
            <p>Lorem ipsum dolor ... atis, accusamus.</p>
        </div>
        <div id="div-dve">
            <h2 id="zaglavie.2">Заглавие 2</h2>
            <p>Lorem ipsum dolor ... atis, accusamus.</p>
        </div>
        <div id="div-tri">
            <h2 id="zaglavie.3">Заглавие 3</h2>
            <p>Lorem ipsum dolor ... atis, accusamus.</p>
        </div>
    </body>
</html>

Кода тук е доста ясен. На ред 8 използвам Google Hosted Libraries, за да добавя jQuery към страницата. Имам специален урок, в който можеш да научиш малко повече за тази услуга.

На ред 9 добавям външен JavaScript файл, в който всъщност ще добавя целия jQuery код.

Предпочитам да използвам външни CSS и JavaScript файлове, защото така кода става по-чист и разбираем. Съветвам те ти също да използваш тази техника. Това значително ще подобри качеството на кода ти!

Стъпка 2

Във външния CSS файл използвам следния стил. Този урок не е свързан със CSS затова няма да му обръщам много внимание.

body {
    font: 14px/21px Verdana, Arial, sans-serif;
    width: 550px;
    margin: 0 auto;
}

Резултат:

Стъпка 2: Добавяне на базов стил към страницата

Стъпка 3

Сега отвори външния js файл и добави в него следния код.

$(document).ready(function () {
    $("#div-edno").css("border" , "2px solid red");
    $("#div-dve").css("backgroundColor" , "#bbb");
    $("#zaglavie\\.3").css("backgroundColor" , "orange");
});

Значението на израза $(document).ready(function () { } е разгледан подробно в Стъпка 5 от упражнението към урока “Въведение в jQuery”, затова няма да го повтарям отново. Накратко: кода поставен в този израз се изпълнява след напълното зареждане на страницата.

Сигурен съм, че дори един бърз поглед върху кода по-горе ти е достатъчен, за да придобиеш добра представа за очаквания резултат. Чрез$("#div-edno") селектирам div с id="div-edno".

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

В случая мога да използвам няколко различни метода, чрез които да променя стила/поведението на елемента. За да не усложнявам допълнително нещата ще използвам метода .css(). В някой бъдещ урок ще ти покажа как работи, но за сега няма да му обръщам голямо внимание. Най-важното, което трябва да знаеш е, че чрез този метод можеш да промениш стила на елемента (един или повече).

Т.е. кода на ред 2 ще добави 2px червена рамка около елемента с id="div-edno". Кода на ред 3 ще промени фона на елемента с id="div-dve", а кода на ред 4 ще промени фона на елемента с id="zaglavie.3".

Това е крайният резултат:

Резултат от упражнението с ID селектор

Заключение

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

Надявам се, че този урок ти помогна да научиш нещо повече за ID селектора в jQuery. Той работи доста ефективно, но пък ти позволява да избереш само един елемент от страницата. За да селектираш повече от един, трябва да използваш друг тип селектор. Един добър вариант е class селектора, за който ще научиш в следващия урок.

Използваш ли ID селектор в своя код или предпочиташ друг тип? Какъв е опита ти с jQuery? Намери ли урока за полезен? Ще се радвам да чуя мнението ти.

Демо Свали

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

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

Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други