learn and start using jQuery

What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library, it simplifies HTML/DOM manipulation, CSS manipulation, event handling, animation, Ajax calls and much more in web developing, jQuery is the most popular JavaScript frameworks used over internet.


Start using jQuery:
To start using features of jQuery you have to include its library, there are two versions of its library we need the compressed one, and you can do this by:

1- download jQuery library from jQuery.com and then include it in your page from your webhost.
1
<script src="jquery-1.9.1.min.js"></script>

2- include jQuery library from any CDN (Content Delivery Network), for example Google CDN.
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



jQuery Syntax:
The basic syntax is: $(selector).action()
$ : indicate for start jQuery Syntax.
selector: you can use (this) or (css selector).
action : any jQuery action like hide, fade, or events like click, dblclick.


$(document).ready():
Important event to start when the HTML document and all its objects are completely loaded, that prevent to take any action before all HTML objects are loaded, which causes errors.
so all jquery codes will written in the ready event.


A simple JQuery example:
In the next example we will use a simple JQuery code to illustrate how to select button element to add a mouse click event on it and to select p element to add a hide action on it.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html dir="ltr">
<head>
<title>my first jQuery page</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
 
<body>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert('this is my first jquery code, I will hide the text now.');
     $("p").hide(1000);
  });
}); 
 
</script>
<p> any text any text any text any text <br>
any text any text any text any text .
</p>
<button>Click me</button>
</body>
</html>
If this post was good and helpful for you, Please give it Like.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment