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
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>.");
});
});
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
