Как преобразовать jq в чистый js?

282
10 октября 2017, 05:52

Есть код, который использует jq. Не хотелось бы загружать библиотеку , только из-за нескольких строк кода. Помогите преобразовать код в чистый js.

$('document').ready(function(){
    $('.historyAPI').on('click', function(e){      
        // отменяем стандартное действие при клике
        e.preventDefault();
        // Получаем адрес страницы
        var href = $(this).attr('href');
        // Передаем адрес страницы в функцию
        getContent(href, true);
    });
});
// Добавляем обработчик события popstate, происходящего при нажатии на кнопку назад/вперед в браузере  
window.addEventListener("popstate", function(e) {
    // Передаем текущий URL
    getContent(location.pathname, false);
});
// Функция загрузки контента
function getContent(url, addEntry) {
    $.get(url).done(function(data) {
        // Обновление только текстового содержимого в блоке
        $('#content').html($(data).find("#content").html());
        $('#content2').html($(data).find("#content2").html());
        // Если был выполнен клик в меню - добавляем запись в стек истории сеанса
        // Если была нажата кнопка назад/вперед, добавлять записи в историю не надо
        if(addEntry == true) {
            // Добавляем запись в историю, используя pushState
            history.pushState(null, null, url); 
        }
    });
}

Пока что получилось вот так:

document.addEventListener('DOMContentLoaded',function(){
[].forEach.call( document.getElementsByClassName('historyAPI'), function(e) {
       // отменяем стандартное действие при клике
        e.preventDefault();
        // Получаем адрес страницы
        var href = $(this).attr('href');
        // Передаем адрес страницы в функцию
        getContent(href, true);
});

// Добавляем обработчик события popstate, происходящего при нажатии на кнопку назад/вперед в браузере  
window.addEventListener("popstate", function(e) {
    // Передаем текущий URL
    getContent(location.pathname, false);
});
// Функция загрузки контента
function getContent(url, addEntry) {
    $.get(url).done(function(data) {
        // Обновление только текстового содержимого в сером блоке
        $('#content').html($(data).find("#content").html());
        $('#content2').html($(data).find("#content2").html());
        // Если был выполнен клик в меню - добавляем запись в стек истории сеанса
        // Если была нажата кнопка назад/вперед, добавлять записи в историю не надо
        if(addEntry == true) {
            // Добавляем запись в историю, используя pushState
            history.pushState(null, null, url); 
        }
    });
}
Answer 1
  1. $() - в контексте получения массива элементов и .find() можно заменить на querySelectorAll();
  2. attr() - меняется на attributes;
  3. $.get - на fetch() (ссылка на английском);

Естественно будет это все работать только если вы ориентируетесь на относительно новые браузеры

Answer 2
[].forEach.call( document.getElementsByClassName('historyAPI'), function(e) {
[].forEach.call(document.querySelectorAll('.historyAPI'), function(e) {
var href = $(this).attr('href');
var href = this.href;
$.get(url).done(function(data) {
    // Обновление только текстового содержимого в сером блоке
    $('#content').html($(data).find("#content").html());
    $('#content2').html($(data).find("#content2").html());

Приблизительно так:

fetch("url").then(resp => {
  return resp.text()
}).then(data => {
  var doc = (new DOMParser).parseFromString(data, "text/html");
  for (var id of ["content", "content2"]) {
    var dest = document.getElementById(id);
    dest.textConetent = '';
    dest.appendChild(doc.getElementById(id))
  }
READ ALSO
Задача на вывод числа прописью. JS

Задача на вывод числа прописью. JS

Задача в том, что бы можно было ввести число (от 0 до 1 000 000 000) и функция возвращала то число прописьюНапример: 128 -> сто двадцать восемь

326
Выполнение долгого php скрипта через ajax

Выполнение долгого php скрипта через ajax

Всем приветСтолкнулся с такой проблемой, что при выполнение php скрипта (скрипт больше минуты выполняется) сервер намертво зависает и обратиться...

249
Warning: Illegal string offset 'columns' in docs/wp-content/plugins/ut-portfolio/classes/class-ut-portfolio-shortcode.php

Warning: Illegal string offset 'columns' in docs/wp-content/plugins/ut-portfolio/classes/class-ut-portfolio-shortcode.php

Здравствуйте! Не пойму, почему ошибкаНа локальном сервере всё отлично работает, никаких ошибок

238
Как сделать так, чтобы ссылки менялись автоматически?

Как сделать так, чтобы ссылки менялись автоматически?

У меня есть локальный сервер localhostНа нём есть сайт с php-файлами, находящимися на разных уровнях

220