Блог

Главная - Вопросы по программированию - Преобразование из jQuery в JavaScript

Преобразование из jQuery в JavaScript

#javascript #jquery

#javascript #jquery

Вопрос:

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

 <form id="myform">
    <input type="text" value="" id="input1">
    <input type="text" value="" id="input2">
    <input type="submit" value="submit">
</form>
<img id="image" src="http://mydomain.com/empty.gif" />
<script>
$(document).ready(function () {
    $("#myform").submit(function (ev) {
        ev.preventDefault();
        var val1 = $("#input1").val();
        var val1 = $("#input2").val();
        $("#image").attr("src", "http://mydomain.com/image?val1=" val1 "amp;val2=" val2);
    });
});
</script>

Как бы это выглядело, если бы было написано на JavaScript?

Комментарии:

1. Я несколько педантичен, но … jQuery — это Javascript, то, что вы написали, является совершенно верным Javascript, это просто зависит от jQuery. Вы запрашиваете версию, не зависящую от jQuery.

2. Пожалуйста, используйте правильные отступы при отправке вашего кода.

3. Я думаю, вы допустили ошибку: вы объявляете val1 дважды.

4. Это Javascript (с использованием некоторых функций, введенных в область видимости библиотекой jQuery). jQuery — это не язык .

5. Разве он не может просто добавить «обычный» к названию?

Ответ №1:

 <img id="image" src="http://mydomain.com/empty.gif" />
<script>
window.onload = function() { // Not all browsers support DOMContentLoaded
  document.getElementById("myform").onsubmit = function() {
     var val1 = document.getElementById("input1").value;
     var val2 = document.getElementById("input2").value;
     document.getElementById("image").src="http://mydomain.com/image?val1=" val1 "amp;val2=" val2;
     return false;
   };
};
</script>

Если вы НАЗОВЕТЕ поля, которые вы можете использовать

 window.onload = function() {
  document.getElementById("myform").onsubmit = function() {
     document.getElementById("image").src="http://mydomain.com/image?val1=" this.input1.value "amp;val2=" this.input2.value;
     return false;
   };
};

Возможно, вам захочется экранировать два значения

Комментарии:

1. Вы промахиваетесь return false; . Более того, вы ждете onload , не DOMContentLoaded и т.д. 😉

2. @Marcel: Я уже исправил возвращаемое значение false, и DCL не поддерживается многими браузерами

3. Я знаю, но я просто хотел немного уточнить, что этот код не является точно эквивалентным OP (и чтобы он знал об использовании фреймворков).

4. Но в IE8 jQuery преобразовал бы DOMContentLoaded в onload, нет?

5. 1 за отмену jQueryizing. -1 за то, что не исправил ошибочное представление OP.