10 Days - Learn JQuery become JQuery Pro

/ / 0 Comments

Learn jquery in 10 days Hi, my name is Satinder Singh.  Here’s the tutorial “  Learn JQuery in 10 days “If you promise to give me thirty minutes a day, for an eleven-day regularly, then I promise that you’ll come out the other side as a jQuery pro. Introduction: Jquery is the write less, do more JavaScript Library. Its powerful features and ease of use have made it the most popular client-side JavaScript framework for the Web.

jQuery makes developer life easy because using jQuery it easy to find the elements of a document, and then manipulate those elements by adding content, editing HTML attributes and CSS properties,  defining event handlers, and performing animations. It also has Ajax utilities for dynamically making  HTTP requests and general-purpose utility functions for working with objects and arrays.

  1.  Jquery Basic
  2. Element Set and get
  3. Altering document structure
  4. Events
  5. Effect Animation
  6. Ajax
  7. Utility functions
  8. Selectors and selection method

#1- Basic of Jquery-

First, you have to add Jquery to your web page .i.e HTML page. Download jQuery from jQuery.com The jQuery Library is a single JavaScript file, and you reference it with the HTML <script> tag and that script tag should be inside the <head> tag. CODE:
<head>
<script src=”jquery-1.10.2.min.js”></script>
</head>
Alternative to downloading you can include it from CDN. I use Google libraries Click Here. CODE:
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
</head>
The Jquery Library Defines a single global function named Jquery(). This function is so Frequently used that the library also defines the global symbol $ as a shortcut for it.

The jQuery() function (a.k.a. $()) is the most important one in the jQuery library. When you pass a jQuery selector string to $(), it returns a jQuery object that represents the set of matched (or “selected”) elements.

jQuery selectors are very much like the CSS selectors you use in stylesheets.

Example:

div // all <div> elements
#content // the element with id=”content”
.warning // all elements with class=”warning”
 

Live Demo


  Explanation: First, we write this piece of code, which ensures that the document is ready for manipulation. ie it prevents any jQuery code from running before the document is finished loading.
$( document ).ready(function() {
   // Your code logic here.
});
Example 1:  Display  "Hello world" alert message on click of a div
$(document).ready(function(){
   $("#btnhelloworld").click(function(){
        alert("Hello world!");
    });
});
Example 2: Change background-color of an element
$(document).ready(function(){
    $("#btnchangebgColor").click(function(){
       $("#content").css("background-color","#BDEA74");
    });
});
Complete Full Code:
<html>
<title>10 Days Learn JQuery with satinder singh</title>
<head>
<style type="text/css">
#content{position:absolute;width:900px;height:600px;}

#btnhelloworld{
cursor:pointer; 
background: none repeat scroll 0 0 #FF5454;
color: #FFFFFF;
float:left;
border: 1px solid;
}

#btnchangebgColor {
cursor:pointer; 
background: none repeat scroll 0 0 #78CD51;
color: #FFFFFF;
width:190px; 
float:left;
border: 1px solid;
}

#btnchangebgColortowhite {
cursor:pointer; 
background: none repeat scroll 0 0 #67C2EF;
color: #FFFFFF; 
width:130px;
float:left;
border:1px solid;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">

 $(document).ready(function(){
      $("#btnhelloworld").click(function(){
         alert("Hello world!");
      });

     $("#btnchangebgColor").click(function(){
        $("#content").css("background-color","#BDEA74");
     });

     $("#btnchangebgColortowhite").click(function(){
        $("#content").css("background-color","#fff");
     });
 });

</script>
</head>
<body>
 <div id="content">
   <div id="btnhelloworld"> Click for alert </div>
   <div id="btnchangebgColor"> Change BG color to green</div>
   <div id="btnchangebgColortowhite"> Change to white </div>
 </div>
</body>
</html>

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

0 Comments