Jquery
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
314
On Slideshare
314
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

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. MIDHUNSUDHAKAR midhusudhakaran@gmail.com Midhun.sudhakar.73@facebook.com twitter.com/midhunopus in.linkedin.com/pub/midhunsudhakar/86/a65/a9b/Phonenumber 9995586182 jquery
  • 2. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
  • 3. WELCOME
  • 4. CONTENT WHAT IS JQUERY? JQUERY SELECTORS JQUERY FILTERS JQUERY ATTRIBUTES JQUERY EVENTS HTML MANIPULATION EXAMPLE
  • 5. What is jQuery? •Jquery is JavaScript document.getElementById(“HiddenDIV”).style.display = 'block'; But $(“#HiddenDIV”).show();
  • 6. What is jQuery? •JavaScript library •Easy to learn and implement •jQuery make is easy to: •Find content on HTML •Change HTML content •Listen to what s user does or react accordingly •Animate the content of the page •Talk over the network to fetch new content
  • 7. What is jQuery? •A lightweight “wrote less ,do more” JavaScript library. •It contain: •HTML element selections •HTML element manipulation •CSS manipulation •HTML event functions •JavaScript effects and animations •HTML DOM traversal •Ajax
  • 8. In order to work in jQuery HTML CSS JavaScript
  • 9. How to use jQuery? •a single JavaScript file that contain all the jQuery functions for Example:
  • 10. jQuery syntax jQuery syntax example: •$.(this).hide(); •$.(“p”).hide(); •$.(“#test”).hide(); •$.(“.test”).hide(); Basic syntax is: $.(selector).action(); •a $ sign to define jQuery. •Selectors to find the HTML elements. •an action is to be performed elements.
  • 11. jQuery selectors •To select HTML elements by name , attribute name or content jQuery element selectors: •Just like CSS selectors •$(“p”) •$(“p.intro”) •$(“p#domo”)
  • 12. jQuery selectors jQuery attribute selectors selects each element with the specified attribute. •$(“[href]”) •$(“[id]”) jQuery CSS selectors Selects all elements with the given class. ex: •$( ".myClass" ).css( "border", "3px solid red" );
  • 13. jQuery filter() Method •Returns elements that match a certain criteria. <html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script> <script> $(document).ready(function(){ $("p:first").css("background-color","yellow"); $("p:nth(2)").css("background-color","yellow"); }); </script> </head> <body> <p>My name is midhun.</p> <p class="intro">this is baabtra.</p> <p class="intro">i am a student in baabtra .</p> <p>My mentor is suhail.</p> </body></html>
  • 14. jQuery attributes These methods get and set DOM attributes of elements. •Read •$(“#image”).attr(“src”) •Set •$(“#image”).attr(“src”,”image/logo.jpg”) •Set class •$(“p:last”).addClass(“selected”);
  • 15. jQuery events •Event methods trigger or attach a function to an event. •click() •change() •mousedown() •delegate() etc.. Ex: $(document).ready(function(){ $("input").change(function(){ alert("The text has been changed.");}); });
  • 16. jQuery Callback functions •A callback function is executed after the current effect is executed. •Syntax: •$(selector).hide(speed,callback) •Ex: •$(“p”).hide(1000,function(){ Alert(“Now its hidden”); });
  • 17. jQuery HTML manipulation • used to manipulate the HTML •append() •prepend() •remove() etc… •ex: $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); });
  • 18. jQuery CSS manipulation •jQuery CSS examples •sets css property& value •$(this).css(“font-size”,”20px”); •Sets multiple values •$(this).css(“color”:”20px”,”padding”:”10px”); •Size manipulation •$(“#div1”).height(“200px”); •$(“#div1”).width(“200px”);
  • 19. Example Login
  • 20. THANK YOU
  • 21. Want to learn more about programming or Looking to become a good programmer? Are you wasting time on searching so many contents online? Do you want to learn things quickly? Tired of spending huge amount of money to become a Software professional? Do an online course @ baabtra.com We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, good software professional out of anybody who holds a passion for coding.
  • 22. Follow us @ twitter.com/baabtra Like us @ facebook.com/baabtra Subscribe to us @ youtube.com/baabtra Become a follower @ slideshare.net/BaabtraMentoringPartner Connect to us @ in.linkedin.com/in/baabtra Give a feedback @ massbaab.com/baabtra Thanks in advance www.baabtra.com | www.massbaab.com |www.baabte.com
  • 23. Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Cafit Square, Hilite Business Park, Near Pantheerankavu, Kozhikode Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com Contact Us