Getting Started with jQuery

Topics

• jQuery selectors

  • class selectors

  • id selectors

  • other selectors

• DOM Manipulation

  • addClass

  • append

  • attr

  • html

  • text

  • hide and show

• Event Handlers
  • click
  • change
  • isdefaultprevented
  • focus and blur
  • keyboard events(keypress, keyup, keydown)
  • mouse events(mousein, mouse out, mousemove, hover)
• jQuery GET/POST

jQuery selectors

• Class selectors

  • $('.classname')

• ID selectors

  • $('#id')

• element selectors

  • $(p)

• input selectors

  • $('input [type=text]')

• first and last

  • $('li:first') or $('li:last')

DOM Manipulation

Note: selector can be any possible selector.

• Hide and Show

  • $(selector).hide()

  • $(selector).show()

• addClass

  • $(selector).addClass('wrap')

• append

  • $('ol').append('<li>new list item</li>')

• appendTo

  • $('<li>new list item</li>').appendTo('ol')

• after and before

  • $(selector).after('hello')

  • $(selector).before('hello')

• html() - gives you the html content of the selector

  • $(selector).html()

• text() -gives you the text content of the selector

  • $(selector).text()

• val() - gives you the value of the form elements

  • $('input').val()

• val(value) - sets the value to the form elements

  • $('input').val('hello')

Text

Text

more tags...

• attr('title') - gets the value of the attribute

  • $(selector).attr('title')

• attr('title', 'value') -sets the value to an attribute

  • $(selector).attr('title','hello world')

• removeAttr() -used to remove an attribute

  • $(selector).removeAttr( "title" )

some more tags...

Event Handlers

• Mouse Events
  • click
  • dblclick
  • mouseenter
  • mouseleave
  • mousemove

• Keyboard Events
  • keypress
  • keyup
  • keydown

• Form Events
  • submit
  • change
  • focus
  • blur

General format for writing an event:

$(selector).on('eventname',function(context,event){

   //do something

});

Good practices, Performance and Memory management!

• place styles at the top of the html page
• place scripts at the bottom of the html page

• use external files to write your js and css code

• The html page should have a 'lang' attribute.
• html page should have a 'main' section with role='main'
  • eg: <main role='main'> </main>

• use CDN libraries whereever possible
• Local variables are fast
• accessing object is very expensive
• prefer to use object.name instead of object["name"] because it is faster on safari

var firstDiv=document.getElementById("first")
var secondDiv=document.getElementById("second")
var thirdDiv=document.getElementById("third")

***Never ever make this mistake***

• store in a variable when an object is accessed more than once

var doc=document
var firstDiv=doc.getElementById("first")
var secondDiv=doc.getElementById("second")
var thirdDiv=doc.getElementById("third")

Write this instead...

• use 'ySlow' addon to check out the improvements you can do with your html page.