Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint
Home
Q/A
Tools
Coding Ground
Current Affairs
UPSC Notes
Online Tutors
Code Examples
Whiteboard
Net Meeting
Articles
Library
Videos
eBooks

CDN Based Version

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">
         $(document).ready(function() {
            document.write("Salam le monde !");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Selecting all paragraphs except last

jquery 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").not(":last").css("background-color", "pink");
  });
});
</script>
</head>
<body>



<p>I am paragraph 1</p>
<p>I am paragraph 2</p>
<p>I am paragraph 3</p>
<p>I am paragraph 4</p>
<p>I am the last paragraph</p>

<button>Press me to check</button>

</body>
</html>

Online jQuery Editor

jquery 

<!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() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

$("button").on("click", function(){
  $(this).hide();
}); 


</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
<div id="buttonDiv1">
<button type="button" >hit</button>
</div>
</body>
</html>

https://p2p.danamas.co.id/account/ProvinceCityJsonAction_list.action

jquery 

<!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() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>

autocomplete

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script>
$(document).ready(function() {
    var arTags = ["apple", "orange"];
    $( "#tags" ).autocomplete({
    source: arTags});
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<input id="tags" type="text"/>
</body>
</html>

nmkm,

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">
         $(document).ready(function() {
            document.write("Hell World!");
         });
      </script>
   </head>
     <body>
      <h1>Hello</h1>
   </body>
	
 
</html>

Online jQuery Editor

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">
        //test div
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
        
         //Test para
          $("p").click(function(){	
            $(this).hide();
          });
         });
      </script>
   </head>
   <body>
       <p>Testing the hide functionality</p>
        <p>If you click on me, I will disappear.</p>
        <p>Click me away!</p>
        <p>Click me too!</p>
        <div id = "mydiv">
            Click on this to see a dialogue box.
        </div>
   </body>
</html>

How to work with jQuery appendTo() function

jquery 

<html>
   <head>
      <title>jQuery appendTo()</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		
      <script>
         $(document).ready(function() {
            $("div").click(function () {
               $(this).appendTo("#result");
            });
         });
      </script>
		
      <style>
         .div{ 
             margin:10px;
             padding:12px; 
             border:2px solid #666;
             width:60px;
         }
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
      <p id = "result"> THIS IS TEST </p>
      <hr />
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
		
   </body>
</html>

helloworld

jquery 

<html>

   <head>
      <title>jQuery Function</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

      <script>
        $(document).ready(function() {
          $("div").click(function() {alert("Hello, world!");});
        });
      </script>
      <style>
          #mydiv{
              background: #FFFaaa;
          }
      </style>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

AJAX

jquery 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script type="text/javascript" src="foodstore.js"></script>
</head>
<body onload="process()">
    <h3>The DOODLES NOODLES</h3>
    Enter the noodle which you want to eat: 
    <input type="text" id="userinput" />
    <div id="underinput" />
</body>
</html>

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

Follow

© Copyright 2019. All Rights Reserved.

Newsletter

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