JQuery методы и их аналоги на чистом Java Script

JQuery методы и их аналоги на чистом Java Script

jQuery

JavaScript

$(document).ready(function() {
  // code…
});
document.addEventListener("DOMContentLoaded", function() {
  // code…
});
var divs = $("div");
var divs = document.querySelectorAll("div");
var newDiv = $("<div/>");
var newDiv = document.createElement("div");
newDiv.addClass("foo");
newDiv.classList.add("foo");
newDiv.toggleClass("foo");
newDiv.classList.toggle("foo");
$("a").click(function() {
  // code…
})
[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});
$("body").append($("<p/>"));
document.body.appendChild(document.createElement("p"));
$("img").filter(":first").attr("alt", "My image");
document.querySelector("img").setAttribute("alt", "My image");
var parent = $("#about").parent();
var parent = document.getElementById("about").parentNode;
var clonedElement = $("#about").clone();
var clonedElement = document.getElementById("about").cloneNode(true);
$("#wrap").empty();
var wrap = document.getElementById("wrap");
while(wrap.firstChild) wrap.removeChild(wrap.firstChild);
if($("#wrap").is(":empty"))
if(!document.getElementById("wrap").hasChildNodes())
var nextElement = $("#wrap").next();
var nextElement = document.getElementById("wrap").nextSibling;
 
 
 

Плавно скрыть элемент

Vanilla JS

var s = document.getElementById('thing').style;
s.opacity = 1;
(function(){(s.opacity-=.1)<0?s.display="none": setTimeout(arguments.callee,40)})();

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script> $('#thing').fadeOut();</script>

AJAX-вызов

Vanilla JS

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>
  $.ajax({
    type: 'POST',
    url: "path/to/api",
    data: "banana=yellow",
    success: function (data) {
      alert("Success: " + data);
    },
  });
</script>
  • Тип: Блог разработчика
  • Дата: 03.05.2014 18:19:49

Заказать звонок

Заказать