MIDHUNSUDHAKAR
midhusudhakaran@gmail.com
Midhun.sudhakar.73@facebook.com
twitter.com/midhunopus
in.linkedin.com/pub/midhun...
Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
docu...
WELCOME
CONTENT
WHAT IS JQUERY?
JQUERY SELECTORS
JQUERY FILTERS
JQUERY ATTRIBUTES
JQUERY EVENTS
HTML MANIPULATION
EXAMPLE
What is jQuery?
•Jquery is JavaScript
document.getElementById(“HiddenDIV”).style.display = 'block';
But
$(“#HiddenDIV”).sh...
What is jQuery?
•JavaScript library
•Easy to learn and implement
•jQuery make is easy to:
•Find content on HTML
•Change HT...
What is jQuery?
•A lightweight “wrote less ,do more” JavaScript library.
•It contain:
•HTML element selections
•HTML eleme...
In order to work in jQuery
HTML
CSS
JavaScript
How to use jQuery?
•a single JavaScript file that contain all the jQuery functions
for Example:
jQuery syntax
jQuery syntax example:
•$.(this).hide();
•$.(“p”).hide();
•$.(“#test”).hide();
•$.(“.test”).hide();
Basic sy...
jQuery selectors
•To select HTML elements by name , attribute name or content
jQuery element selectors:
•Just like CSS sel...
jQuery selectors
jQuery attribute selectors
selects each element with the specified attribute.
•$(“[href]”)
•$(“[id]”)
jQu...
jQuery filter() Method
•Returns elements that match a certain criteria.
<html><head>
<script
src="http://ajax.googleapis.c...
jQuery attributes
These methods get and set DOM attributes of elements.
•Read
•$(“#image”).attr(“src”)
•Set
•$(“#image”).a...
jQuery events
•Event methods trigger or attach a function to an event.
•click()
•change()
•mousedown()
•delegate()
etc..
E...
jQuery Callback functions
•A callback function is executed after the current
effect is executed.
•Syntax:
•$(selector).hid...
jQuery HTML manipulation
• used to manipulate the HTML
•append()
•prepend()
•remove() etc…
•ex:
$(document).ready(function...
jQuery CSS manipulation
•jQuery CSS examples
•sets css property& value
•$(this).css(“font-size”,”20px”);
•Sets multiple va...
Example
Login
THANK YOU
Want to learn more about programming or Looking to become a good programmer?
Are you wasting time on searching so many con...
Follow us @ twitter.com/baabtra
Like us @ facebook.com/baabtra
Subscribe to us @ youtube.com/baabtra
Become a follower @ s...
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Sta...
Jquery
Upcoming SlideShare
Loading in …5
×

Jquery

354
-1

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
354
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery

  1. 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. 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. 3. WELCOME
  4. 4. CONTENT WHAT IS JQUERY? JQUERY SELECTORS JQUERY FILTERS JQUERY ATTRIBUTES JQUERY EVENTS HTML MANIPULATION EXAMPLE
  5. 5. What is jQuery? •Jquery is JavaScript document.getElementById(“HiddenDIV”).style.display = 'block'; But $(“#HiddenDIV”).show();
  6. 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. 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. 8. In order to work in jQuery HTML CSS JavaScript
  9. 9. How to use jQuery? •a single JavaScript file that contain all the jQuery functions for Example:
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 19. Example Login
  20. 20. THANK YOU
  21. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×