How to use jQeury? Basic concept - Nano Blogs Online

Nano Blogs Online

Nano Blogs Online provides free help in Web Technologies, Affiliate Marketing, Social Media Marketing, Digital Marketing, and reviews different products from the online world.

How to use jQeury? Basic concept

How to use jQeury? Basic concept

Share This

What is jQeury?

According to W3School “jQuery is a lightweight, "write less, do more", JavaScript library”

What is  the purpose of jQuery?

Jquery is used to make it much easy to use JavaScripts, in website. Normaly it is very hard to use JavaScript, and jQuery make it easy for us.

What you should Already know?

Before you start studying jQuery, you should have a basic knowledge of:
  1. HTML
  2. CSS
  3. JavaScript
jQuery Features:
We can use jQeury with following
  1. HTML/DOM manipulation
  2. CSS manipulation
  3. HTML event methods
  4. Effects and animations
  5. AJAX
  6. Utilities

How to use jQuery?

    You can download Jquery and add it to your website.
     <head>  
 <script src="jquery-1.12.4.min.js"></script>  
 </head>  
Download jQuery http://jquery.com/

You can use jQeury CDN
 <head>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  
 </script>  
 </head>  
Note: We can find the about code by using the following link
jQury link:
Code to add
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  
 </script>  
jQuery UI link:
Code to add
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
jQuery Mobile link
Code to add
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>  

jQuery Syntax

According to w3School “The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
  1. A $ sign to define/access jQuery
  2. A (selector) to "query (or find)" HTML elements
  3. A jQuery action() to be performed on the element(s)

The Document Ready Event

 $(document).ready(function(){  
   // jQuery methods go here...  
 });  

jQuery Selectors


jQuery selectors allow you to select and manipulate HTML element(s).
$("*")
Selects all elements
$(this)
Selects the current HTML element
$("p.classname or #id")
Selects all <p> elements with class="intro"
$("p:first")
Selects the first <p> element
$("ul li:first")
Selects the first <li> element of the first <ul>
$("ul li:first-child")
Selects the first <li> element of every <ul>
$("[href]")
Selects all elements with an href attribute
$("a[target='_blank']")
Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']")
Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button")
Selects all <button> elements and <input> elements of type="button"
$("tr:even")
Selects all even <tr> elements
$("tr:odd")
Selects all odd <tr> elements

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:
  1. moving a mouse over an element
  2. selecting a radio button
  3. clicking on an element

jQuery Syntax For Event Methods

 $("p").click();  
Mouse Events
Keyboard Events
Form Events
Document/Window Events
click
keypress
submit
load
dblclick
keydown
change
resize
mouseenter
keyup
focus
scroll
mouseleave

blur
Unload

Exapmple 1:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 </head>  
 <body>  
 <p id="line1">Hello everyboday from line one!</p>  
 <p id="line2">Hello everyboday from line two!</p>  
 <p id="line3">Hello everyboday from line three!</p>  
 <p id="line4" class="line-class4">Hello everyboday from line four!</p>  
 <ul>  
 <li>list item one</li>  
 <li>list item two</li>  
 <li>list item three</li>  
 <li>list item four</li>  
 </ul>  
 <a href="www.google.com" target="_blank">Google</a><br /><br />  
 <a href="www.yahoo.com">Yahoo</a><br /><br />  
 <table border="2" width="500">  
 <tr>  
 <td>1</td>  
 <td>2</td>  
 <td>3</td>  
 </tr>  
 <tr>  
 <td>4</td>  
 <td>5</td>  
 <td>6</td>  
 </tr>  
 </table>  
 <br /><br />  
 <button type="button">Click</button>  
 <script>  
 $(document). ready(function(){  
         $("button "). click(function(){  
                 $(“*”).hide();  
                 });  
         });  
 </script>  
 </body>  
 </html>  
Result: If you click on the button everything will be hide

Example 2:

Keep all the code as the same and change the <script></script>
 <script>  
 $(document). ready(function(){  
         $("button "). click(function(){  
                 $(this).hide();  
                 });  
         });  
 </script>  
Result: The butto disaper

Example 3:

Selecing Class or ID
 <script>  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $("p#line1").hide();  
                 });  
         });  
 </script>  
 <script>  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $("p.line-class4").hide();  
                 });  
         });  
 </script>  

Example 4:

 <script>  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $("p:last").hide();  
                 });  
         });  
 </script>  
 Or  
 <script>  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $("p:last").hide();  
                 });  
         });  
 </script>  
The first /second pharagraph will be hide

Example 5:

 <script>  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $("ul li:first").hide();  
                 });  
         });  
 </script>  
 Or  
 <script>  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $("ul li:first-child").hide();  
                 });  
         });  
 </script>  
Note – by this way we can select the ul – li elements

Example 6:

 <script>  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $("[href]").hide("color:red");  
                 });  
         });  
 </script>  
 This will target the all href elements.  
 Or  
 <script>  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $("a[target='_blank']").hide("color:red");  
                 });  
         });  
 </script>  
Target particular element i.e. _blank and you can also target in reverse form i.e.
 <script>  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $("a[target!='_blank']").hide("color:red");  
                 });  
         });  
 </script>  

Example 7:

 <script>  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $(":button").hide("color:red");  
                 });  
         });  
 </script>  
Selecting button and button input elements

Example 8:

 <script>  
 $(document).ready(function(){  
         $("tr:even").css("background-color", "#ff6600");  
         });  
 $(document).ready(function(){  
         $("tr:odd").css("background-color", "#dddddd");  
         });  
 $(document). ready(function(){  
         $("button"). click(function(){  
                 $("tr:even").hide("color:red");  
                 });  
         });  
 </script>  

Other Example for Events:

 <script>  
 $(document).ready(function(){  
         $("tr:even").css("background-color", "#ff6600");  
         });  
 $(document).ready(function(){  
         $("tr:odd").css("background-color", "#dddddd");  
         });  
 $(document). ready(function(){  
         $("button"). dblclick(function(){  
                 $("tr:even").hide("color:red");  
                 });  
         });  
 </script>  
Or
 <script>  
 $(document).ready(function(){  
         $("tr:even").css("background-color", "#ff6600");  
         });  
 $(document).ready(function(){  
         $("tr:odd").css("background-color", "#dddddd");  
         });  
 $(document). ready(function(){  
         $("button"). mouseenter(function(){  
                 $("tr:even").hide("color:red");  
                 });  
         });  
 </script>  
Or
 <script>  
 $(document).ready(function(){  
         $("tr:even").css("background-color", "#ff6600");  
         });  
 $(document).ready(function(){  
         $("tr:odd").css("background-color", "#dddddd");  
         });  
 $(document). ready(function(){  
         $("button"). mouseleave(function(){  
                 $("tr:even").hide("color:red");  
                 });  
         });  
 </script>  

No comments:

Post a Comment