Skip to main content

jQuery Method hasClass,animations,fadeIn,fadeOut,eq

What is jQuery‭ ‬:

JQuery is a JavaScript library which is small, quick, with tons of features that makes things such as animation, event handling and manipulation in web browser easy to use and handle.

1-jQuery is a fast and concise JavaScript Library created by John Resig in‭ ‬2006‭ ‬with a nice motto‭ ‬-‭

2-Write less,‭ ‬do more.‭

3-jQuery simplifies HTML document traversing,‭ ‬event handling,‭ ‬animating,‭ ‬and Ajax interactions for rapid web development.


jQuery hasClass() Method
Determine whether any of the matched elements are assigned the given class

Syntax :
.hasClass(className)

The hasClass(class) method returns true if the specified class is present on at least one of the set of matched elements otherwise it returns false.

Code :
 
<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/query.min.js"></script>
         <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#result1").text( $("p#pid1").hasClass("red") );
            $("#result2").text( $("p#pid2").hasClass("red") );
         });
      </script>    
      <style>
         .red { color:red; }
         .green { color:green; }
      </style>
   </head>  
   <body>
      <p class = "red" id = "pid1">Name : Disuza Jen.</p>
      <p class = "green" id = "pid2">Mobile : 123456789.</p>
      <div id = "result1"></div>
      <div id = "result2"></div>
   </body>  
</html>

Now above exaple see hasClass() function matched element of result1 and result2 id and result 1 show not matched value result and result2 show matched result ,Return as true or false.

 Imprtant Note :
The jQuery hasClass() method is used to check whether selected elements have specified class name or not. It returns TRUE if the specified class is present in any of the selected elements otherwise it returns FALSE.

jQuery Animations() Method
Perform a custom animation of a set of CSS properties.The jQuery animate() method is used to create custom animations.

 Syntax :
$(selector).animate({params},speed,callback);

 following information or paramter required ;
1-option speed paramater pass,
2-callback paramter is a function call when complete animation process.

 Code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({   opacity: 0.25,
    left: "+=50",
    height: "toggle"
  },function() {
            alert('animation is completed.');
                });
    });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<p>Name: Disuza Jen</p>
<p>Mobile: 1234567890</p>
<div style="background:red;height:100px;width:100px;position:absolute;"></div>
</body>
</html>


now above example call animation method left to right direction,with specified speed parameter,
below simple example is call animation and passed parameter
:

 
$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

animation start postion, defined opacity value, height and speed of animation if aniation is completed call function or above exmaple generate alert animation is completed.

 jQuery fadeIn() Method
The .fadeIn() method animates the opacity of the matched elements.

 Syntax :
selector.fadeIn(speed,[callback]);

 Parameters
1-speed − A string representing one of the three predefined speeds :- 
a-slow,
b-def,
c-fast
OR
the number of milliseconds to run the animation
2-callback − This is optional parameter representing a function to call once the animation is complete.

 Code :
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
          <script type = "text/javascript" language = "javascript">
            $(document).ready(function() {
            $("#in").click(function(){
               $(".target").fadeIn( 'slow', function(){ 
                  $(".log").text('Fade In Complete');
               });
            });
            $("#out").click(function(){
               $(".target").fadeOut( 'slow', function(){ 
                  $(".log").text('Fade Out Complete');
               });
            });
      
         });
      </script>    
      
   </head>  
   <body>
   <h1>Free Teachnology Blogspot</h1>
      <p>Name: Disuza Jen</p>
      <p>Mobile: 1234567890</p>
      <p>fadeIn and fadeOut example of show hide and unhide element of particular element.</p>
      <button id = "out"> Fade Out </button>
      <button id = "in"> Fade In</button> 
      <div class = "target">
         <p>Name: Disuza Jen</p>
      <p>Mobile: 1234567890</p>
      </div>
      <div class = "log"></div>
   </body> 
</html>

Simple example that fadeIn and fadeOut target element are hide and show using method.

:eq() Selector

Select the element at index n within the matched set.
The index-related selectors
a-:eq(), 
b-:lt(), 
c-:gt(), 
d-:even, 
e-:odd
 filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set.

Code:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body> 
 <h1>Free Teachnology Blogspot</h1>
      <p>Name: Disuza Jen</p>
      <p>Mobile: 1234567890</p>
<table border="1">
  <tr>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
  </tr>
  <tr>
     <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
  <tr>
    <td>Test 7</td>
    <td>Test 8</td>
    <td>Test 9</td>
  </tr>
</table>
 <script>
  $("td:eq(2)").css("color","red");
    $("td:eq(4)").css("color","green");
       $("td:eq(7)").css("color","blue");
</script> 
</body>
</html>


above html code and jquery code use eq method to check matched element of td element and apply color.
I hope that you like my code and you understand very well,if you like please share and comment.

Labels:

Comments

Post a Comment

Popular posts from this blog

using PDO database connection add,update,delete,edit operation

PDO advantage : 1-Object Oriented 2-Bind parameters in statements (security) 3-Allows for prepared statements and rollback functionality (consistency) 4-Throws catcheable exceptions for better error handling (quality) 5-Exception mode; no need to check error state after each API call. It's best to tell PDO how you'd like the data to be fetched. You have the following options: 1-PDO::FETCH_ASSOC: returns an array indexed by column name. 2-PDO::FETCH_BOTH: (default):returns an array indexed by both column name and number. 3-PDO::FETCH_BOUND:Assigns the values of your columns to the variables set with the ->bindColumn() method. 4-PDO::FETCH_CLASS: Assigns the values of your columns to properties of the named class. It will create the properties if matching properties do not exist. 5-PDO::FETCH_INTO:Updates an existing instance of the named class. 6-PDO::FETCH_LAZY: Combines. 7-PDO::FETCH_BOTH/PDO:FETCH_OBJ, creating the object variable names as t...
Post a Comment
Read more

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links user want to share any information then use following code  and read step by step Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links if you want share profile on following social link : 1-Facebook 2-twitter.com 3-LinkedIn 4-google +, Code link : https://drive.google.com/open?id=1IzTZZh_0euDqFSHL_vPRiQePlNTw3h-q Demo link : http://freeteachnology.hol.es/socialshare/ To modify a page's thumbnail image, description, and additional metadata for these services, you can provide meta tags in the HTML code of the page.Implementing Open Graph Meta Tags You can implement meta tags in a number of ways. In content management systems might  be allow you to modify a page's meta tags , then use following code in meta section of your project code, <link href="bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-tour.m...
Post a Comment
Read more

GUID for globally unique identifier

How to create GUID in php 1-guid stands for globally unique identifier generally used to create random unique strings in php, create access token in php 2-Mostly use of GUID for generating access token, generate unique id, generating unique string in php. Using this article how to create guide in php you can create a random string for any use to keep unique 3-GUID consists of alphanumeric characters only and is grouped in five groups separated by hyphens as seen in this example: 3F2504E0-4F89-11D3-9A0C-0305E82C3301 Eg:- <?php /** * Generate Globally Unique Identifier (GUID) * E.g. 2EF40F5A-ADE8-5AE3-2491-85CA5CBD6EA7 * * @param boolean $include_braces Set to true if the final guid needs * to be wrapped in curly braces * @return string */ function generateGuid($include_braces = false) { if (function_exists('com_create_guid')) { if ($include_braces === true) { return com_create_guid(); } else { return substr(com_cr...
2 comments
Read more