jQuery recipes

different recipes for jquery

by John Doe

HTML

<h1 style="text-align:center">jQuery recipes</h1>
<div id="block1">
  <img src="https://placehold.it/50x50" alt="">
  <img src="https://placehold.it/50x50" alt="">
  <img src="https://placehold.it/50x50" alt="">
  <img src="https://placehold.it/50x50" alt="">
</div>

<div id="block2">
  <img src="https://placehold.it/50x50" alt="">
  <img src="https://placehold.it/50x50" alt="">
  <img src="https://placehold.it/50x50" alt="">
  <img src="https://placehold.it/50x50" alt="">
</div>
<div id="mydiv">First text</div>

JavaScript

// no conflict
// overide alias $, jQuery on _
/*
var _ = jQuery.noConflict();

  _('body').css({backgroundColor: "#444", color: "#fff"});
}) -->
*/
$('img:odd', $('#block1')).css({border: "2px solid red"});
var selector = $('img:odd').selector;
console.log("Селектор: " + selector);

var jq1 = $("img:odd");
console.log("Bне контекста: " + jq1.context.tagName);
var jq2 = $("img:odd", $('#block2'));
console.log("B контексте: " + jq2.context.tagName);
var jq3 = $("img:odd", document.getElementById('block2'));
console.log("B контексте: " + jq3.context.tagName);

$("#mydiv")
  .animate({height: "hide"}, 300)
  .text("Новый текст")
  .animate({height: "show"}, 300);