Tutorialspoint

Jquery Programming Examples

Learn jQuery with Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<script type="text/javascript">
function changeText2(){
    var userInput = document.getElementById('userInput').value;
    var lnk = document.getElementById('lnk');
    lnk.href = "https://www.pexels.com/search/" + userInput;
    lnk.innerHTML = lnk.href;
    var lnk2 = document.getElementById('lnk2');
    lnk2.href = "https://www.unsplash.com/search/" + userInput;
    lnk2.innerHTML = lnk2.href;
}
function Pexels() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");
  // Get the output text
  var text = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
function Unsplash() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck2");
  // Get the output text
  var text = document.getElementById("text2");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
</script>
Pexels: <input type="checkbox" id="myCheck" onclick="Pexels()"><br>
Unsplash: <input type="checkbox" id="myCheck2" onclick="Unsplash()"><br>

<p id="text" style="display:none"><a href="" id=lnk>nothing here yet</a></p>
<p id="text2" style="display:none"><a href="" id=lnk2>nothing here yet</a></p>
<input type='text' id='userInput' value=' ' />
<input type='button' onclick='changeText2()' value='text'/>
</body>
</html>

ARGUS Community accordion

<!doctype html>
<html lang = "en">

   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion - Default functionality</title>
		
      <link rel = "stylesheet" 
         href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>
		
  
      <script>
         $(function() {
            $( "#accordion" ).accordion();
         });
      </script>
   </head>
	
   <body>
      <div id = "accordion">
         <h3>ARGUS Enterprise</h3>
			
         <div>
            <p>
               
<strong>Q: What are the installation requirements and installation guide for ARGUS Enterprise? 
<br> </strong>
A: Click here to access the ARGUS Enterprise product documentation, installation and planning guides. 
 <br>
 <br>
<strong>Q: Where do I download ARGUS Enterprise? </strong><br>
A: Click here to access the download homepage for ARGUS Enterprise.
  <br>
 <br>
Q: How do I check out/activate my ARGUS Enterprise license/licence? <br>
A: To check out your license/licence, launch the ARGUS Enterprise Configuration Utility >Go to Licensing tab >Select Add New License >Fill out required information >Activate over the internet.
 <br> <br>
 
Q: How do I check in/deactivate my ARGUS Enterprise license/licence? <br>
A: To check in your license/licence, launch the AE Configuration Utility >Go to Licensing tab >Click on the license/licence box information on the right >Select ‘Check In Selected Licenses’ >Check in over the internet.
 
Q: How do I refresh my ARGUS Enterprise license/licence to remove an expiry date? 
A: To refresh your license/licence, launch the ARGUS Enterprise Configuration Utility >Go to Licensing tab >Click on the license/licence box information on the right >Select Refresh Selected Licenses. Note: If modules disappear, please select the license/licence box again to do a complete check in and check out.
 
Q: How do I move my workstation license/licence to another computer? 
A: To move your license/licence to another computer, launch the ARGUS Enterprise Configuration Utility >Go to Licensing tab >Click on the license/licence box information on the right >Select ‘Check In Selected Licenses’ >Check in over the internet. Activate the secondary computer, by launching the AE Configuration Utility and selecting Add New License.  
 
Q: How do I move my ARGUS Enterprise installation to another computer? 
A: To move your install to another computer you will first need to check in the license/license on the existing workstation then click here to download and run the install on the new workstation.  Once the install has completed you can check out the license to activate the software.
 
Q: How do I find the full version and product key/serial number of my ARGUS Enterprise product? 
A: To find the version and product key/serial number information, open ARGUS Enterprise >Go to File tab >Go to Help tab >Application Version listed under ‘About’.
 
Q: How do I get customer support for my ARGUS Enterprise product? 
A: For our service plan customers, please login to the ARGUS Community to access the many channels of support offered.  Within the community you can search the Knowledge Base, chat with a Live Agent, submit a case online, participate in the Live Forum Feeds, browse our new Document & Video Libraries and get updates on existing cases or browse cases reporting in the past.  
For our non-service plan customers, please visit our Support Home page for Frequently Asked Questions.  
 
Q: The maintenance on my ARGUS Enterprise key expired. Who should I contact to renew my service plan? 
A: Please contact your Account Manager, if your license/licence is more than 30 days. If your license/licence is expired by less than 30 days, please contact Sales Operations at 1-888-MyARGUS Option 4. 

