Webinar: Getting Started With jQuery - Recap

Sunday, 10 November, 2013. C# Corner Mumbai Chapter organized online webinar on Getting Started with JQuery.

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

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

    Works on DOMWorks on DOM

Document Object Model

Document Object
                                                    Document Object

Document Object Model
                                                                  Model

JavaScript vs jQuery

  • Example1: Hide an element with id "textbox"

    //javascript
    document.getElementById('textbox').style.display= "none";
     //jQuery
    $('#textbox').hide();
     
  • Example 2Create 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

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
Index Filters              Index Filters

Condition Filters: Form Filters

  Condition Filters
Condition Filters
Relationship Filters: Content Filters

 Relationship Filters
Relationship Filters

Attribute Filters

                      Syntax                                                            Example
Attribute Filters
                                                                    

Retrieve, Set and Remove Attributes

                            Syntax                                                       Example
Retrieve, Set and Remove Attributes   Retrieve, Set and Remove Attributes

Class, HTML, Text, Value: Functions

Class, HTML, Text, Value - Functions

Traversing

                       Syntax                                                     Example
Traversing   Traversing

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.