Your SlideShare is downloading. ×
0
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
jQuery for beginners
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery for beginners

8,993

Published on

Slides for presentation C002 | jQuery for beginners in Sumofyou Technologies

Slides for presentation C002 | jQuery for beginners in Sumofyou Technologies

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,993
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
920
Comments
0
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery for Beginners Arulmurugan - Developer
  • 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. Introduction to Javascript HTML CSS JavaScriptmarkup language presentation language scripting language content presentation behaviour Java JavaScript
  • 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. Document Object Model Document - Object
  • 6. Document Object Model Model html head body title h1 p ul li li li
  • 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. 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. 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. Selectors - Combined• Syntax $("tagName.className") $("tagName.className#tagId")• Examples $("h1.mainTitle") $("h1.mainTitle#firstHeading")
  • 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. 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. 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. 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. 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. 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. 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. Events• bind()• unbind()• ready()• toggle()• hover()• trigger() • $("selector").bind(event, data, handler) • $("selector").unbind(event, handler)
  • 19. Bind - Example$(function(){ $("#myButton").bind("onclick", validate); $("#myButton").click( validate);});function validate(){ if( $("#myText").val().length == 0 ) { alert("Error") } else { $("#myForm").submit(); }}
  • 20. Animations• show()• hide()• fadeIn()• fadeOut()• slideUp()• slideDown()
  • 21. Additional Features• jQuery UI• AJAX functionality
  • 22. Thank youslideshare.net/arulmr arul@arulmr.com

×