Getting started with jQuery
What is jQuery?
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.
jQuery takes a lot of common tasks that require
many lines of JavaScript code to accomplish, and wraps them into methods that
you can call with a single line of code.
jQuery also simplifies a lot of the complicated
things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following
features:
- HTML/DOM
manipulation
- CSS
manipulation
- HTML
event methods
- Effects
and animations
- AJAX
- Utilities
The jQuery library is a single JavaScript file,
and you reference it with the HTML <script> tag (notice that the
<script> tag should be inside the <head> section):
<head>
<script src="jquery-1.12.2.min.js"></script>
</head>
<script src="jquery-1.12.2.min.js"></script>
</head>
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML
elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
- A
$ sign to define/access jQuery
- A
(selector) to "query (or find)" HTML elements
- A jQuery action() to be performed on the element(s)
The Document Ready Event
·
You might have noticed that all jQuery methods in our examples,
are inside a document ready event:
// jQuery methods
});
// jQuery methods
});
jQuery Selectors
jQuery selectors allow you to
select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML
elements based on their name, 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 and
parentheses: $().
Examples:
$("*") Selects all elements.
$("this") Selects the current html element
$("p") Selects
all <p> elements on a page
$(".test") Selects all elements with class="test".
$("#test") Selects
all the element with id="test". etc..
jQuery Event Methods
An event represents the precise moment when
something happens.
Examples:
- moving a mouse over an element
- selecting a radio button
- clicking on an element
The term "fires/fired" is often used with events. Example: "The keypress event is
fired, the moment you press a key".
Hide, Show,
Toggle, Slide, Fade, and Animate.
jQuery
contains powerful methods for changing and manipulating HTML elements and
attributes.
jQuery Ajax
AJAX = Asynchronous JavaScript and XML.AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page
No comments:
Post a Comment