JQuery

JQuery Вибірка елементів

Перш, ніж почати працювати з елементом необхідно навчитися його відбирати. Вибірка елементів в jQuery побудована також як і вибірка в CSS.

Для того, щоб зрозуміти як відбувається вибірка елементів в jQuery давайте розглянемо CSS файл.

Все що йде до фігурних дужок називається селектор.

1. Назва тега
2. клас
3. індентіфікатор

Все що записано в фігурних дужках після селектора - це властивості елемента з даними селектором.

Що насправді відбувається? Коли браузер користувача звертається до нашого 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 є фільтри вибірки.

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);
 })