...

elma365.replace(‘jQuery’, ‘JavaScript’)

Тема в разделе "Примеры сценариев", создана пользователем ava_var, 7 май 2023.

  1. ava_var

    ava_var Активный участник

    Сегодня многие разработчики все еще используют jQuery для различных задач в веб-разработке. Но со временем это библиотека теряет свою актуальность и переход к нативному JavaScript уже становится более выгодным. Нативный JavaScript по сравнению с библиотеками (такими как jQuery) - позволяет писать код более легким и простым для тестирования и поддержки. Это также позволяет увеличить скорость работы при использовании современных браузеров.

    Перед тем, как начать переход на нативный JavaScript, необходимо знать основы языка JavaScript. Если вы еще не освоили его основы, я рекомендую начать с изучения основных понятий.(примеры сайтов: https://learn.javascript.ru/, https://developer.mozilla.org/ru/, https://doka.guide/)

    Одним из основных моментов в переходе с jQuery на нативный JavaScript является понимание селекторов. Селекторы используются для поиска элементов на странице. В JavaScript они реализованы в виде метода document.querySelector() (или document.querySelectorAll() для множественного выбора).

    Для работы с DOM в нативном JavaScript можно использовать методы, похожие на те, которые используются в jQuery, такие как .addClass(), .removeClass(), .hide() и .show().

    Пример использования этих методов для добавления или удаления класса из элемента:
    Код:
    
    // jQuery - добавление/удаление класса для элемента
    const element = $('.elem');
    element.addClass('newClass');
    element.removeClass('oldClass');
    Код:
    
    // JavaScript - добавление/удаление класса для элемента
    var element document.querySelector('.elem');
    element.classList.add('newClass');
    element.classList.remove('oldClass');
    Также следует отметить, что для манипулирования элементами DOM можно использовать более мощные методы, такие как document.createElement(), document.appendChild(), document.getElementById() и другие.

    Примеры перехода на нативный JavaScript:
    • Доступ к данным формы:
    Код:
    
    // jQuery - получить значения с контролов формы
    const name = $('#name').val();
    const 
    age = $('#age').val();
    Код:
    
    // JavaScript - получить значения с контролов формы
    const name document.querySelector('#name').value;
    const 
    age document.querySelector('#age').value;
    • Отображение/скрытие элемента:
    Код:
    
    // jQuery скрыть/показать элемент
    const element = $('#element');
    element.hide(); // hide
    element.show(); // show
    Код:
    
    // JavaScript скрыть/показать элемент
    const element document.querySelector('.element');
    element.style.display 'none'// hide
    element.style.display 'block'// show
    • Изменение содержимого элементов:
    Код:
    
    // jQuery - изменить значение/контент элемента
    const element = $('.element');
    const 
    content 'Content to change';
    element.innerHTML content;

    const 
    input =$('.form_input');
    const 
    new_value '123456';
    input.val(new_value);
    Код:
    
    // JavaScript - изменить значение/контент элемента
    const element document.querySelector('.element');
    const 
    content 'Content to change';
    element.innerHTML content;

    const 
    input document.querySelector('.form_input');
    const 
    new_value '123456';
    input.value new_value;
    Как видно из примеров выше, нативный JavaScript может быть полезен даже при решении простых задач, которые можно решать с помощью jQuery. Тем не менее, нативный JavaScript более гибкий и позволяет решать более сложные задачи. Чтобы получить их разнообразие, следует начать понимать, как работать с нативным JavaScript.

    Отдельно разберем $(document).ready()
    Код:
    
    // Пример кода с выдуманного проекта
    <script>
    $(
    document).ready(() => {
        const 
    element = $(.container’);
        
    element.append(<div><%= Context.data.test%></div>)
    })
    <
    script>
    Доподлинно не известно, но скорее всего разработчик ожидает что его код будет выполнен после того, как загрузится весь контент на странице. Но тут ловушка от SPA-приложений - страница уже загружена и событие, которое срабатывает после загрузки - уже давно сработало. Поэтому в данном случае не поможет переход на DOMContentLoaded или onLoad. Чтоб добиться нужно эффекта, рекомендую почитать статью Ожидание события или элемента на форме или изучите возможности MutationObserver.
    Есть еще один способ, который отработает в большинстве случаев - setTimeout
    Код:
    
    <script>
    setTimeout(() => {
        const 
    element document.querySelector(.container’);
        
    element.insertAdjacentHTML('beforeend','<b>Any Content</b>');
    }, 
    500)
    </script>
    Да, метод не надежный, но вполне себе альтернатива сложным функциям. Задержка в 500мс выбрана случайно - для своего проекта подбирайте данную величину эмпирически, начиная с 0.

    Приглашаю в комменты - поделитесь тем, как вы заменяете jQuery
  2. a.shilyaev

    a.shilyaev Новичок

    Можно ли реализовать на js - поиск элемента, например кнопки: по классу + название кнопки?
    Пример на jquery:
    let button = $('.btn.btn-primary:contains(" Сохранить ")');
  3. ava_var

    ava_var Активный участник

    "Сохранить" - это не совсем название кнопки, скорее ее содержимое :)
    Можно сделать вот так
    Код:
    
    let button = [...document.querySelectorAll('.btn.btn-primary')].find(btn => btn.innerHTML.includes('Сохранить'))