Getting Started With jQuery

Utilizing jQuery actually makes working with javascript somewhat pleasant. It's pretty easy to get started. To begin using jQuery, connect to the jquery script, and place your code within the document.ready function. It's best to link to the latest version of jQuery that is hosted by Google. By linking to Google's version, it will likely already be stored in your website visitors cache, so their browser won't have to donwload it again:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(document).ready(function(){ //Code Goes Here }); </script>

Selectors:

Being able to select images on a page, like an image, a div, or a link, you can set properties or get properties (like link target, font colors, etc...), depending on the usage. There are several types of selectors: ID Selector (Where the id of the element is 'element_id'):

$('#element_id')

Other Selectors

Element Selector (This will select all of the 'a' tags on the page):

$('a')

Class Selector (This will select the element with the class of 'menu'):

$('.menu')

There are also more advanced ways to select specific elements The following will select all anchor tags ('a') within an element with a class name of 'menu':

$('.menu a')

Advanced Selectors

Advanced selectors let you further pinpoint individual or groupings of HTML elements:

$(a[href])   //This will select all tags that have 'href' set.

[attribute] Selects elements that have a specified attribute assigned [attribute="value"] Selects elements that have an attribute with a specific value [attribute^="value"] Selects elements with an attibute that begins with a value. [attribute$="value"] Selects elements with an attribute that ends with a value. [attribute*="value"] Selects elements with an attribute that contains value.

Examples:

$('input[\'type="text"]')                  //Finds all of the textboxes within a form

$('a[href^="http://"]')                   //Finds all external links

$('a[href$=".pdf"]')                        //Finds all links to pdf documents

$('a[href*="voidjumping.com"]')    //Finds all links that go to voidjumping

Filters

Filters provide even more refined ways of returning an element:

$('tr:even')                       //Selects on the even rows of a table

$('p:first')                         //Selects the first 'p' tag of the page

$('p:last')                         //Selects the last 'p' tag of the page

$('a:not(.btn)')                 //Selects all a tags that don't have the class '.btn'

$('li:has(a)')                     //Only selects 'li' tags that have an 'a' tag within them

$('a:contains(Yahoo)')     //Only selects link that have 'Yahoo' in the label

$('div:hidden')                 //Selects all hidden elements

$('div:visible')                  //Selects all visible elements

Functions

Once you have selected an element, you can change its content or change its properties.   .html can read or set the HTML within an element that has been selected:

$('#content_div').html();                            //Will Return the HTML

$('#content_div').html('This is a test.');     //Will set the HTML to 'This is..'

Other Functions: .text reads only the text from within a selected element (ignoring any html code). .append adds text/code directly in front of the ending tag of the selected element. .prepend adds text/code directly behind the opening tag of the selected element. .before adds text/code directly in front of the opening tag of the selected element. .after adds text/code directly behind the ending tag of the selected element. .remove deletes the entire object being referenced: $('#div1').remove(); .replaceWith replaces the object: $('#div1').replaceWith(<p>Test</p>');

Anonymous Functions

A quick way to insert a function -- you don't need to provide it a name:

$('selector').each(function(){

     //Stuff to do

});

Multiple Elements Executing the Same Code

Make various elements utilize the same events:

$('.class1, .class2').click(some_function);

Reading and Setting HTML Tag Attributes

.addClass() adds a class to an element: $('a[href^="http://"]').addClass('eLink'); .removeClass() removes a class: $('#mytext').removeClass('highlight'); .toggleClass()   .css can return the css value for a selected element:

var_backgroundcolor  = $('#myDiv').css('background-color');

.css can also apply a css style to an element: $('#mytext').css('border','1px solid red'); To change multiple css styles at once, you can do the following:

$('#mytext').css({

     'backgound-color' : '#000',

     'border' : '1px solid red'

});

.attr returns an html attribute. If a second parameter is included (example 2), it will replace the attribute with the specified value:

var imageFile = $('#banner_img').attr('src');               //Returns the image path

$('#banner_img).attr('src','images/NewImage.gif');    //Change the image path