jQuery notikumi

Klikšķis ar peli

Klikšķis ar peli — vienkāršais — click un dubultklikšķis — dblclick

$(document).ready(function(){

  $("h2").click(function(){
    $(this).toogleClass("blue")
  });

});

«Lidojumi» virs elementa

«Lidojumi» virs elementa — mouseenter, mouseleave un citi

$("h2").mouseenter(function(){
$(this).toogleClass("blue")
});

$("h2").mouseleave(function(){ //:hover efekts 
$(this).toogleClass("blue")
});

Formas (focus, change u.t.t.)

$("input").focus(function(){
  console.log("Fokuss ir ievades laukā");
});

$("input").change(function(){
  $("#userName").text(", " + $(this).val());
});

Klaviatūra (keypress, keydown, keyup)

// keypress nostrādā taustiņa nospiešanas brīdī
$("input").keypress(function(){
  $("#userName").text(", " + $(this).val());
});

// keyup nostrādā taustiņa atlaišanas brīdī
$("input").keyup(function(){
  $("#userName").text(", " + $(this).val());
});

Pamata animācija

delay – laika aizture, hide – paslēpt, show – parādīt

animate – atribūtu animācija

$(".box:first").delay(1000).hide(1000);

$(".box:first").delay("slow").show("fast");

$(".box:first").animate({"width": "200px"}, 1000);

$(".box:first").slideUp(1000).slideDown(1000);

Darbības ar atribūtiem

attr() – dabūjam elementa atribūtu

alert($("img").attr("src"));

$("img").click(function(){
  $("this").fadeOut(500, function(){
    $("this").attr("src", "img2.jpg").fadeIn(500);
  });
});

$("p.lead").attr("data-target", "teksts");

Darbības ar klasēm

addClass("name") – pieliekam klasi, removeClass("name") – noņemam klasi, toogleClass("name") – pieliekam klasi, ja nav vai noņemam ja ir.

toogleClass("name1 name2") — nomainām esošo klasi name1 un jaunu klasi – name2

$("p.lead").addClass("blue");

$(".lead").click(function(){
  $("p.lead").addClass("blue")
});

$(".lead").click(function(){
  $("p.lead").removeClass("lead")
});

$(".lead").click(function(){
  $("this").toggleClass("blue")
});

$(".lead").click(function(){
  $("this").toogleClass("lead blue")
});

Elementu klonēšana, pievienošana, pārvietošana

$(".lead").click(function(){

//ielikt tekstu
  $(this).text("Jaunais teksts"); 

//ielikt tekstu ar HTML
  $(this).html("Jaunais <em>teksts</em>"); 

//ielikt savu tekstu satura beigās
  $(this).append(" Teksts beigās"); 

//ielikt savu tekstu satura sākumā
  $(this).prepend("Teksts sākumā "); 

// ielikt jaunu elementu pēc esošā elementa
  $(this).after("<p>Jauns paragrāfs</p>");

// ielikt esošo elementu jaunā elementā
  $(this).wrap("<div class='col'></div>");

// noņemt no elementa ārējo elementu
  $(this).unwrap("<div class='wrap'></div>");

// izdzēšam elementa saturu, pats element paliek
  $(this).empty();

// izdzēšam elementu
  $(this).remove();

// dublējam esošo saturu šajā pašā elementā
  $(this).append("<br />"+$(this).text());
});