Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Learning jQuery in 30 minutes
Next
Download to read offline and view in fullscreen.

Share

jQuery for beginners

Download to read offline

Slides for presentation C002 | jQuery for beginners in Sumofyou Technologies

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • urmilabavkar1

    Oct. 19, 2020
  • islammuhsen

    Jun. 20, 2020
  • REPAKULAYogesh

    Dec. 25, 2019
  • AmjadAli490

    Nov. 2, 2019
  • AnantRaswe

    Aug. 31, 2019
  • AdityaGandhi41

    Apr. 20, 2019
  • saranglad

    Mar. 30, 2019
  • manishkumar2948

    Aug. 1, 2018
  • hiteshsantani

    Jul. 30, 2018
  • werdanplock

    Jul. 17, 2018
  • MuhamadIrfanMubasyir

    Jul. 7, 2018
  • prabhakerdeepti

    Mar. 27, 2018
  • AnandBalajiP

    Jan. 20, 2018
  • umairassad

    Nov. 28, 2017
  • muraleekrishna3

    Nov. 3, 2017
  • NayanDeosarkar

    Oct. 27, 2017
  • sayokomiura

    Sep. 13, 2017
  • alirezaimi

    Aug. 20, 2017
  • srinivas9999

    Aug. 6, 2017
  • mehendran

    Aug. 5, 2017

Slides for presentation C002 | jQuery for beginners in Sumofyou Technologies

Views

Total views

31,915

On Slideshare

0

From embeds

0

Number of embeds

99

Actions

Downloads

3,122

Shares

0

Comments

0

Likes

48

×