Как исходный код на jQuery выглядит на JavaScript

197
11 мая 2019, 02:40

У меня есть код на jQuery, но я хочу разобраться, как он работает и как выглядит на чистом JS. Можете мне пожалуйста помочь, сконцентрировав его в JS?

<script>
        $('img.svg').each(function() {
            var $img = $(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');
            $.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');
                // Add replaced image's ID to the new SVG
                if (typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if (typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass + ' replaced-svg');
                }
                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');
                // Replace image with new SVG
                $img.replaceWith($svg);
            }, 'xml');
        });
    </script>
Answer 1

$ в JQ похож на "чистый" document.querySelectorAll;

each() можно заменить на "чистый" forEach();

attr() это getAttribute(), setAttribute() и т.д.

$.get это var x = new XMLHttpRequest(); x.open("GET", "%URL%", true); ... и т.д.

replaceWith это removeChild и appendChild (возможно еще пара методов)

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

READ ALSO
React синтаксис

React синтаксис

изучаю react, есть код

193
Ломается JS скрипт [закрыт]

Ломается JS скрипт [закрыт]

Есть JS скриптАнимация должна работать нормально

180
Смена роутинга для компонентов

Смена роутинга для компонентов

У меня есть три компонента:

224