JavaScript 2022

		
001$(document).ready(()=>{
		
002	// find LI elements in UL with ID #list that do not have the ID #notli
		
003	// and change their colour to red
		
004	$('#list>li').not('#notli').html('hello').css("color","red");
		
005	
		
006	// fade out the last li in the list #list
		
007	$('#list>li:last').fadeOut(8000);
		
008	
		
009	//using .eq (which targets a particular index)
		
010	// find the second LI (index 1) in the UL with ID #list
		
011	// and change its colour to green
		
012	$('#list>li').eq(1).css("color","green");
		
013	
		
014	// Targeting all table rows that are odd indexes
		
015	// change their background to grey
		
016	$('tr:odd').css("background-color","grey");
		
017	
		
018	// Targeting all table header cells
		
019	// make them bold, aligned left and blue
		
020	$('th').css({"font-weight":'bold','text-align':'left','color':'blue'});
		
021	
		
022	/*$('#result').hide(6000);
		
023	$('#result').show(6000);*/
		
024	
		
025	// Fade out and back in again, using chaining
		
026	$('#result').fadeOut(5000).fadeIn(5000);
		
027	
		
028	// JQuery event listener of button with ID of #bob
		
029	let numberOfClicks = 0;
		
030	$("#bob").click
		
031	( 
		
032		() => 
		
033		{
		
034			numberOfClicks++;
		
035			let str2 = numberOfClicks==1?' time':' times';
		
036			$("#bob").html("You clicked me " + numberOfClicks + str2)
		
037		}
		
038	);
		
039	
		
040	
		
041	// Use the .each method to loop through arrays or objects
		
042	// index/value and key/value are optional parameters
		
043	
		
044	//Array example
		
045	const arrayData = getArrayData();
		
046	$.each(arrayData ,(index, value)=>
		
047	{
		
048		
		
049		console.log(index+' : ' + value);
		
050	});
		
051	
		
052	//Object example
		
053	const jsonData = getObjectData();
		
054	$.each(jsonData ,(key, value)=>
		
055	{
		
056		
		
057		console.log(key+' : ' + value);
		
058	});
		
059	
		
060});
		
061
		
062
		
063
		
064function getArrayData()
		
065{
		
066	return ['name','John','age','car'];
		
067}
		
068
		
069function getObjectData()
		
070{
		
071	return {"name":"John", "age":30, "car":null};
		
072}