Q: Where can I subscribe to ARGUS product updates? 
Click here to subscribe to product updates.
            </p>
         </div>
			
         <h3>CSS</h3>
			
         <div>
            <p>
               CSS is the acronym for "Cascading Style Sheet". This 
                  tutorial covers both the versions CSS1,CSS2 and CSS3, 
                  and gives a complete understanding of CSS,
                  starting from its basics to advanced concepts.
            </p>
         </div>
			
         <h3>AngularJS</h3>
			
         <div>
            <p>
               AngularJS is a very powerful JavaScript library. It is used in 
                  Single Page Application (SPA) projects. It extends HTML DOM
                  with additional attributes and makes it more responsive to 
                  user actions. AngularJS is open source, completely free, 
                  and used by thousands of developers around the world.
                  It is licensed under the Apache license version 2.0.
            </p>
				
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
				
         </div>
			
         <h3>PHP</h3>
			
         <div>
            <p>
               The PHP Hypertext Preprocessor (PHP) is a programming language 
                  that allows web developers to create dynamic content that
                  interacts with databases. PHP is basically used for developing 
                  web based software applications. This tutorial helps you to 
                  build your base with PHP.
            </p>
				
            <p>
               Before proceeding with this tutorial you should have at least basic 
                  understanding of computer programming, Internet, Database, and 
                  MySQL etc is very helpful.
            </p>
				
         </div>
      </div>
   </body>
</html>

Coupons List on Cart Page sample

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
      $("ul").append("<li>new item <a href='javascript:void(0);' class='del'>&times;</a></li>"); 
      });
 
    $(document).on("click", "a.del" , function() {
        $(this).parent().remove();
    });
});
</script>
</head>
<body>
    <button>Add</button>
    <p>Click the above button to dynamically add new list items. You can remove it later.</p>
    <ul>
        <li>item1 <a href='javascript:void(0);' class='del'>remove</a>
        <a href='javascript:void(0);' class='add'>add</a>
        </li>
        <li>item2 <a href='javascript:void(0);' class='del'>remove</a>
        <a href='javascript:void(0);' class='add'>add</a>
        </li>
        <li>item3 <a href='javascript:void(0);' class='del'>remove</a>
        <a href='javascript:void(0);' class='add'>add</a>
        </li>
        <li>item4 <a href='javascript:void(0);' class='del'>remove</a>
        <a href='javascript:void(0);' class='add'>add</a>
        </li>
        <li>item5 <a href='javascript:void(0);' class='del'>remove</a>
        <a href='javascript:void(0);' class='add'>add</a>
        </li>
    </ul>
</body>
</html>

Content Manipulation

<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">
		$(document).ready(function(){
		   $("#division").click(function(){
		      var content=$(this).html();
		      $("#result").text(content);
		       
		   }); 
		 });
		    
		</script>
      
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

frame

<title>Social</title>
<meta charset="UTF-8"/>
<meta name="robots" content="noindex" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://technoxia.com/ifload.js"></script>
<style>
body{
    margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;}
</style>

<center>
<iframe id="container" frameborder="0" scrolling="no" width="300" height="250"></iframe></center>
<div id="tabs">
<a rel='https://keralastatelotteryresult.co.in/kerala-lottery-result-25-12-2018-sthree-sakthi-lottery-results-ss-137/?utm_source=Facebook&utm_medium=Social&utm_campaign=fb-remarketing&sz=1' onclick="loadit(this)"></a></div>

