JQuery

De Memo
Aller à : navigation, rechercher
$(document).ready(function() {
   $("#green").fadeOut(1000);
});
<!DOCTYPE html>
<html>
   <head>
       <title></title>
       <script type="text/javascript" src="script.js"></script>
   </head>
   <body>
       <div></div>
   </body>
</html>
$(document).ready(function() {
   $('div').mouseenter(function() {
       $('div').hide();
   });
});
$(document).ready(function() {
   $('div').mouseenter(function() {
       $('div').fadeTo('fast', 1);
   });
});
$(document).ready(function() {
   $('div').mouseenter(function() {
       $('div').fadeTo('fast', 1);
   });
   $('div').mouseleave(function() {
       $('div').fadeTo('fast', 0.5);
   });
});
$(document).ready(function() {
   $('div').click(function() {
       $('div').fadeOut('slow');
   });
});
// Write your jQuery code on line 3!
$(document).ready(function() {
   var $target = $('li:nth-child(4)');
   $target.fadeOut('fast');
});
$(document).ready(function() {
   $('button').click(function() {
       $('.vanish').fadeOut('slow');
   });
});
$(document).ready(function() {
   $('div').click(function() {
       $(this).fadeOut('slow');
   });
});

Creating new variable

var $h1 = $("<h1>Hello</h1>");

.append() & .prepend()

$(document).ready(function () {
   $("body").append("<p>I'm a paragraph!</p>");
});

.after() & .before()

$(document).ready(function () {
  $("#one").after("<p>I'm a paragraph!</p>");
});
$(document).ready(function(){
   $('#one').after('<p>Hello</p>');
   $('#two').after($('p'));
});

.empty() & .remove()

.addClass() & .removeClass()

$(document).ready(function() {
  $('#text').click(function() {
      $('#text').addClass('highlighted');
  });
});

.toggleClass

$(document).ready(function() {
  $('#text').click(function() {
      $('#text').toggleClass('highlighted');
  });
});

.height .width .css

$(document).ready(function() {
   $("div").height("200px");
   $("div").width("200px");
   $("div").css("border-radius","10px");
});

.html

To set the contents of the first element match it finds.

$(document).ready(function() {
  $("p").html("jQuery magic in action!");
});

Recup value

$(document).ready(function() {
  $('#button').click(function() {
      var toAdd = $('input[name=checkListItem]').val();
      $(".list").append("<div class='item'>"+toAdd+"</div>");
  });
});

add & remove

$(document).ready(function() {
  $('#button').click(function() {
      var toAdd = $('input[name=checkListItem]').val();
      $(".list").append("<div class='item'>"+toAdd+"</div>");
  });
  
  $(document).on('click', '.item', function() {
     $(this).remove();
  });
  
});

add

$(document).ready(function() {
   $('button').click(function() {
   	var toAdd = $("input[name=message]").val();
       $('#messages').append("<p>"+toAdd+"</p>");
   });
});

General scheme

$(document).ready(function() {
   $('thingToTouch').event(function() {
       $('thingToAffect').effect();
   });
});
$(document).ready(function() {
   $('thingToAffect').effect();
});


$(document).ready(function() {
  $('div').click(function() {
      $(this).fadeOut('fast');
  });
  $('div').hover(function(){
      $('div').addClass('red');
  });
});

hover

$(document).ready(function(){

 $('div').hover(
   function(){
      $(this).addClass('active');
   },
   function(){
      $(this).removeClass('active');
   }
 );

});

focus

$(document).ready(function() {
  $('input').focus(function() {
      $("input").css("outline-style","solid");
      $("input").css("outline-color","#FF0000");
  });
});

animate

$(document).ready(function() {
  $('document').keydown(function() {
      $("div").animate({left:'+=10px'},500);
  });
});


bounce

$(document).ready(function() {
  $('div').click(function() {
      $('div').effect('bounce', {times:3}, 500);
  });
});


slide

$(document).ready(function() {
  $('div').click(function() {
      $('div').effect('slide');
  });
});

dragable

$(document).ready(function() {
      $('#car').draggable();
});