Jquery & the dom
Большинство веб -программистов знают и любят jQuery за его упрощение с JavaScript и эффективности. Манипулирование DOM с помощью jQuery может быть очень мощным с точки зрения веб -программирования и дизайна. Для начинающего JQUERY может показаться пугающим, поэтому вот 5, возможно, наиболее используемых функций JQUERY и инструментов, когда -либо должны иметь веб -дизайнер в своем наборе инструментов.
1. Найти
Метод поиска, пожалуй, наиболее полезен для прохождения DOM или нацеливания на определенный элемент, похороненную глубоко в дереве DOM. Например, скажем, у нас есть следующий код:
Title
Hello
Скажем, мы хотели бы получить доступ к элементу H2, который мы будем писать в jQuery:
$('.section').find('h2');
Теперь мы можем манипулировать этим элементом и изменить его текст и цвет как так:
$('.section').find('h2').css('color','red');
$('.section').find('h2').html('Subtitle');
Мы также можем использовать поиск по классу или идентификатору вместо тега.
$('.section').find('.title');
2. уравнение
Если вы знакомы с CSS Pseudo Selecter Nth-Child () или nth-of-type (), то подумайте о методе EQ () как о эквиваленте jQuery. Скажем, у нас есть коллекция элементов, и мы хотим получить доступ к определенному ребенку или, может быть, все они постепенно:
- Tony
- Bruce
- Steve
- Natasha
В jQuery мы можем получить доступ к второму элементу как так:
$('.myList li').eq(1).html('Banner');
*Примечание: в отличие от селектора nth-child (), первый элемент в EQ () составляет 0, а не 1.
Мы также можем действительно усилить мощность и сделать что -то классное, если хотим. Давайте заменим содержимое текста каждого элемента списка, используя метод EQ.
var array = ['Stark','Banner','Rodgers','Romanoff']; //create an array with new text contents
for(i=0;i<=array.length;i++) {
$('.myList li').eq(i).html(array[i]); //loop over the array and overwrite the text contents with the contents in our array
}
3. Сплит
Этот очень полезен для быстрого создания элементов массива. Скажите, что у нас есть P -тег, который содержит текст, который мы хотим разделить и манипулировать так:
power,time,soul,reality,space,mind
Мы можем манипулировать этим текстовым содержимым в jQuery:
var stones = $('.stones p').html(); //assign the contents of our p tag to a variable called stones
var newarray = stones.split(','); //split the contents by commas, this creates an array: ['power', 'time', 'soul','reality','space','mind']
Теперь мы можем манипулировать этим массивом любым способом, который мы хотим, возможно, добавить каждый элемент в список:
$('.stones').html('Here are the six infinity stones:
- '+newarray[0]+'
- '+newarray[1]+'
- '+newarray[2]+'
- '+newarray[3]+'
- '+newarray[4]+'
- '+newarray[5]+'
Аккуратный.
4. addclass/removeClass
Метод добавления/удаления класса является самоэкспланирующим. Если мы хотим добавить класс в элемент на основе какого -то события (или статически) и/или удалить другой класс, мы можем сделать это так:
Good answer!
В нашем CSS мы можем стилизовать этот элемент
.correct {color:green}
Мы также добавим стиль для класса «неверно»
.incorrect {color:red}
В нашем jQuery:
$('.correct').html('Wrong answer.').removeClass('correct').addClass('incorrect');
5. родители/родители
Этот может быть крайне полезен для обработки событий на падении среди многих других применений. Представьте, что у нас есть элемент контейнера со многими детьми элементами внутри. Используя метод родителей/родителей, мы можем получить доступ к родителям ребенка на любом уровне, который мы желаем. Вы можете думать об этом как о обратной стороне метода поиска.
Hello
С jQuery мы можем получить доступ к родителям нашего тега H1, как SO:
$('.title').parents('.container').css('border','2px solid black');
Мы также можем использовать Parentsuntil
$('.title').parentsUntil('.container').css('border','2px solid black');
Обратите внимание, как это добавляет другую границу. Разница между Parentsuntil () и родителями () – это родители () принесут нам всех родителей этого элемента (опциозное, отфильтрованное селектором в параметре), тогда как Parentsuntil () принесет нам всех родителей этого элемента, кроме элемента указан в его параметре.
Мы также можем использовать родителей () в сочетании с поиском для более мощной техники, проходящего без ограничений.
Another title
This is some text
Hello
Hi there
...//some other divs with h1 tags...
Скажем, мы хотели бы динамически манипулировать тегом H1 содержимым «привет» с нашей точки зрения P), например, Нажатие на тег P должен запустить какое -то событие в тег H1. Это кажется довольно сложным, особенно если у нас есть несколько DOV с тегами H1, которые также имеют одинаковый класс «раздел» и «контейнер», а также, поскольку у нашего тега H1 нет класса или идентификатора. Но с использованием родителей () и найти () мы можем достичь этого довольно легко.
//after a click on our p tag with class "text"...
$('.text').parents('.container').find('.section').find('.inner h1'); //from our "text" element we go all the way up its parents and stop at "container" then from there we run a search for a "section" element and then again for a "inner" and then our h1
//we can then make some changes to it
$('.text').parents('.container').find('.section').find('.inner h1').html('Hello World');
Бонус: добавление/приготовление метода
Метод Append (и Prevend), пожалуй, самый используемый метод в веб -программировании. Append помогает нам добавить элементы и текст в DOM Динамически, где бы мы ни хотели. В отличие от метода html (), который записывает элементы и текст в DOM, эффективно перезаписывая его содержимое новым контентом, добавление/подготовка добавляет к элементу, не перезаписывая то, что было ранее внутри него.
Простой пример может помочь нам продемонстрировать его использование:
How are you today
Чтобы добавить текст после привет, мы можем написать в нашем jQuery:
$('p').append(', John?');
Это даст “как ты сегодня, Джон?”
Мы также можем использовать Prevend Так:
$('p').prepend('Welcome John, ');
Это даст “добро пожаловать, Джон, как дела сегодня”
или оба вместе:
$('p').append(', John?');
$('p').prepend('Welcome John, ');
Это даст: «Добро пожаловать, Джон, как дела сегодня, Джон?»
Хорошая вещь в этом заключается в том, что порядок, в котором мы пишем эти строки кода, не имеет значения, любой заказ даст тот же результат.
Мы также можем добавить html -элементы с добавлением/приготовлением, а не только текстом:
$('p').append($('')); //this will add a button after the text
Вывод
JQuery – это мощная и эффективная библиотека (язык программирования), и эти общие функции помогают нам пройти и манипулировать DOM без ограничений.
Дайте мне знать, что вы думаете об этих функциях jQuery, и если вы используете их так часто, как я думаю, или если вы думаете, что есть функции более полезны, чем те, которые я упоминаю. Я хотел бы услышать от вас.
Как всегда, спасибо за чтение, и я увижу вас в следующем посте!
Уриэль Биттон Веб -сайт: www.scorpionedge.com Портфолио: urielbitton.design Эл. адрес: urielas@hotmail.com
Оригинал: “https://dev.to/urielbitton/5-useful-jquery-functions-every-web-programmer-should-know-advanced-dom-traversal-techniques-1g6”