test

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {
        $('div.pretty-print-feature').each(function(i, d) {
             var featureHTML = '<table>';
            
            try {
                var features = JSON.parse(d.innerHTML).features;
            
                for (feature in features) {
                    featureHTML += '<tr>';
                    featureHTML += '<td class="table_detail w e s"><b>'+feature+'</b></td>';
                    featureHTML += '<td class="table_detail e s"><b>$ '+features[feature].price.grossprice+'</b> (Total excl. Tax: $ '+features[feature].price.netprice+')</td>';
                    
                      if (features[feature].promotion_details != undefined) {
                             featureHTML += '<td class="table_detail e s"><table>';
                            for (var i = 0;  i < features[feature].promotion_details.length; i++){
                                if (features[feature].promotion_details[i].discount_plan != undefined) {
                                 featureHTML += '<tr><td><b>promotion name<b></td><td>'+features[feature].promotion_details[i].discount_plan+'</td></tr>';
                                  if (features[feature].promotion_details[i].discount != undefined) {
                                      featureHTML += '<tr><td><b>promotion discount<b></td><td><b>$ '+features[feature].promotion_details[i].discount.grossprice+'</b> (Total excl. Tax: $'+features[feature].promotion_details[i].discount.netprice+'</td></tr>';
                                  }
                                   if (features[feature].promotion_details[i].promotion_conditions != undefined) {
                                       featureHTML += '<tr><td><b>promotion condition<b></td><td><ul>';
                                         for (var j = 0;  j < features[feature].promotion_details[i].promotion_conditions.length; j++){
                                              featureHTML += '<li>'+features[feature].promotion_details[i].promotion_conditions[j]+'</li>';
                                         }
                                       featureHTML += '<ul></td></tr>';
                                   }
                                }
                             
                            }
                             featureHTML +='</table></td>';
                      } 
                   featureHTML += '</tr>';
                }
                
                 featureHTML += '</table>'
                
                console.log(featureHTML);
                $(".tableresult").html(featureHTML);

            } catch (e) {
                console.log(e);
            }
        });
    });

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<div class="pretty-print-feature" style="display:none">{"features":{"TRANSIT_COVER":{"price":{"tax":"0.61","tax_rate":0.1,"currency":"AUD","grossprice":"6.67","netprice":"6.06"},"extra_service_code":"EXTCVD","promotion_details":[{"discount_plan":"33%","discount":{"tax":"0.30","tax_rate":0.1,"currency":"AUD","grossprice":"3.33","netprice":"3.03"},"promotion_conditions":["ItemInclusionsExclusionsCondition"]}],"startrack":false,"attributes":{"cover_min":1,"cover_max":5000,"amount":500.00,"article_value_threshold":500.0},"bundled":false,"is_shipment_feature":false}}}</div>
<div class="tableresult">
    
</div>
</body>
</html>

Setting Element Width and Height

