Note: the $ sign is frequently used to represent the object of Jquery in jquery coding. 1) Download the Jquery library 2) Make a separate file with the extension of .js in a javascript directory (can call it js for instance). Put the downloaded JQuery.js file in there. Note for other external script files: External scripts cannot contain -you can do this for multiple .js files as needed 4) Write jquery code in .js file ======================== Syntax: $('elementorObjectSelector').propertyOrMethod(function(){ code }; ---------- Note: Generally a good idea to have a script that stops the code from running until the document is finished loading: $(document).ready(function() { //$(JQuery code) when the document has finished loading; }); =================================== -To get element: $('elementName').method(); ------------- -To get the id Ex:

with id of 'heading': $('h1#heading').method(); ---------------- -To get a class: -All classes: $(.className).method();

with a classname $('h1.className').method(); ------------------- -To get child elements: $('parentName childName').method(); Ex: $('p span').method(); -To grab specific child element: $('h1 p:first').method(); //this grabs the first

child in

$('h1 p:last').method(); //gets the last child in the parent $('h1 p:even').method(); //grabs even numbered children from parent $('h1 p:odd').method(); -Choose every child at a specific interval: use nth-child(): Ex: $('h1 p:nth-child(3n)').method(); //grabs every 3rd

in

--------------------- -get element by type: use the colon ':' $(':type').method(); //ex: $(':button').method(); --selects all buttons ------------------- -Select attributes: Select all attributes href in page: $('[href]').method(); Select the value of the attribute: syntax: $('[attributeName]').method(); //use the brackets to select an attribute. $('a[href="link.com"]').method(); --------------------------- ========================== EVENTS: -Mouse Events: -click(): $('#btnIdName').click(function(){ alert('Button Clicked'); }) Note: this is shorthand for the 'on' method; (the click method runs the full 'on' method behind the scenes: $('#btnIdName').on('click', function() { //code runs; }); --------- Example using on click method to hide an element when another is clicked: $('#btnId').on('click', function() { $('.otherClass').hide(); }); -Toggle button function example: $('#btnId').on('click', function() { $('.otherClass').toggle(); }); to specify what happens when toggled: $( "#target" ).toggle(function() { alert( "First handler for .toggle() called." ); }, function() { alert( "Second handler for .toggle() called." ); }); ---------------------- -Double Click Event : $('#btnId').dblclick(function(){ $code to run when double clicked; }); ------------------------ -Mouse Hovering: $('#btnId').hover(function(){ $code to run when mouse hovers on #btnId; }); Note: .hover() is a shorthand combination of mouseenter() and mouseleave() methods. ---------------------- -Mouse move: $('#btnId').mousemove(function(){ $code to run when mouse is moved; } ------------------- -Mouse up/Mouse Down: executes functions when mouse is clicked (mousedown) and stops when it's released, and when mouse click is released (mouseup). Ex: $('#btnId').mousedown(function(){ $code to run when mouse first clicked and stops when released; } $('#btnId').mouseup(function(){ $code to runs when mouse click released; } ** You can combine mouse down and mouse up. ------------------- ====================== To Work with the target of the event's properties, pass in 'e' to the function of the method being used: -Grab information about what is clicked on the page: pass in an 'e' parameter to the function and then access the properties with e.currentTarget.propName. Ex: $('#elementId').click(function(e){ alert(e.currentTarget.id); -returns id of clicked element alert(e.currentTarget.innerHTML); //returns the text in between tags of the element clicked. alert(e.currentTarget.outerHTML); //returns the tags info etc. alert(e.currentTarget.className); //returns class name } ------------- Coordinates: work with coordinates using e.clientX or e.clientY for X/Y coordinates of the mouse Ex: $('document').mousemove(function(e){ $('elementOnPage').html('e.clientY + e.clientX'); //this displays the xy coordinates when the mouse moves on the screen continuously updated. (.append adds each event to a list) )}; =============== FORM EVENTS: -Focus events (when you click into an ) You can trigger events when the user clicks on a field input etc: $('input').focus(function(){ alert("focus"); }); ----- Ex: change the baackground color of the input field when user clicks in it: **Use 'this' (without quotes!!) in the code to indicate whatever object element is being clicked in: $('input').focus(function(){ $(this).css('background', 'blue'); }); //grabs all inputs but targets the one being clicked with 'this'. --------------- -Blur event (the opposite of focus, when user clicks out of the ): To change background color back when user clicks outside of the input field: $('input').blur(function(){ $(this).css('background', 'white'(or whatever Body Is); }); -------------------- -KEYUP and KEYDOWN: .keyup() .keydown() $('input').keyup(function(){ console.log('keyup'); }); -To get the data that's being taken in with the keyup: $('input').keyup(function(e){ console.log('e.target.value'); }); //returns the actual value on keyup (the key on the keyboard being pressed). ------------------ -CHANGE: .change() Run code when there is a change (i.e. on a select menu) $('select#gender').change(function(){ alert('changed!'); }); // alerts user when the drop down menu selection changes. ------------------- -FORM SUBMIT EVENTS using .submit(): $('#form').submit(function(e){ e.preventDefault(); console.log('message'); } //preventDefault pauses the form from being submited and allows access to form data entered by the user. -To get values of the inputs: $('input#name').val(); //returns the value of the input with id of 'name' ============================= DOM MANIPULATION: Adding and changing CSS properties of elements: -Change the color of an element: $('p.pClass').css('color', 'red'); //changes

class to red color. Note: to affect multiple CSS props on an element, wrap code as an object using {}: Ex: $('p.pClass').css({color: 'red', background: 'white'}); ------------- -Add or Remove Classes: $('p.pClass').addClass('newClassToAdd'); //this adds the class to

with pClass class. $('p.pClass').removeClass('newClassToAdd'); //removes the specified class from

. pClass -To toggle a class when an element is clicked on (for ex, to change it's appearence based on what's in the css file): $('p.pClass').click(function(){ $('element').toggleClass('classAddedWhenClicked'); }); ---------------- -set or get values with .text and .html: $('element').html('

This adds HTML code to the element

'); $('element').text('this displays as text in the element'); ---- -Get the text and html values when method parameter is left blank: alert($('element').text()); //alerts the text value of the element ----------------------- -APPEND AND PREPEND: .append() .prepend() add values to or before elements selected. -you can also append other elements to other elements: Ex: $('element1').appendTo('element2'); Works with prependTo() as well. ----- Note: append and prepend work inside parent elements generally. To place elements outside of a parent (div or ul for instance), use: .before() and .after() $('ul').before('

Hello

'); //this places the h4 before the