Webinar: Getting Started With jQuery - Recap

What is jQuery?

• A free, open JavaScript library
• Simplifies the task of creating highly responsive web pages
• Works across modern browsers
• Abstracts away browser-specific features, allowing you to concentrate on design

Introduction to JavaScript



What is a Scripting language?

• Can't communicate with OS
• Can't access local files
• Can't directly access a database
• Can't access hardware
• Client-side language
• Works on the DOM
  
  
  

Document Object Model


Document Object


Model

JavaScript vs jQuery

• Example1: Hide an element with id "textbox"
  
  //javascript
  document.getElementById('textbox').style.display= "none";
  //jQuery
  $('#textbox').hide();
  
• Example 2: Create a <h1> tag with "mytext"
  
  //javascript
  varh1= document.CreateElement("h1");
  h1.innerHTML= "mytext";
  document.getElementsByTagName('body')[0].appendChild(h1);
  //jQuery
  $('body').append($("<h1/>").html("mytext");

Enable jQuery in your page

• jQuery can be enabled in your page by including :reference to jQuery library file
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  
• Introduce a jQuery function using the following function:
  
  $(document).ready(function(){
  //Script goes here
  });
  OR
  $(function(){
  //Script goeshere
  });

Basic Selectors

• TagName
  
  document.getElementsByTagName("tagName");
  $("tagName")-$("div"),$("p"),$("div"),.....
  
• Tag ID
  
  document.getElementById("id");
  
  $("#id")- $("#name"),$("#address")
  
• Tag Class
  
  document.getElementsByClassName("className");
  $(".className")- $(".comment"),$(".code")
  
• Toselectall elements- $("*")

Selector-Combined

• Syntax
  
  $("tagName.className")
  $("tagName.className#tagId")
  
• Examples
  
  $("h1.mainTitle")
  $("h1.mainTitle#firstHeading")

Index Filters

Syntax Example

Condition Filters: Form Filters



Relationship Filters: Content Filters

Attribute Filters

Syntax Example

Retrieve, Set and Remove Attributes

Syntax Example

Class, HTML, Text, Value: Functions

Traversing

Syntax Example


Events

• bind()
• unbind()
• ready()
• toggle()
• hover()
• trigger()
  
  $("selector").bind(event,data,handler)
  $("selector").unbind(event,handler)

Bind: Example

$(function(){
$("#myButton").bind("onclick", validate);
$("#myButton").click( validate);
});
function validate(){
if( $("#myText").val().length == 0 ) {
alert("Error")
} else {
$("#myForm").submit();
}
}

Animations

• show()
• hide()
• fadeIn()
• fadeOut()
• slideUp()
• slideDown()

Additional Features

• jQuery UI
• AJAX functionality

Thank You.