Your SlideShare is downloading. ×
Jquery
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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
321
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
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