Your SlideShare is downloading. ×
0
jQuery for Beginners    Arulmurugan - Developer
What is jQuery?•   Is a free , open Javascript library•   Simplifies the task of creating highly    responsive web pages• ...
Introduction to Javascript HTML                 CSS                  JavaScriptmarkup language   presentation language    ...
What is a scripting language?•    Cant communicate with OS•    Cant access local files•    Cant directly access database• ...
Document Object Model       Document - Object
Document Object Model           Model                                     html                   head                     ...
JavaScript vs jQuery•   Example 1 - Hide an element with id "textbox“    //javascript    document.getElementById(textbox)....
Enable jQuery in your page•   jQuery can be enabled in your page by including    reference to jQuery library file    <scri...
Basic selectors•   TagName    document.getElementsByTagName("tagName");    $("tagName") - $("div"), $("p"), $("div"),........
Selectors - Combined•   Syntax    $("tagName.className")    $("tagName.className#tagId")•   Examples    $("h1.mainTitle") ...
Index filtersSyntax:                   Examples:•   $("selector:first")   •   $("p:first")•   $("selector:last")    •   $(...
Condition filters - Form filters•   $("selector:visible")          •   $("selector:input")•   $("selector:hidden")        ...
Relationship filters - Content filters•   $("selector:parent")           •   $("selector:content(text)                    ...
Attribute filtersSyntax:                           Examples:•  $("selector[attribute]")       •   $("p:[name]")•  $("selec...
Retrieve, Set and Remove attributesSyntax:                           Examples:•  $("selector").attr("name")     •  $("img"...
Class, HTML, Text, Value - Functions•   $("selector").hasClass("className")•   $("selector").addClass("className")•   $("s...
TraversingSyntax:                              Examples:•  $("selector").length              •  $("h1").length•  $("select...
Events•    bind()•    unbind()•    ready()•    toggle()•    hover()•    trigger()    • $("selector").bind(event, data, han...
Bind - Example$(function(){       $("#myButton").bind("onclick", validate);       $("#myButton").click( validate);});funct...
Animations•   show()•   hide()•   fadeIn()•   fadeOut()•   slideUp()•   slideDown()
Additional Features•   jQuery UI•   AJAX functionality
Thank youslideshare.net/arulmr  arul@arulmr.com
Upcoming SlideShare
Loading in...5
×

jQuery for beginners

10,009

Published on

Slides for presentation C002 | jQuery for beginners in Sumofyou Technologies

Published in: Technology

Transcript of "jQuery for beginners"

  1. 1. jQuery for Beginners Arulmurugan - Developer
  2. 2. What is jQuery?• Is 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
  3. 3. Introduction to Javascript HTML CSS JavaScriptmarkup language presentation language scripting language content presentation behaviour Java JavaScript
  4. 4. What is a scripting language?• Cant communicate with OS• Cant access local files• Cant directly access database• Cant access hardware• Client-side language• Works on DOM Users Computer Web Browser Web Server Web Page JavaScript Python, PHP, ASP.NET, Ruby on Rails
  5. 5. Document Object Model Document - Object
  6. 6. Document Object Model Model html head body title h1 p ul li li li
  7. 7. JavaScript vs jQuery• Example 1 - Hide an element with id "textbox“ //javascript document.getElementById(textbox).style.display = "none"; //jQuery $(#textbox).hide();• Example 2 - Create a <h1> tag with "my text“ //javascript var h1 = document.CreateElement("h1"); h1.innerHTML = "my text"; document.getElementsByTagName(body)[0].appendChild(h1); //jQuery $(body).append( $("<h1/>").html("my text") ;
  8. 8. 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 by using the below below given function. $(document).ready(function(){ //Script goes here }); OR $(function(){ //Script goes here });
  9. 9. 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")• To select all elements - $("*")
  10. 10. Selectors - Combined• Syntax $("tagName.className") $("tagName.className#tagId")• Examples $("h1.mainTitle") $("h1.mainTitle#firstHeading")
  11. 11. Index filtersSyntax: Examples:• $("selector:first") • $("p:first")• $("selector:last") • $("p:last")• $("selector:odd") • $("p:odd")• $("selector:even") • $("p:even")• $("selector:eq(i)") • $("p:eq(1)")• $("selector:gt(i)") • $("p:gt(1)")• $("selector:lt(i)") • $("p:lt(1)")
  12. 12. Condition filters - Form filters• $("selector:visible") • $("selector:input")• $("selector:hidden") • $("selector:text") • $("selector:password")• $("selector:disabled")• $("selector:enabled") • $("selector:radio") • $("selector:checkbox")• $("selector:checked")• $("selector:selected") • $("selector:submit") • $("selector:reset")• $("selector:header") • $("selector:image")• $("selector:animated") • $("selector:file")• $("selector:not(selector:not • $("selector:button") )")
  13. 13. Relationship filters - Content filters• $("selector:parent") • $("selector:content(text) ")• $("selector:first-child")• $("selector:last-child") • $("selector:empty")• $("selector:only-child") • $("selector:has(selector)")• $("selector:nth-child(i)")• $("selector:nth-child(odd)")• $("selector:nth- child(even)")• $("selector:nth- child(Xn+M)")
  14. 14. Attribute filtersSyntax: Examples:• $("selector[attribute]") • $("p:[name]")• $("selector[attribute=value ]") • $("p:[name=para]")• $("selector[attribute!=value ]") • $("p:[name!=para]")• $("selector[attribute^=valu e]") • $("p:[name^=para]")• $("selector[attribute$=valu e]") • $("p:[name$=para]")• $("selector[attribute*=valu e]") • $("p:[name*=para]")
  15. 15. Retrieve, Set and Remove attributesSyntax: Examples:• $("selector").attr("name") • $("img").attr("src")• $("selector").attr("key", • $("p").attr("class", "val") "source")• $("selector").attr("key", • $("img").attr("height", fn()) calHt())• $("selector").attr(propertie • $("img").attr({ s) "src" : "/path/", "title" : "My Img" });• $("selector").removeAttr(a • $("div").removeAttr("class“ ttr) )
  16. 16. Class, HTML, Text, Value - Functions• $("selector").hasClass("className")• $("selector").addClass("className")• $("selector").removeClass("className")• $("selector").toggleClass("className")• $("selector").html()• $("selector").html("html code")• $("selector").text()• $("selector").text("text content")• $("selector").val()• $("selector").val("value")
  17. 17. TraversingSyntax: Examples:• $("selector").length • $("h1").length• $("selector").size() • $("h1").size()• $("selector").get() • var h1_list = $("h1").get()• $("selector").get(index) • var h1 = $("h1").get(2)• $("selector").find("selector") • $("select").find("• $("selector").each(function(){ option[value=india]") $(this).xxxx(); • $("selector").each(function(){ }); $(this).addClass(title); });
  18. 18. Events• bind()• unbind()• ready()• toggle()• hover()• trigger() • $("selector").bind(event, data, handler) • $("selector").unbind(event, handler)
  19. 19. Bind - Example$(function(){ $("#myButton").bind("onclick", validate); $("#myButton").click( validate);});function validate(){ if( $("#myText").val().length == 0 ) { alert("Error") } else { $("#myForm").submit(); }}
  20. 20. Animations• show()• hide()• fadeIn()• fadeOut()• slideUp()• slideDown()
  21. 21. Additional Features• jQuery UI• AJAX functionality
  22. 22. Thank youslideshare.net/arulmr arul@arulmr.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×