jQuery basics. Code examples

jQuery is a JavaScript library that focuses on the interaction between JavaScript, HTML, and CSS.

What jQuery Can Do?

• Access any element of the DOM (Document Object Model) and not only access but also manipulate them.
• Work with events.
• Easy to implement various visual effects.
• Work with AJAX.
• It has a huge number of JavaScript plugins designed to create user interface elements.

Lets start! We need to write our code after the DOM tree is formed.

The code should be added in the middle of the structure:

jQuery(document).ready(function ($) {
//our jQuery code
}

or

$(document).ready(function(){	
//our jQuery code
});

Select an element

$('#elementid');
$('.elementclass');
$('element');

For each element in the set, get the first element that matches the selector:

$(this).closest

Find another element in the descendants of the element that corresponds to the selector:

$(.mainblock).find(.childblock) 

Check if the element is in the parent. Return true or false

$(.mainblock).is(.childblock) 

Select several elements:

$('img, a').css('background', 'red');

Select the nested element:

$('nav menu');
$('nav menu li');

Select child elements:

$('.elementclass > li');

Neighboring elements that are immediately near the selector:

$('.elementclass + li');

Get attribute value from element:

$(.element).attr('max');

If the element has an attribute:

$('img[height]');

Selecting an element by attribute:

$('img[height=150]');

Selection of elements whose attribute begins with:

$('img[src^=img/custom]');

Selection of elements whose attribute ends with:

$('img[src$=.png]');

Selection of all elements in which this symbol is present in the attribute:

$(img[src*=0]); 

Filtering elements

Selection of even elements (count starts with 1 item):

$('menu li:even'); 

Selection of odd elements:

$('menu li:odd'); 

Exclude an element from the selection:

$('img:not(.logo img)');

Add item to selection:

$('img:has(a)');
[js]

<strong>Check whether there is text in the tag:</strong>

[js]
$('p:contains(client)');

Select the first item:

$('li:first');

Select the last item:

$('li:last');

Select hidden items:

$('div:hidden');

Select visible elements:

$('div:visibility');

Get the text of the element:

var p = $('.text p').text();

Replace element text:

var p = $('.text p').text('Some text');

Showing and hiding element

Hide element:

var p = $('.text p').hide();

Hide at a speed of 3ms

var p = $('.text p').hide(3000);

With the 2nd parameter, you can specify a function that will be executed after the object disappears:

var p = $('.text p').hide(3000, alert('hide'));

Show element

var p = $('.text p').show();

Show at a speed of 3ms:

var p = $('.text p').show(3000);

Show element if he hiding and hide when he is showing

$('.text p').toggle()

slideToggle

Show or hide the object depending his current condition. With the 2nd parameter, you can specify a function that will be executed after the object appears:

var p = $('.text p').slideToggle(3000, alert('show'));

Changing the width and height of objects

Let’s get the width and height of the object:

$(function(){
	vab button_width = $('.btn').width();
	vab button_height = $('.btn').height();
})

Change the height and width of the object:

$(function(){
	vab button_width = $('.btn').width(200);
	vab button_height = $('.btn').height(250);
})

Interaction with the HTML code of the element

Obtaining the item code:

vab button_height = $('.btn').html();

Changing inner html of an element:

vab button_height = $('.btn').html('<span>Icon</span>');

Adds HTML code before the element:

$('.btn').before('<p>text</p>');

Adds HTML code after the element:

$('.btn').after('<p>text2</p>')

Adds the code to the end of the HTML element:

$('.btn').append('<p>text3</p>')

Adds the code to the beginning of the html element:

$('.btn').prepend('<p>text3</p>')

Simple built-in animations

Smooth animation of disappearance:

vab button_height = $('.btn').fadeOut();

Smooth appearance animation:

vab button_height = $('.btn').fadeIn();

As in the show and hide block, you can set the speed:

vab button_height = $('.btn').fadeIn(3000);
vab button_height = $('.btn').fadeOut(3000);

and function

Hides an element by reducing its visibility:

$('.btn').fadeTo(4000, 0.5);

4000 – the time for which the transparency will change
0.5 – level of transparency (1 = 100%)

a function can be passed to this method as the second argument.

Animation of element compression from top to bottom:

$('.btn').slideUp();

Animation of element compression from bottom to top:

$('.btn').slideDown();

animate – a change in appearance over a certain period of time:

('.block').animate({
	'color': 'red';
	'font-size': 20px;
	'margin': 10px;
}, 3000);

3000 – 3ms – the time for which the changes will take effect.

!in the 3rd parameter you can pass a function

Work with element styles and classes

Adding classes:

var block = $('.block').addClass('border');

Deleting classes:

var block = $('.block').removeClass('border');

Get element styles:

var block = $('.block').css('font-size');

Change or add properties:

var block = $('.block').css('font-size', '20px');

Let’s transfer many styles using the object:

('.block').css({
	'color': 'red';
	'font-size': 20px;
	'margin': 10px;
});

Arrays

The each loop allows you to perform a certain operation for each element from the array:

$('.icons img').each(function(){
	if($(this).attr('src') == 'icon.png') {
		$(this).fadeOut(100);
	}
})

Find out the number of elements in the sample:

$('.icons img').lenght

Cloning elements

var mainText = $('.mainText').clone();
$('body').append(mainText);

Events

Event when the cursor is placed on the object:

$('.logo').mouseover(function(){
	//actions
});

Event when the cursor is removed from the object:

$('.logo').mouseout(function(){
	//actions
});

The event when the object is clicked:

$('.logo').click(function(){
	//actions
});

The event that will occur when the click is released from the object:

$('.logo').mouseup(function(){
	//actions
});

An event that occurs when the cursor moves over our object:

$('.logo').mousemove(function(){
	//actions
});

submit – occurs when the submit button is pressed;
focus – when the form element receives focus, for example, when we enter text in the input field;
blur – when we remove focus from an element;
change – fires every time the form element changes;
reset – when the button is pressed to clear the form;

keypress – triggers when a certain key is pressed on the keyboard;
keydown – when the button is held in the pressed position;
keyup – triggers when the button is released;

load – checks whether all the files of our site are connected;
resize – checks whether the size of the browser window has changed;
scroll – triggers when scrolling;

Hover event:

link.hover(
function(){
	$(this).addClass('border');
}, function() {
	$(this).removeClass('border');
}
)

Overriding the normal behavior of an element:

$(function() {
$('.btn').click(function(e) {
	e.preventDefault();
})
});

Or:

$(function() {
	$('.btn').click(function(e) {

	return false;

	})
});

Form elements

Selection form elements:

$('.form1 :checkbox');
$('.form1 :radio');
$('.form1 :submit');
$('.form1 :select');
$('.form1 :reset');
$('.form1 :file');
$('.form1 :button');
$('.form1 :text');
$('.form1 :password');
$('.form1 :input');

Radio and checkbox tracking of selected items:

$(.form1 :checkbox:checked);

select tracking selected items:

$(.form1 :select:selected);

Get the form value:

$('textarea').val();

Getting the value of the form in a array:

$(':submit').click(function() {
	var value = $(':checkbox').each(function(){
		var value = $(this).val();
	});
})

When a form element is in focus:

$('textarea').focus(function(e) {
	
})

When a form element is out of focus:

$('textarea').blur(function(e) {
	
})

An event that is triggered when the form is submitted:

$('.form1').submit(function(e) {
	
})

Track the element change event:

$('#selected').change(function(){
	var v = $('#selected :selected').val();
	if(v==1) {
	   $('#selected2').html('<option value="1">1</option><option value="2">2</option>');
	} else if(v=3) {
		$('#selected2').html('<option value="1">1</option><option value="2">2</option>')
	}
})

Block the form element:

$('.input5').attr('disabled', 'disabled');

Unlock the form element:

$('.input5').removeAttr('disabled');