Search Posts

jQuery og javascript html

jQuery er en hjælpefunktion til javascript (forkorter koderne)

jQuery-funktion kan indsættes på webside

  • Production version (komprimeret version til brug på websiden)
  • Development version (til afprøvning og udvikling)

Begge fås fra jQuery.com.

jQuery library er én JavaScript file og man henviser til den med: HTML <script> tag (<script> tag skal være INDEN for <head> section):
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>

Den downloadede fil skal ligge i samme directory som siderne hvor jQuery skal anvendes

Hvis der bruges HTML5 behøves denne kode ikke: type="text/javascript" (inden for) <script> tag


jQuery CDN (det medfører hurtigere fund)

I stedet for at downloade jQuery kan man inkludere den med en CDN (Content Delivery Network).
f.eks. hoster Google og Microsoft netop jQuery.

Hvis man vil anvende jQuery fra Google eller Microsoft:

Google CDN:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>

Med jQuery udvælger man (query) nogle HTML elementer og udføres nogle "actions" på dem. Dette gøres således:

$(selector).action()

  • En dollartegn $ angiver adgang til jQuery
  • En (selector) bruges til at finde de ønskede HTML elementer
  • En action() angiver hvilken action der skal udføres på dem.

F.eks.:
$(this).hide() – skjuler (hides) elementet "this".
$("p").hide() – skjuler alle <p> elementer.
$(".test").hide() – skjuler alle elementer med class="test".
$("#test").hide() – skjuler elementet med id="test".

jQuery bruger CSS syntax til udvælgelse af elementer


The Document Ready Event

Alle jQuery metoder er inden for en document ready event:

$(document).ready(function(){
jQuery methods go here…//
});

Dette er for at forhindre at jQuery-koden starter før dokumentet er loaded og parat.

jQuery Selectors

– anvendes til at udvælge (finde) HTML elementer baseret på deres id, classes, types, attributes, values of attributes…..

Alle jQuery-selectors starter med $() [dvs. dollartegn på paranteser].


The element Selector

udvælger samme slags elementer, f.eks. alle <p> elementer på en side:

$("p")

Example
Når man trykker på en knap bliver alle <p> elementerne skjult:

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});


#id Selector

udvælger en specifikt element ved hjælp af id (denne id skal være unik på en side)

$("#test")

Example
Når man trykker på en knap bliver elementet med id="test" skjult:

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});


.class Selector

udvælger en specifik klasse (angiv et punktum efterfulgt af navnet på denne class):

$(".test")

Example
Når man trykker på en knap bliver elementer fra denne klasse skjult: (the elements with class="test" will be hidden):

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});


Flere jQuery Selectors

se jQuery Selector Tester

eller se oversigt her: jQuery Selectors Reference.


Separate File

jQuery funktionerne kan placeres i en særlig fil: a separate .js file.

Brug src attribute til at henvise til denne .js file):

Example

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Syntax
Description
Example
$("*")
Selects all elements

$(this)
Selects the current HTML element

$("p.intro")
Selects all <p> elements with class="intro"

$("p:first")
Selects the first <p> element

$("ul li:first")
Selects the first <li> element of the first <ul>

$("ul li:first-child")
Selects the first <li> element of every <ul>

$("[href]")
Selects all elements with an href attribute

$("a[target='_blank']")
Selects all <a> elements with a target attribute value equal to "_blank"

$("a[target!='_blank']")
Selects all <a> elements with a target attribute value NOT equal to "_blank"

$(":button")
Selects all <button> elements and <input> elements of type="button"

$("tr:even")
Selects all even <tr> elements

$("tr:odd")
Selects all odd <tr> elements

EKSEMPEL DER VISER AT MAN VED TRYK PÅ EN KNAP SKJULER ALLE AFSNIT:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h1>Dette er en overskrift</h1>
<p>Dette er et afsnit</p>
<p>Dette er endnu et afsnit</p>
<button>Klik på denne knap<button>
</body>
</html>

_

EKSEMPEL DER VISER AT MAN VED TRYK PÅ EN KNAP SKJULER et AFSNIT der er kaldet "test" <p id="test">:
<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

_

EKSEMPEL DER VISER AT MAN VED TRYK PÅ EN KNAP SKJULER et AFSNIT der er kaldet "test" , f.eks.
<p class="test"> og
<h2 class="test">
:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>

<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

___

More Examples of jQuery Selectors

Use our jQuery Selector Tester to demonstrate the different selectors.
For a complete reference of all the jQuery selectors, please go to our jQuery Selectors Reference.


Functions In a Separate File

If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file.
When we demonstrate jQuery in this tutorial, the functions are added directly into the <head> section. However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file):

Example

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Syntax
Description
Example
$("*")
Selects all elements

||
||
$(this)
Selects the current HTML element

||
||
$("p.intro")
Selects all <p> elements with class="intro"

||
||
$("p:first")
Selects the first <p> element

||
||
$("ul li:first")
Selects the first <li> element of the first <ul>

||
||
$("ul li:first-child")
Selects the first <li> element of every <ul>

||
||
$("[href]")
Selects all elements with an href attribute

||
||
$("a[target='_blank']")
Selects all <a> elements with a target attribute value equal to "_blank"

||
||
$("a[target!='_blank']")
Selects all <a> elements with a target attribute value NOT equal to "_blank"

||
||
$(":button")
Selects all <button> elements and <input> elements of type="button"

||
||
$("tr:even")
Selects all even <tr> elements

||
||
$("tr:odd")
Selects all odd <tr> elements

||
||

Leave a Reply