prisskreative
10/30/2014 - 9:04 PM

Jquery Basics

Jquery Basics

/*
 Hide 
 Show slow 
 Add click event with anonymous to removable 
 Remove
 */

$("#message").hide();
$("#message").show("slow");
$(".removable").click(function(){
	$(this).remove()
  });


$(".order_form").hide().before("<a href='#' class='order_now'>Order Now</a>");
	$(".order_now").click(function(){
			var $link = $(this);
			$link.next().show("slow").prev().remove();
			return false;
		});
//Form Validation

var $submit = $(".submit input");
			var $required = $(".required");
			function containsBlanks(){
				var blanks = $required.map(function(){ return $(this).val() == "";});
				return $.inArray(true, blanks) != -1;
			}

			function isValidEmail(email){
				return email.indexOf("@") != -1;
			}

			function requiredFilledIn(){
				if(containsBlanks() || !isValidEmail($("#email").val())) 
					$submit.attr("disabled","disabled");
				else 
					$submit.removeAttr("disabled");
			}

			$("#form span").hide();
			$("input,textarea").focus(function(){
				$(this).next().fadeIn("slow");
			}).blur(function(){
				$(this).next().fadeOut("slow");
			}).keyup(function(){
				//Check all required fields.
				requiredFilledIn();
			});

			$("#email").keyup(function(){
				//Check for a valid email.
				if(isValidEmail($(this).val()))
				 $(this).next().removeClass("error").addClass("valid");
				else 
				 $(this).next().removeClass("valid").addClass("error");
			});

			requiredFilledIn();

-----------

Quiz

/* Create a method called 'requiredValues' that returns an array of all the values 
   of inputs with the class of 'required'.*/

var requiredValues = function()
{
     var myArray = new Array();
     $('.required').each(function()
     {
           myArray.push($(this).val());
     });
     return myArray;
}


------------

/* Create a method called 'containsBlanks' that returns true if any inputs with class 
 'required' has an empty string in, false if not. 
The steps are:

Create function containsBlanks
Create an array in the function
Cycle over ".required"
Push if the input is empty on to the array
Return if the array has any trues in (the video suggests one method)


structure the code
function containsBlanks(){
//Create an array 'values'
//Cycle through each the '.required' input
//In the each push the comparison of $(this).val() == "" where "" is an empty string
//return if the 'values' array has a true value in it
};

 */


function containsBlanks(){
  var valuesArray = new Array();
  $('.required').each(function()
    {
    valuesArray.push($(this).val() == "");
 });
  return valuesArray.sort().pop();
};


---------------

//Call 'map' on the inputs with the class 'required' and return each of their values and store it in a variable named 'values'.
var values = $(".required").map(function(){ return $(this).val(); })

//check for Andrew string

$.inArray("Andrew", values);

// Using Jquery to select an element
//jquery let you add behavior to an element by selecting the css selector 
//To select a selector you use 

$("#container")
$("nav a")


//Manipulate or add behavior - add the method we want to call
//If you want to hide a page element you use the hide method

$("#myElement").hide()


//some method takes argument ex the before method 
//it takes a string of html and add it before the selected element
//hello before the element

$("#myElement").before("<h1>Hello</h1>")



// other methods take functions as argument to be wrote when a event happen like a click
// this is know as handler 

$("#myElement").click(handler);



//you can write a handler using an anonimous function - replace handler word
$("#myElement").click(function(){
       /** Code **/}).hide();
       
 //hide message and then show slow      
 $("#message").hide();
 $("#message").show("slow");