Loading jQuery

<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>

First jQuery script

<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>

jQuery: shortest exmple

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

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

jQuery example: react to every clicked link

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

Selectiong elements

$( '#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'

Registering events

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

Example: open all links in new window

$(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 modifications

<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();
  });
});

Getting and setting CSS attributes

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

Changing page content

• Changing classes

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

Changing page content

• Changing classes: toggleClass

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

Changing page content

• Checking classes: 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"); 
	}
});

Manipulate website content

• Add or remove content

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

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

Manipulate website content

• Add or remove content

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

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

Manipulate website content

• Add or remove content: add new entry

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

Manipulate website content

• Add or remove content: delete one by one

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

Effects

$(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);
    }});
});

Sources

• http://jqfundamentals.com/chapter/jquery-basics