jQuery

Bibliotek som forenkler bruken av JavaScript.
Nesten alle sider på web bruker jQuery, brukes også sammen med svært mange andre biblioteker.
Svært godt dokumentert og utprøvd.
Forenkler det meste du kan gjøre i JavaScript.
Kan lastes ned, men vil normalt inkluderes fra http://code.jquery.com/

Manipulere DOM elementer

$ er kort for jQuery
Veldig mye av det en gjør i jQuery er å manipulere noder i DOM'en
Nodene velges ut med standard CSS 3 selectorer

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <script src="http://code.jquery.com/jquery-2.2.0.min.js">
    // Must be included before jQuery is used 
  <script>
    $('body').html('jQuery is working');
  </script>
</body>
</html>

Kjøre kode når dokumentet er klart

Bruk document.ready for å kjøre kode når hele HTML filen er lest og parset
Bruk window.load for å kjøre kode når alle elementer på siden er ferdig lastet

JS Bin on jsbin.com

$( document ).ready(function() {
  $('body').append('First document ready handler');
});

$(function() {
  $('body').append('Short form of document ready handler');
});

$(window).load (function() {
  $('body').append('Use this if you need all assets to be loaded.');
});

Best practice

Ikke bland HTML og JavaScript kode :

Bruk i stedet JavaScript kode i onload/onready for å legge til eventhåndteringen, i HTML koden :

Legg så dette i onready/onload :

$('input[name="knappen"]').on('click', minMetode);

Practice on best practice

JS Bin on jsbin.com

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="button" id="myButton" value="Say hi">
</body>
</html>
--------
$(function () {
  $('#myButton').on('click', sayHi);
  $('#myButton').click(changeButton);
});

function sayHi() {
  alert ('hi');
}

function changeButton () {
  $('#myButton').val ($('#myButton').val()+"*");
}

Manipulere css med jQuery

JS Bin on jsbin.com

$(function () {
  $('h1').css('background-color', '#0F0');
  $('h1').css('height', '50px');
  $('h1').css('color', '#00F');
  console.log ($('h1'));  // try with [0]
});