web teh

Pārlūkprogrammu savietojamības piemērs

// Old compatibility code, no longer needed.
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

// New code
jQuery.ajax()
$.ajax

jQuery ielādēšana

<script type="text/javascript" src="jquery-3.3.1.js"></script>

<script type="text/javascript"
 src="https://code.jquery.com/jquery-3.3.1.js"></script>

Pirmais jQuery skripts

<a href="1.html">A link</a>
<script src="jquery.js"></script>
<script>
  $(document).ready(function() {
    $("a").click(function(event) {
      alert("You clicked on a link to " + this.href );
    });
  });
</script>

Anonīmās funkcijas

Funkcija ar nosaukumu

function flyToTheMoon()
{
  alert("Zoom! Zoom! Zoom!");
}
flyToTheMoon();

Anonīmās funkcijas

Anonīmā funkcija: dinamiski deklarēta programmas izpildes laikā

var flyToTheMoon = function()
{
  alert("Zoom! Zoom! Zoom!");
}
flyToTheMoon();

jQuery: Var vēl īsāk

$(document).ready(function() {
  console.log('ready!');
});

$(function() {
  console.log('ready!');
});

Javascript Vs Jquery

window.addEventListener('load', function() {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
      alert("You clicked on a link to " + this.href );
    });
  }
});

$(function() {
  $("a").click(function(event) {
    alert("You clicked on a link to " + this.href );
  });
});

Elementu selektēšana

$( '#header' ); // select the element with an ID of 'header'
$( 'li' );      // select all list items on the page
$( 'ul li' );   // select list items that are in unordered lists
$( '.person' ); // select all elements with a class of 'person'

Notikumu reģistrēšana

$("a").click(function(event) { event.preventDefault(); }

Piemērs: atvērt linkus jaunā logā

$(function () {
  $("a").click(function (event) {
    if (null != this.href && this.href.length > 4
    && this.href.substring(0, 4) == "http") {
      event.preventDefault();
      window.open(this.href);
    }
  });
});

CSS modificēšana

<div id="open" style="padding: 1em; border: 3px solid black;
font-size: 300%;">We are open</div>
<div id="closed" style="padding: 1em; border: 3px solid black;
font-size: 300%;">We are closed</div>

$(function () {
  $("#closed").hide();
  $("#open, #closed").click(function (event) {
    $("#open, #closed").toggle();
  });
});

Piemērs

CSS atribūtu iegušana un mainīšana

$(this).css("text-decoration", "underline");
alert("The font size is " + $(this).css("font-size"));

Piemērs

Lapas satura izmainīšana

Klašu izmainīšana

$(function () {
	$("p").mouseenter(function () {
		$(this).addClass("highlighted");
	});
	$("p").mouseleave(function () {
		$(this).removeClass("highlighted");
	});
})

Lapas satura izmainīšana

Klašu izmainīšana: toggleClass

$(function () {
	$("li").click(function () {
		$(this).toggleClass("highlighted");
	});
});

Lapas satura izmainīšana

Klašu pārbaude: hasClass

$("li").click(function () {
	if (!$(this).hasClass("highlighted")) {
		$(this).addClass("highlighted");
	}
	else {
		alert("This list item is already highlighted.");
	}
});

Lapas satura izmainīšana

Formu vērtību manipulācijas: forma

<style>
	input[name="email"] { color: #999; }
</style>
<form>
	<label>Email address:
		<input name="email" value="person@example.com" size="40" />
	</label>
</form>

Lapas satura izmainīšana

Formu vērtību manipulācijas: focus un blur

$(function () {
	$("input[name='email']").focus(function () {
		if ($(this).val() == "person@example.com") {
			$(this).val("");
			$(this).css("color", "black");
		}
	});
	$("input[name='email']").blur(function () {
		if ($(this).val() == "") {
			$(this).val("person@example.com");
			$(this).css("color", "#999");
		}
	});
});

Lapas satura izmainīšana

HTML atribūtu manipulācijas: forma ar "disabled" lauku

<form>
	<label>Email address:
		<input name="email" value="person@example.com" size="40" />
	</label>
	<input id="emailFormSubmit" type="submit" disabled />
</form>

Lapas satura izmainīšana

HTML atribūtu manipulācijas: forma ar "disabled" lauku

$("input[name='email']").blur(function () {
	if ($(this).val() == "") {
		$(this).val("person@example.com");
		$(this).css("color", "#999");
		$("#emailFormSubmit").attr("disabled", "disabled");
	}
	else {
		$("#emailFormSubmit").removeAttr("disabled"); 
	}
});

Lapas satura izmainīšana

Pievienot un noņemt saturu

<ul id="editable">
</ul>

<form id="addElement">
<label>New list item: <input name="liContent" size="60" /></label>
<input type="submit" value="Add Item" />
</form>

Piemērs

Lapas satura izmainīšana

Pievienot un noņemt saturu

<p><a id="clearList" href="#">Clear List</a></p>

$("#clearList").click(function (event) {
	event.preventDefault();
	$("#editable").empty();
});

Lapas satura izmainīšana

Pievienot un noņemt saturu: pievienot jaunus ierakstus

$("#addElement").submit(function (event) {
	event.preventDefault();
	$("#editable").append(""
		+ $("#addElement input[name='liContent']").val() + "");
	$("#addElement input[name='liContent']").val("");
});

Lapas satura izmainīšana

Pievienot un noņemt saturu: Dzēst pa vienam

$(document).on('click', "#editable li", function () {
	$(this).remove();
});

Piemērs

Efekti

$(document).on('click', "#editable li", function () {
	$(this).fadeOut('slow', function() {
		$(this).remove()
	});
});

Ajax

$("button").click(function(){
    $.ajax({url: "demo_test.txt", success: function(result){
        $("#div1").html(result);
    }});
});

Citas jQuery iespējas

jQuery UI bibliotēka
jQuery Mobile ietvars

Biļešu tirdzniecība internetā

document.cookie = "username=John Doe"; // Cookie uzstādīšana
var x = document.cookie; // Cookie nolasīšana

Local storage

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Avoti

http://helephant.com/2008/08/23/javascript-anonymous-functions/
http://jqfundamentals.com/chapter/jquery-basics