jqueryIntro.js

// Adding jquery: 

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

// Select elements with $()
// Use .css() to style elements

$("nameOfSelector")
// Selecting with jQuery is very similar to querySelectorAll

// Tag selection ex.:
$("img")
// Class selection ex.:
$(".myClass")
// Id selection ex.:
$("#myId")
// Descendants selection ex.:
$("li a") // note that there's no need to loop through

// Changing more properties:
$("li").css({ // note object style
  zIndex: "1",
  fontSize: "20px",
  backgroundColor: "blue",
})

// Or we create an object beforehand
var styles = {
  zIndex: "1",
  fontSize: "20px",
  backgroundColor: "blue",
};
$("li").css(styles)

// Selecting first of type
$("div:first-of-type").css("color", "gold"); // css built-in method
// or
$("div:first").css("color", "gold") // jquery method, a bit slower

// jQuery Methods

// text(): retrieves all text within selected element(s) in one long string
// <div>Ciao come stai?</div>
$("div").text()

// we can also update the text by writing a new one
$("h1").text("New text here")

// html(): retrieves the html structure of the selected element
$("ul").html()

// html() also acepts arguments
$("ul").html("<li>I hacked your ul</li>")

// attr()
$('img').attr('width')
$('img').attr('width', '200px')

// adding an object
var attributes = {
  src: 'www.google.com',
  width: '40px'
};
$('img').attr(attributes)

// last of type: last()
$('img').last().attr('src', 'www.images.com')

// val()
$('input').val()
$('select').val() // provides value of dropdown menu

//managing classes
// .addClass()
$('p').addClass('myClass')
// .removeClass()
$('p').removeClass('myClass')
// .toggleClass()
$('p').toggleClass('myClass')

// Event Listeners
// click()
$('#submit').click(function(){
  console.log('another click');
});
//$(this): jQuery version of JS' 'this'
$('button').click(function(){
  $(this).css('background', 'gold');
});

// keypress()
$("input[type='text']").keypress(function(){
    console.log('you pressed a key in the input area');
  });
// listen to 'enter' key
$("input[type='text']").keypress(function(event){
    if(event.which === 13) { // 'which' retrieves n. of key pressed, 13 corresponds to 'enter')
      alert("you hit 'enter'");
    }
 });

// on()
// it works similarly to addEventListener(), and lets you specify which event you want to use

$('button').on('click', function() {
  console.log('button clicked');
});

$('button').on('click', function() {
  $(this).css('color', 'blue'); // this way changes only the button clicked, and not all the buttons
});

// Why using on() vs click()?
// click() only adds listeners for existing elements
// on() adds listeners for all potential future elements

// jQuery Effects

// fadeOut()

$('button').on('click', function(){
  $('div').fadeOut(3000); // it can show n. of ms, or be empty or have a value of 'slow', or 'fast'
});

$('button').on('click', function(){
  $('div').fadeOut(3000, function(){
    // I can put here my callback function, connected to the fadeOut() function
    $(this).remove(); // will remove the div after the animation is over
  };
 ); 
});

// fadeIn(), is just the opposite of fadeOut(), usually the default display is set to 'none'

// fadeToggle()
$('button').on('click', function(){
  $('div').fadeToggle(3000); // it can show n. of ms, or be empty or have a value of 'slow', or 'fast'
});

// slideToggle(), slideDown() and slideUp() play on the height transformation
$('button').on('click', function(){
  $('div').slideDown(2000); // it can show n. of ms, or be empty or have a value of 'slow', or 'fast'
});

// closest() 
// The closest() method returns the first ancestor of the selected element.

//Return the first ancestor of the selected element:
$(selector).closest(filter)

//Return the first ancestor using a DOM context to look up the DOM tree within:
$(selector).closest(filter,context)

// filter:	Required. Specifies a selector expression, element or jQuery object to narrow down the ancestor search
// context:	Optional. A DOM element within which a matching element may be found (ex.: id of the element)

$("span").closest("ul").css({"color": "red", "border": "2px solid red"});