Javascript Equivalent JQuery

У меня возникла проблема с преобразованием jquery в javascript, так как моим требованием к приложению не является использование jquery и только в простых html и javascript. Я знаю, как писать код в JQuery, но не могу его преобразовать в javascript. Мой код выглядит следующим образом:Javascript Equivalent JQuery

$(document).ready(function() { 
    $('input[type="button"').click(function() { 
    $(this).prop('disabled','disabled'); 
    }); 
});

Как преобразовать этот фрагмент кода в javascript.

источник

2016-05-05 Iswar K Chettri

Заметим, что '$ (это) .prop ('отключено', 'отключено');' слишком много JQuery, даже если вам используют jQuery в общем смысле: использование 'this.disabled = true' более эффективно * и * более легкое для чтения. – nnnnnn

В дополнение к тому, что сказал @nnnnnn - даже если вы собираетесь использовать jQuery, вы должны установить свойство 'true', а не' 'disabled''..поминать, что' .prop' устанавливает значение свойства для элемента DOM, вместо изменения атрибута HTML в соответствии с '.attr' – Andy

Используйте DOMContentLoaded событие следующим образом:

document.addEventListener("DOMContentLoaded", function(event) { 
 
    console.log("DOM fully loaded and parsed"); 
 
    var btns = document.querySelectorAll("input[type=button]"); 
 
    for (let i = 0; i < btns.length; i++) { 
 
    btns[i].addEventListener("click", function() { 
 
     //Do stuff 
 
     console.log("button" + i + "clicked"); 
 
    }); 
 
    } 
 
});

источник

2016-05-05 07:24:25

'querySelector' будет выбирать только один элемент! – Rayon

Это работало с '.forEach'? Проверить консоль на наличие ошибок ... – Rayon

Узел узла не имеет метода 'forEach'. – Andy

Использование window.onload для обработки load-event на window
document.querySelectorAll, чтобы выбрать список элементов в документе, которые соответствуют указанной группе селекторов.
[].forEach.call для итерации по выбранным элементам.
addEventListener зарегистрировать указанный прослушиватель на элементе.

window.onload = function() { 
    var elems = document.querySelectorAll('input[type="button"]'); 
    [].forEach.call(elems, function(el) { 
    el.addEventListener('click', function() { 
     this.disabled = true; 
    }); 
    }); 
};

Edit:document.addEventListener('DOMContentLoaded', function() {}); может быть использован вместо window.onload но считают Browser compatibility, а также. Другим простым альтернативом было бы разместить <script> как last-child<body> без упаковки script в любом load обработчике.

источник

2016-05-05 07:22:08 Rayon

+1 Вы можете предложить использовать' document.addEventListener («DOMContentLoaded», function (event) {}); 'вместо' window.onload'. Потому что '$ (document) .ready' полностью отличается от' window.onload' –

@RajaprabhuAravindasamy. Это то, что мне пришло в голову, но кто-то предложил мне рассмотреть [__Browser compatibility__] (https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded # Browser_compatibility) – Rayon

Window.load полностью отличается от document.ready –

Javascript Equivalent JQuery

ответ

Смежные вопросы