JQuery
-
Upload
baabtracom-no-1-supplier-of-quality-freshers -
Category
Education
-
view
188 -
download
0
description
Transcript of JQuery
![Page 1: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/1.jpg)
![Page 2: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/2.jpg)
Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring PartnerBaabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
![Page 3: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/3.jpg)
jQuery Validation
Atheendrh [email protected]/atheendrh
kakkothtwitter.com/usernamein.linkedin.com/in/atheendrh
kakkoth9633734876
![Page 4: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/4.jpg)
Week Target Achieved
1 30 28
2
3
Typing Speed
![Page 5: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/5.jpg)
What is jQuery?
• JavaScript Library• jQuery is a lightweight, "write less, do more",
JavaScript library.• The purpose of jQuery is to make it much easier to use
JavaScript on your website• The jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX
![Page 6: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/6.jpg)
Why jQuery?
• Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
• CSS-like syntax – easy for developers/non-developers to understand
• Active developer community
![Page 7: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/7.jpg)
JQuery
• Powerful JavaScript library– Simplify common JavaScript tasks– Access parts of a page
• using CSS or XPath-like expressions– Modify the appearance of a page– Alter the content of a page– Change the user’s interaction with a page– Add animation to a page– Provide AJAX support– Abstract away browser quirks
![Page 8: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/8.jpg)
A Few Examples
• Forms• Chatboxes• Menus• Dropdowns• Sliders• Tabs• Slideshows• Games
![Page 9: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/9.jpg)
Using jQuery• Adding jQuery to Your Web Pages There are several ways to start using jQuery on your
web site. You can: Download the jQuery library from jQuery.com Include jQuery from the file
<head><script src="jquery-1.10.2.min.js"></script></head>
![Page 10: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/10.jpg)
The Document Ready Event• You might have noticed that all jQuery methods in our examples, are inside a document
ready event:
• This is to prevent any jQuery code from running before the document is finished loading (is ready).
• This also allows you to have your JavaScript code before the body of your document, in the head section.
$(document).ready(function(){
// jQuery methods go here...
});
![Page 11: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/11.jpg)
jQuery Selectors
• jQuery selectors allow to select and manipulate HTML element(s).
• jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
• All selectors in jQuery start with the dollar sign
![Page 12: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/12.jpg)
The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.To find an element with a specific id, write a hash character, followed by the id of the element: $("#test")
The element Selector
jQuery element selector selects elements based on the element name.You can select all <p> elements on a page like this: $("p")
The .class SelectorThe jQuery class selector finds elements with a specific class.To find elements with a specific class, write a period character, followed by the name of the class: $(".test")
![Page 13: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/13.jpg)
What are Events?
• All the different visitor's actions that a web page can respond to are called events.
• An event represents the precise moment when something happens.
• Examples: moving a mouse over an element selecting a radio button clicking on an element
Click() event
$("p").click(function(){ $(this).hide();});
![Page 14: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/14.jpg)
Form.php
![Page 15: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/15.jpg)
jQuery Validation
![Page 16: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/16.jpg)
Beforevalidation
After validation
![Page 17: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/17.jpg)
jQuery Animations• Animations• Built in
– fadeIn()– fadeOut()– hide()– show()– slideDown()– slideUp()– toggle()– slideToggle()– fadeTo()– animate()
• See also:– Easing Plug-in– jQuery User Interface: http://ui.jquery.com
![Page 18: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/18.jpg)
Who’s using jQuery?
• Google• Dell• Bank of America• Mozilla• NetFlix• NB
![Page 19: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/19.jpg)
If this presentation helped you, please visit our page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.com | www.massbaab.com |www.baabte.com
![Page 20: JQuery](https://reader033.fdocuments.in/reader033/viewer/2022060119/558fcb0c1a28abfd388b4623/html5/thumbnails/20.jpg)
Contact Us
Emarald Mall (Big Bazar Building)Mavoor Road, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550
NC Complex, Near Bus StandMukkam, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550
Start up VillageEranakulam,Kerala, India.
Email: [email protected]