JQuery
JQuery Вибірка елементів
Перш, ніж почати працювати з елементом необхідно навчитися його відбирати. Вибірка елементів в jQuery побудована також як і вибірка в CSS.
Для того, щоб зрозуміти як відбувається вибірка елементів в jQuery давайте розглянемо CSS файл.
Все що йде до фігурних дужок називається селектор.
- Назва тега
- клас
- індентіфікатор
Все що записано в фігурних дужках після селектора - це властивості елемента з даними селектором.
Що насправді відбувається? Коли браузер користувача звертається до нашого CSS-файлу, коли він доходить до якогось селектора, то починає виконувати властивості відповідні елементу з даними селектором. Наприклад в CSS файл:
p { font-family: Tahoma; font-size: 12px; }
Тепер коли браузер дійде до елемента
вітання
, То до нього застосовуватиметься ці властивості.Тепер давайте подивимося як відбувається вибірка дочірніх елементів в CSS. Наприклад нам необхідно застосувати наведені вище CSS властивості не до всіх абзаців, а до абзаців з ідентифікатором logo. Тоді CSS буде виглядати наступним чином:
p #logo { font-family: Tahoma; font-size: 12px; }
а якщо ми хочемо застосувати дані властивості не тільки до абзаців з id = "logo", а до всіх елементів з id = "logo", тоді наш CSS виглядає наступним чином:
#logo { font-family: Tahoma; font-size: 12px; }
Ми з Вами згадали, як відбувається вибірка елементів в CSS. Як я вже говорив вище, що вибірка елементів в jQuery здійснюється за аналогією з CSS. Так якщо ми хочемо вибрати всі абзаци, то пишемо наступний код:
$ ( "P");
Або якщо нам необхідно вибрати всі елементи зі сторінки з id = "logo", то запишемо це наступним чином:
$ ( "# Logo");
Аналогічно ми може відібрати всі елементи по класу, наприклад class = "logo":
$ ( ". Logo");
Якщо ж ми хочемо вибрати дочірні елементи, наприклад все абзаци
мають ідентифікатор logo, то нам необхідно прописати:
$ ( "P #logo");
Наступний вид вибірки це вибір наступного елементу. Наприклад, у нас є наступний html-код:
тест 1тест 2
І нам необхідно вибрати саме тег p, в якому знаходитися текст "Тест 2". Як бачите зробити це не так легко, використовуючи представлені вище вибірки. Але в jQuery є спеціальний селектор, який дозволяє спростити нам задачу. Це селектор вибору наступного елемента +. Тобто в нашому випадку ми можемо прив'язатися до div з id = "logo" і застосувавши даний селектор вибрати наступний елемент:
$ ( "# Logo + p");
Іноді виникає ситуація, коли необхідно вибрати всі дочірні елементи. Для цього в jQuery є селектор>. Наприклад, у нас є наступний html код:
<Div id = "content"> <P> Привіт </ p> <P> Ми починаємо вивчати jQuery </ p> <P> І зараз ми знайомимося з селекторами вибірки елементів </ p> </ Div>
І нам необхідно вибрати все p, які знаходяться всередині тега div id = "content" Наш код буде виглядати наступним чином:
$ ( "# Content> p");
Наступний тип вибірки в jQuery - це вибірка елементів за значеннями атрибутів. Дана вибірка дуже часто зустрічається в проектах, наприклад для реалізації меню, що випадає. Наприклад, є у нас html-код:
<Img src = "images / 1.png" width = "50" height = "50"> <Img src = "images / 2.png" width = "50" height = "50"> <Img src = "images / 3.png" width = "50" height = "50">
і нам необхідно вибрати все картинки, у яких width = "50". Тоді вибірка в jQuery буде виглядати наступним чином.
$ ( "Img [width = 50]");
Наступний тип вибірки в jQuery - це вибірка по атрибутам значення, яких починаються з якогось умови. Наприклад, у нас є html-код:
<Img src = "images / img1.png" width = "50" height = "50"> <Img src = "images / img2.png" width = "50" height = "50"> <Img src = "images / img3.png" width = "50" height = "50">
і нам необхідно вибрати все картинки у яких атрибут src починається з images / img, тоді ця вибірка в jQuery здійснюється наступним чином:
$ ( "Img [src ^ = images / img]");
За аналогією ми можемо зробити вибірку по атрибутам значення, яких закінчуються якимось умовою. Тобто з попереднього html-коду ми хочемо вибрати всі png картинки. Тоді вибірка в jQuery буде виглядати наступним чином:
$ ( "Img [src $ =. Png]");
Наступна вибірка в jQuery - це коли необхідно вибрати по атрибуту значення якого може бути в будь-якому місці. З попереднього html-коду нам необхідно вибрати все картинки в назві, яких є слово "img".
$ ( "Img [src * = img]");
Ми розглянули основні методи вибірки елементів в jQuery, які дозволяють нам вибрати будь-який елемент, а потім проводити над ним певні дії. Більш детально про методи вибірки в jQuery Ви можете прочитати на
JQuery Фільтр вибору елементів
У jquery існує безліч методів для фільтрації обраних елементів, про які Ви можете прочитати в офіційній документації. А я розгляну тільки найнеобхідніші і часто вживані (на мій погляд) фільтри.
Вибір парних елементів even
Виникає така ситуація, коли необхідно вибрати з таблиці тільки парні елементи. Для цього розробники створили спеціальний фільтр: even. Наприклад у нас є таблиця:
<Table id = " 'table'"> <Tbody> <Tr> <Td> 1 </ td> <Td> Ім'я 1 </ td> </ Tr> <Tr> <Td> 2 </ td> <Td> Ім'я 2 </ td> </ Tr> <Tr> <Td> 3 </ td> <Td> Ім'я 3 </ td> </ Tr> <Tr> <Td> 4 </ td> <Td> Ім'я 4 </ td> </ Tr> </ Tbody> </ Table> <Pre>
І нам необхідно вибрати парні рядки. Для цього вибираємо необхідні елементи і накладаємо на них фільтр парності. Ось, так це виглядає в jQuery:
$ ( '# Table tr: even');
Таким чином ми вибрали всі парні рядки. Але тут будьте уважні - все парні рядки з точки зору javascript. А в javascript відлік починається з 0, тому у нас будуть обрані перший рядок в таблиці і третій рядок у таблиці.
Вибір непарних елементів odd
Протилежний (якщо можна так сказати) попереднього фільтру є фільтр odd - вибір непарних елементів. Припустимо з таблиці нам необхідно вибрати непарні рядки. Тоді можна застосувати фільтр odd і ось так це буде виглядати:
$ ( '# Table tr: odd');
Вибір першого елемента first
Якщо нам необхідно вибрати тільки один елемент - перший, то для цих цілей підійде фільтр first. Наприклад, з таблиці нам необхідно вибрати тільки перший рядок, тоді вибірка даного елемента буде виглядати наступним чином:
$ ( '# Table tr: first');
Вибір останнього елемента last
Для вибору останнього елемента застосовується фільтр last. Наприклад з нашої таблиці необхідно вибрати останній рядок. Тоді наша вибірка:
$ ( '# Table tr: last');
Фільтр заперечення not
Даний фільтр необхідний для вибірки всіх елементів, крім елементів які підходять умові. Наприклад, у нас є
</ Pre> <Div id = " '1'"> </ div> <Div> Приклад. </ Div> <Pre>
Нам необхідно вибрати все div, крім тих div-ів, які знаходяться всередині div-а c id = '1'. І якщо ми напишемо:
$ ( 'Div');
Те виберемо все div, навіть ті які знаходяться в div c id = '1', тому в даному випадку необхідно застосувати фільтр not.
$ ( 'Div: not (# 1 div)');
І тим самим ми виберемо все необхідні нам div
Вибір елемента, який містить певний елемент has
Іноді бувають ситуації, що необхідно вибрати елемент, який містить в собі інший визначений елемент. І для цього в jquery існує фільтр has. Наприклад, нам необхідно вибрати div з попереднього прикладу, в якому є ще div. Тоді наша вибірка буде мати наступний вигляд:
$ ( 'Div: has (div)');
Тобто вибираємо все div, а потім застосовуємо фільтр has в якому вказуючи, що обрані div в собі повинні містити інші div
Вибір елемента по вмісту
Наприклад нам необхідно вибрати якийсь елемент по його вмісту, тоді нам на допомогу приходить фільтр contains. З наведеного вище коду нам необхідно вибрати div, в якому міститься "Приклад":
$ ( 'Div: contains (Привіт)');
Фільтр вибору елементів без спадкоємців empty
Бувають такі ситуації, коли необхідно з обраних елементів залишити тільки ті, які не мають спадкоємців і нічого не містять. Наприклад, у нас є html код
</ Pre> <Table> <Tbody> <Tr> <Td> 1 </ td> <Td> </ td> </ Tr> <Tr> <Td> </ td> <Td> 2 </ td> </ Tr> </ Tbody> </ Table> <Pre>
І нам потрібно вибрати всі td у яких немає спадкоємців.
$ ( 'Td: empty');
І в результаті у нас будуть обраний другий <td> з першого <tr> і перший <td> з другого <tr>.
Фільтр по прихованим елементам
Досить часто в jQuery доводиться вибирати все приховані елементи. І для цього існує спеціальний фільтр hidden. Тобто якщо нам необхідно вибрати все div-и, які на даний момент є прихованими, то необхідно записати наступний код:
$ ( 'Div: hidden');
Фільтр по видимим елементам
Протилежний за значенням фільтру hidden - фільтр visible, який фільтрує всі видимі елементи. Тобто якщо нам необхідно вибрати все div-и, які в даний момент видимі.
$ ( 'Div: visible');
JQuery Методи: text, hide, show, width, heigth, html
Після вибору необхідного елемента в jQuery ми повинні зробити над ним дії. У даній статті ми і зупинимося на діях, які можна виробляти над елементами за допомогою jQuery.
Як Ви знаєте JavaScript працює з DOM моделлю сторінки. Тому нам необхідно, що код JavaScript виконувався тільки після побудови моделі DOM. Для цього в jQuery є метод ready, який чекає побудови DOM моделі документа.
Тому для виконання скрипта після побудови DOM моделі використовуйте наступну конструкцію:
$ (Document) .ready (function () {<код скрипта>})
Метод text ()
Метод text () необхідний для отримання або зміни тексту елемента. Припустимо у нас є наступний html-код:
<Div id = 'text'> Вітання. </ Div>
І ми хочемо отримати даний текст, тоді нам необхідно вибрати елемент div з id = text і застосувати до нього метод text ().
$ (Document) .ready (function () { $ ( '# Text'). Text (); })
Для того щоб змінити текстове значення елемента необхідно нашому методу text передати параметр. Наприклад, ми хочемо змінити текст в вище наведеному прикладі на "Ласкаво просимо на сайт web-programming.com", тоді наш код буде виглядати наступним чином:
$ (Document) .ready (function () { $ ( '# Text'). Text ( 'Ласкаво просимо на сайт web-programming.com'); })
Метод hide ()
Якщо нам необхідно заховати елемент, то в jQuery існує метод hide (speed, callback). Даному методу можна передати два параметри speed - швидкість зникнення, вказується час в мілісекундах і callback - функція, яка буде виконана після зникнення елемента. Наприклад, нам необхідно щоб div з id = text (з прикладу вище) зник за 2 секунди, тоді наш код буде:
$ (Document) .ready (function () { $ ( '# Text'). Hide (2000); })
Метод show ()
Протилежний метод hide - це show, якщо нам необхідно показати елемент. Аналогічно як і метод hide, show приймає два параметри - це швидкість появи і функцію, яка буде виконана після того, як елемент з'явитися.
$ (Document) .ready (function () { $ ( '# Text'). Show (2000); })
Метод width ()
Для того, щоб встановити або отримати ширину елемента в jQuery є спеціальний метод width. Якщо нам необхідно отримати ширину елемента div з id = text (з наведеного вище прикладу), то необхідно написати наступний код:
$ (Document) .ready (function () { $ ( '# Text'). Width (); })
Якщо ж нам необхідно встановити ширину, то методом width необхідно передати параметр. Якщо не вказувати одиниці виміру (%, em), то за замовчуванням буде px.
$ (Document) .ready (function () { $ ( '# Text'). Width (30); })
Метод heigth ()
Для зміни або обчислення висоти елемента в jQuery використовується метод heigth (). Даний метод працює за аналогією з методом width.
Метод html ()
Якщо ми хочемо отримати або змінити html код елемента, то необхідно використовувати метод html (). Даний метод працює за аналогією з методами heigth () і width (). Тобто якщо ми нашу методу не передається параметри, то метод повернемо нам весь html код, який знаходиться в даному елементі. Якщо ми передамо параметр, то змінимо html код в нашому елементі.
JQuery Методи: fadeOut, fadeIn, fadeTo, slideUp, slideDown
Метод fadeOut ()
Метод fadeOut (time, function) служить для плавного зникнення елемента (елемент змінює свою прозорість, аж до повного зникнення). Як параметри приймає:
- time - час зникнення
- function - функція, яка буде виконана після зникнення елемента
Наприклад, є у нас html-код:
<Div id = 'text'> Вітання. </ Div>
Ми хочемо, щоб елемент div з id = text плавно зник. Для цього напишемо наступний код:
$ (Document) .ready (function () { $ ( '# Text'). FadeOut (2000); })
Метод fadeIn ()
Метод fadeIn (time, function) служить для плавного появи елемента. Елемент змінює свою прозорість до повної видимості. Як параметри приймає:
- time - час появи
- function - функція, яка буде виконана після зникнення елемента
$ (Document) .ready (function () { $ ( '# Text'). FadeIn (2000); })
Метод fadeTo ()
Метод fadeTo (time, opacity, function) - дозволяє змінити ступінь прозорості елемента до певної величини. Як параметри приймає:
- time - час ізменненія
- opacity - ступінь прозорості від 0 до 1
- function - функція, яка буде виконана після зникнення елемента
приклад:
$ (Document) .ready (function () { $ ( '# Text'). FadeTo (2000, 0.5); })
Метод slideUp ()
Метод slideUp (time, function) дозволяє зникнути елементу шляхом їдучи вгору. Як параметри приймає:
- time - час появи
- function - функція, яка буде виконана після зникнення елемента
приклад:
$ (Document) .ready (function () { $ ( '# Text'). SlideUp (2000); })
Метод slideDown ()
Метод slideDown (time, function) дозволяє показати елемент. Елемент як би виїжджає вниз. Як параметри приймає:
- time - час появи
- function - функція, яка буде виконана після зникнення елемента
приклад:
$ (Document) .ready (function () { $ ( '# Text'). SlideDown (2000); })
JQuery Методи: attr, removeAttr, addClass, removeClass, css, animate
Я нагадаю, що jQuery - це фреймворк JavaScript.
На практиці досить часто необхідно змінювати різні атрибути у html елементів, додавати і видаляти класи, переглядати і змінювати різні css-властивості елементів. Для цього в jQuery є спеціальні методи, які ми і розглянемо.
Метод attr ()
Метод attr (key, value) служить для повернення або зміни значення атрибуту у елемента, де:
- key - назва атрибута
- value - значення атрибута (якщо значення вказано, то змінює його, в іншому випадку просто повертає)
Наприклад, у div з id = test є width = 300px і ми хочемо дізнатися його ширину
$ (Document) .ready (function () { $ ( '# Test'). Attr ( 'width'); })
Метод removeAttr ()
Метод removeAttr (key) - видаляє вказаний атрибут, де:
- key- назва атрибута
Наприклад у нас є div з id = test є width = 300px і ми хочемо видалити даний атрибут:
$ (Document) .ready (function () { $ ( '# Test'). RemoveAttr ( 'width'); })
Метод addClass ()
Метод addClass (name) - додає клас до вибраного елементу з ім'ям name. Наприклад, додамо до div з id = test клас example:
$ (Document) .ready (function () { $ ( '# Test'). AddClass ( 'example'); })
Метод removeClass ()
Метод removeClass (name) - видаляє клас у елемента з ім'ям name.
Наприклад у нас є div з id = test і, ми хоті видалити наш клас у даного div-а:
$ (Document) .ready (function () { $ ( '# Test'). RemoveClass ( 'example'); })
Метод css ()
Метод css (name, value) - дозволяє отримати css властивість елемента з імененем name (якщо не задано другим параметром значення даного властивості) або змінювати значення css властивості з ім'ям name на значення value (якщо другий параметр value заданий) Наприклад у нас є заголовки h1 і ми хочемо змінити розмір шрифту до 20px, тоді:
$ (Document) .ready (function () { $ ( 'H1'). Css ( 'font-size', 20); })
Метод animate ()
До сих пір ми розглядали проста зміна властивостей елементів, але в jQuery є ще один чудовий метод, який дозволяє змінювати властивості елемента плавно, як би анімуючи його. Це метод animate (settings, time, function), де:
- setting - властивості, які будуть змінювати своє значення
- time - час за який дані властивості мінятимуть значення
- function - функція, яка почне своє виконання після, того як відбудеться зміна.
Наприклад у нас є div з id = test і width = 1000px. Ми хочемо змінити ширину даного div до 500px за 4 секунди
$ (Document) .ready (function () { $ ( '# Test'). Animate ({ 'width': '500px'}, 4000); })
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.