<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">
          $(document).ready(function(){
             $('div').width('200px');
             $('div').eq(1).css('background-color','yellow');
             $('div').eq(2).css('background-color','red');
             $('div').eq(3).css('background-color','blue');
             $('div').eq(4).css('background-color','yellow');
          });
      </script>
		
      <style>
         div { 
            width:70px; height:70px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

Online jQuery Editor

<!DOCTYPE html>
<html>
   <head>
      <meta https-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width = 600">
      <title>
      </title>
   </head>
   <body bgcolor="#F6F6F6" style="margin: 0;padding: 0px;">
      <table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #f6f6f6;width: 100%;padding-top: 20px;">
         <tbody>
            <tr>
               <td>
                  <table align="center" cellpadding="0" cellspacing="0" border="0" max-width="600" style="margin: 0 auto;">
                     <tbody>
                        <tr>
                           <td>
                              <!-- HEADER STARTS HERE -->
                              <table align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #fff;">
                                 <tbody>
                                    <tr>
                                       <td style="display: block;line-height: 0;width: 5px;">
                                          &nbsp;
                                       </td>
                                       <td style="text-align: center;padding:8px 0;border-bottom: 1px solid #e9e9e9;">
                                          <a href="https://www.netmeds.com/" target="_blank">
                                          <img src="http://imgs.netmeds.biz/2016/05/13/net-logo.jpg" title="Netmeds.com - India Ki Pharmacy" alt="Netmeds.com - India Ki Pharmacy"/>
                                          </a>
                                       </td>
                                       <td style="display: block;line-height: 0;width: 5px;">
                                          &nbsp;
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                              <!-- HEADER ENDS HERE -->
                              <table  border="0" cellspacing="0" cellpadding="0" width="600" align="center" style="font-family: Arial, Helvetica, sans-serif;background-color: #fff;">
                                 <tbody>
                                    <tr>
                                       <td style="display: block;line-height: 0;height: 20px;">
                                          &nbsp;
                                       </td>
                                    </tr>
                                    <tr>
                                       <td style="font-size:12px;color: #3b3b3b;line-height: 22px;padding: 0 25px;">
                                          Hi &lt;Name&gt;,
                                       </td>
                                    </tr>
                                    <tr>
                                       <td style="display: block;line-height: 0;height: 10px;">
                                          &nbsp;
                                       </td>
                                    </tr>
                                    <tr>
                                       <td style="font-size:12px;color: #3b3b3b;line-height: 22px;padding: 0 25px;">
                                          Thanks for choosing Netmeds! Your order has been placed succesfully. You can track your order below.
                                       </td>
                                    </tr>
                                    <tr>
                                       <td style="display: block;line-height: 0;height: 21px;">
                                          &nbsp;
                                       </td>
                                    </tr>
                                    <tr>
                                       <td style="font-size:12px;color: #3b3b3b;line-height: 22px;padding: 0 25px;">
                                          <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                                             <tbody>
                                                <tr>
                                                   <td style="width: 50%;">
                                                      <table cellpadding="0" cellspacing="0" border="0">
                                                         <tbody>
                                                            <tr>
                                                               <td style="width: 50%;">Order No</td>
                                                               <td>Expected Delivery:</td>
                                                            </tr>
                                                            <tr>
                                                               <td><b>12345</b></td>
                                                               <td><b>Wed, Apr 10, 2019 </b></td>
                                                            </tr>
                                                         </tbody>
                                                      </table>
                                                   </td>
                                                   <td align="right" style="font-size:13px;color: #3b3b3b;line-height: 32px;width: 40%;vertical-align: middle;">
                                                      <a href="" target="_blank" style="text-decoration: none;color: #3b3b3b;background-color: #02b7c2;color: #fff;padding: 7px 11px;">Track Order</a>
                                                   </td>
                                                </tr>
                                             </tbody>
                                          </table>
                                       </td>
                                    </tr>
                                    <tr>
                                       <td style="display: block;line-height: 0;height: 25px;">
                                          &nbsp;
                                       </td>
                                    </tr>
                                    <tr>
                                       <td style="padding-left: 20px;padding-right: 20px;">
                                          <table align="center" border="0" cellspacing="0" cellpadding="0" style="background-color: #ffffff;width: 100%;">
                                             <tbody>
                                                <tr>
                                                   <td style="text-align: center;">
                                                      <table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 100%;  ">
                                                         <tbody>
                                                            <tr>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;background-color: #e9e9e9;">
                                                                  No
                                                               </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;background-color: #e9e9e9;">
                                                                  Product Name
                                                               </td>
                                                                  <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;background-color: #e9e9e9;">
                                                                  MRP
                                                               </td>
                                                                  <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;background-color: #e9e9e9;">
                                                                  Quantity
                                                               </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;background-color: #e9e9e9;">
                                                                  Discount
                                                               </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;background-color: #e9e9e9;">
                                                                  Net Price
                                                               </td>
                                                            </tr>
                                                            <tr style="">
                                                             <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;border-bottom: 1px solid #ccc;">
                                                               1
                                                            </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;border-bottom: 1px solid #ccc;">
                                                                  Calpol 
                                                               </td> 
                                                                  <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;border-bottom: 1px solid #ccc;">
                                                                  Rs.20.00
                                                               </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;border-bottom: 1px solid #ccc;">
                                                                  1
                                                               </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;border-bottom: 1px solid #ccc;">
                                                                  0
                                                               </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;border-bottom: 1px solid #ccc;">
                                                                  Rs. 20.00
                                                               </td>
                                                            </tr>
                                                              <tr style="">
                                                             <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;border-bottom: 1px solid #ccc;">
                                                               2
                                                            </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;border-bottom: 1px solid #ccc;">
                                                                  Dettol
                                                               </td>
                                                                  <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;border-bottom: 1px solid #ccc;">
                                                                  Rs.55.00
                                                               </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;border-bottom: 1px solid #ccc;">
                                                                  1
                                                               </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;border-bottom: 1px solid #ccc;">
                                                                  0
                                                               </td>
                                                               <td style="color: #242424;font-size:12px;font-weight:bold;text-align: left;padding: 15px 8px;width: 30%;border-bottom: 1px solid #ccc;">
                                                                  Rs. 55.00
                                                               </td>
                                                            </tr>
                                                         </tbody>
                                                      </table>
                                                   </td>
                                                </tr>
                                             </tbody>
                                          </table>
                                       </td>
                                    </tr>
                                    <tr style="line-height: 0">
                                       <td style="display: block;height: 25px;line-height: 0">
                                          &nbsp;
                                       </td>
                                    </tr>
                                    <tr>
                                       <td>
                                          <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
                                             <tbody>
                                                <tr>
                                                   <td align="left" style="font-size:12px;color: #3b3b3b;line-height: 22px;padding: 0 25px;width: 50%;">
                                                      <a href="#" target="_blank" style="color: #3b3b3b;">View Details &#8811;</a>
                                                   </td>
                                                   <td align="right" style="font-size:12px;color: #3b3b3b;line-height: 22px;padding: 0 25px;">
                                                      <table cellspacing="0" cellpadding="0" border="0">
                                                         <tbody>
                                                            <tr>
                                                               <td style="padding: 10px;">
                                                                  Net Paid
                                                               </td>
                                                               <td>
                                                                  Rs. 60.00
                                                               </td>
                                                            </tr>
                                                            <tr>
                                                               <td>
                                                                   You Saved
                                                               </td>
                                                               <td>
                                                                  Rs.0
                                                               </td>
                                                            </tr>
                                                         </tbody>
                                                      </table>

                                                   </td>
                                                </tr>
                                             </tbody>
                                          </table>
                                       </td>
                                    </tr>
                                    <tr>
                                       <td style="font-size:12px;color: #3b3b3b;line-height: 22px;padding: 0 25px;">
                                          <a href="#" target="_blank" style="color: #3b3b3b;">View Details &#8811;</a>
                                       </td>
                                    </tr>
                                    <tr style="line-height: 0">
                                       <td style="display: block;height: 25px;line-height: 0">
                                          &nbsp;
                                       </td>
                                    </tr>
                                    <tr>
                                       <td style="font-size:12px;color: #3b3b3b;line-height: 22px;padding-left: 25px;padding-right: 25px;">
                                          Stay Healthy!
                                       </td>
                                    </tr>
                                    <tr style="line-height: 0">
                                       <td style="display: block;height: 3px;line-height: 0">
                                          &nbsp;
                                       </td>
                                    </tr>
                                    <tr>
                                       <td style="font-size:12px;color: #3b3b3b;line-height: 22px;padding-left: 25px;padding-right: 25px;font-style: italic;">
                                          Team Netmeds
                                       </td>
                                    </tr>
                                    <tr style="line-height: 0">
                                       <td style="display: block;height: 10px;line-height: 0">
                                          &nbsp;
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                              <!--CONTENT ENDS HERE -->
                              <!--FOOTER STARTS HERE -->
                              <table border="0" cellspacing="0" cellpadding="0" width="600" align="center" style="font-family:Arial, Helvetica, sans-serif;background:#02b7c2;">
                                 <tbody>
                                    <tr>
                                       <td style="border-top: 1px solid #e9e9e9;border-bottom:  1px solid #e9e9e9; ">
                                          <table border="0" cellspacing="0" cellpadding="0" width="600" align="center" style="width: 95%;">
                                             <tbody>
                                                <tr style="
                                                   line-height: 0;
                                                   ">
                                                   <td  style="display: block;height: 8px;">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                   <td>
                                                      <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
                                                         <tbody>
                                                            <tr>
                                                               <td style="text-align: left;width: 50%">
                                                                  <table align="left" cellpadding="0" cellspacing="0" border="0">
                                                                     <tbody>
                                                                        <tr>
                                                                           <td style="display: block;line-height: 0;width: 8px;">
                                                                              &nbsp;
                                                                           </td>
                                                                           <td style="font-size: 11px;color: #fff;vertical-align: middle;padding-right: 5px;">
                                                                              Follow us:
                                                                           </td>
                                                                           <td style="text-align: left;color: #fff;font-size: 10px;vertical-align: middle;">
                                                                              <a href="https://www.facebook.com/NetMeds" target="_blank" style="color: #fff;text-decoration: none;padding-right:5px;vertical-align: middle;">
                                                                              <img src="http://imgs.netmeds.biz/2019/04/02/fb.png" alt="Netmeds Facebook Offical Page" title="Netmeds Facebook Offical Page" style="vertical-align: bottom;" />
                                                                              </a>
                                                                              <a href="https://twitter.com/NetMeds" target="_blank" style="color: #fff;text-decoration: none;padding-right:5px;vertical-align: middle;">
                                                                              <img src="http://imgs.netmeds.biz/2019/04/02/tw.png" alt="Follow us on Twitter" title="Follow us on Twitter" style="vertical-align: bottom;" />
                                                                              <a href="https://in.linkedin.com/company/netmeds-marketplace-limited" target="_blank" style="color: #fff;text-decoration: none;padding-right:5px;vertical-align: middle;">
                                                                              <img src="http://imgs.netmeds.biz/2019/04/02/li.png" alt="Keep up with LinkedIn & get more insights about us" title="Keep up with LinkedIn & get more insights about us" style="vertical-align: bottom;" />
                                                                              </a>
                                                                           </td>
                                                                        </tr>
                                                                     </tbody>
                                                                  </table>
                                                               </td>
                                                               <td  style="text-align: right;width: 50px;">
                                                                  <table align="right" cellpadding="0" cellspacing="0" border="0">
                                                                     <tbody>
                                                                        <tr>
                                                                           <td style="font-size: 11px;color: #fff;vertical-align: middle;padding-right: 5px;">
                                                                              Get the app:
                                                                           </td>
                                                                           <td style="text-align: right;color: #fff;font-size: 10px;vertical-align: middle;padding-right:3px;">
                                                                              <a href="https://play.google.com/store/apps/details?id=com.NetmedsMarketplace.Netmeds&hl=en" target="_blank" style="color: #fff;text-decoration: none;vertical-align: middle;">
                                                                              <img src="http://imgs.netmeds.biz/2019/04/02/android.png" alt="Download Netmeds App for iOs from App Store" title="Download Netmeds App for iOs from App Store" style="vertical-align: bottom;padding-right:5px;" />
                                                                              </a>
                                                                              <a href="https://itunes.apple.com/in/app/netmeds/id1011070011?mt=8" target="_blank" style="color: #fff;text-decoration: none;vertical-align: middle;">
                                                                              <img src="http://imgs.netmeds.biz/2019/04/02/ios.png" alt="Download Netmeds App for Android from Play Store" title="Download Netmeds App for Android from Play Store" style="vertical-align: bottom;padding-right:5px;" />
                                                                              </a>
                                                                           </td>
                                                                           <td style="display: block;line-height: 0;width: 3px;">
                                                                              &nbsp;
                                                                           </td>
                                                                        </tr>
                                                                     </tbody>
                                                                  </table>
                                                               </td>
                                                            </tr>
                                                         </tbody>
                                                      </table>
                                                   </td>
                                                </tr>
                                                <tr style="
                                                   line-height: 0;
                                                   ">
                                                   <td  style="display: block;height: 7px;">&nbsp;</td>
                                                </tr>
                                             </tbody>
                                          </table>
                                       </td>
                                    </tr>
                                 </tbody>
                              </table>
                              <!--FOOTER ENDS HERE -->
                              <!--COPYRIGHTS STARTS HERE -->
                              <table border="0" cellspacing="0" cellpadding="0" width="600" align="center" style="background-color: #fff;">
                                 <tbody>
                                    <tr>
                                       <td style="height: 10px;display: block;line-height: 0;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                       <td style="color: #5d5d5d;font-size:11px;font-family:Arial, Helvetica, sans-serif;text-align: center;">&copy; 2019 Netmeds Marketplace Limited. All Rights Reserved.</td>
                                    </tr>
                                    <tr>
                                       <td style="height: 10px;display: block;line-height: 0;">&nbsp;</td>
                                    </tr>
                                 </tbody>
                              </table>
                              <!--COPYRIGHTS ENDS HERE -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Jquery

<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() {
			
            $("#driver").click(function(event){
               // Do global setting.
               $.ajaxSetup({
                  url: "result.html"
               });
					
               $.ajax( {
                  success:function(data) {
                     $('#stage').html(data);
                  }
               });
            });
				
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.html file:</p>
		
      <div id = "stage" style = "background-color:#cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Online jQuery Editor

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("button").click(function(){
       $("p").slideToggle('slow');
   });
});

</script>

</head>
<body>
    <p>hello 1</p>
    <p>hello 2</p>
<button>toggle</button>
</body>
</html>

1 2 3 4 5 6 7 ... 120 Next
Advertisements
Loading...

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.