Jquery
•Als PPTX, PDF herunterladen•
0 gefällt mir•566 views
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie Jquery
Ähnlich wie Jquery (20)
Mehr von baabtra.com - No. 1 supplier of quality freshers
Mehr von baabtra.com - No. 1 supplier of quality freshers (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Jquery
- 3. 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
- 4. WELCOME
- 5. CONTENT WHAT IS JQUERY? JQUERY SELECTORS JQUERY FILTERS JQUERY ATTRIBUTES JQUERY EVENTS HTML MANIPULATION EXAMPLE
- 6. What is jQuery? •Jquery is JavaScript document.getElementById(“HiddenDIV”).style.display = 'block'; But $(“#HiddenDIV”).show();
- 7. 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
- 8. 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
- 9. In order to work in jQuery HTML CSS JavaScript
- 10. How to use jQuery? •a single JavaScript file that contain all the jQuery functions for Example:
- 11. 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.
- 12. jQuery selectors •To select HTML elements by name , attribute name or content jQuery element selectors: •Just like CSS selectors •$(“p”) •$(“p.intro”) •$(“p#domo”)
- 13. 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" );
- 14. 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>
- 15. 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”);
- 16. 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.");}); });
- 17. 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”); });
- 18. 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>."); }); });
- 19. 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”);
- 20. Example Login
- 21. THANK YOU
- 22. 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.
- 23. 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
- 24. 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