Jquery
Upcoming SlideShare
Loading in...5
×
 

 

Statistics

Views

Total Views
246
Views on SlideShare
246
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jquery Jquery Presentation Transcript

  • MIDHUNSUDHAKAR midhusudhakaran@gmail.com Midhun.sudhakar.73@facebook.com twitter.com/midhunopus in.linkedin.com/pub/midhunsudhakar/86/a65/a9b/Phonenumber 9995586182 jquery
  • 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
  • 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”).show();
  • 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
  • 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
  • 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 syntax is: $.(selector).action(); •a $ sign to define jQuery. •Selectors to find the HTML elements. •an action is to be performed elements.
  • jQuery selectors •To select HTML elements by name , attribute name or content jQuery element selectors: •Just like CSS selectors •$(“p”) •$(“p.intro”) •$(“p#domo”)
  • 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" );
  • 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>
  • 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”);
  • 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.");}); });
  • 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”); });
  • 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>."); }); });
  • 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”);
  • 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 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.
  • 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
  • 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