Jquery

Example Site http://ulua.its.yale.edu/bmec-training/

##Selectors ###Models Page

jQuery('section')
jQuery('section').css('background', 'pink')
jQuery('section').css('border', '5px solid green')
jQuery('hr').css('border', '1px solid green')
jQuery('section hr').css('border', '1px solid green')
jQuery('section').children('hr').css('border', '1px solid green')
jQuery('section').find('hr').css('border-color', 'green')

###Documentation

• Basic Selectors API
• Attribute Selectors API
• Hierarchy Selectors API
• CSS Manipulation API

##Traversal ###Index Page

jQuery('.thumbnail').css('background', 'red')
jQuery('.thumbnail').children('img')
jQuery('.thumbnail').find('img')
jQuery('.thumbnail').find('img').css('border-radius', '300px')
jQuery('.thumbnail')
jQuery('.thumbnail').css('background', 'pink')
jQuery('.thumbnail').find('img')
jQuery('.thumbnail').find('img').css('border-radius', '300px')

###Documentation

• Tree Traversal API
• Find vs Children Example

##DOM Manipulation ###Index Page

jQuery('.thumbnail:first').prepend('<h2>New!</h2>')

or

newtag = jQuery('<h2>New!</h2>')
jQuery('.thumbnail:first').prepend(newtag)

###Documentation

• DOM Manipulation API
• Inserting DOM Nodes Example

##Events ###Index Page

a = jQuery('.page-header').children('h1')
a.on('mousedown', function(){alert($(this).text())})

a = jQuery('.page-header').children('h1')
function beautify(){$(this).css('background', 'pink')}
a.on('click', beautify)

a = jQuery('.page-header').children('h1')
a.on('mousedown', function(){$(this).animate({'font-size':'100px'})})
a.on('mouseup', function(){$(this).animate({'font-size':'10px'})})

a = jQuery('.page-header').children('h1')
a.on('lol', function(){$(this).animate({'font-size':'100px'})})
a.on('trololol', function(){$(this).animate({'font-size':'10px'})})
a.trigger('lol')
a.trigger('trololol')

###Documentation

• "On" Function API
• Native DOM Events
• Custom events can be made using Trigger

##Animation ###Index Page

see above

###Documentation

• Animation API