Tutorialspoint

Compile and Execute C++0x Onlinej

<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 src="http://coffeescript.org/extras/coffee-script.js"></script>
	  
      <script type="text/coffeescript">
        $(document).ready ->
          $('div').click ->
            $(this).before '<div class="div"></div>'
            return
          return
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
	
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <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>

Compile and Execute C++0x Onlinej

<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){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
	
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
		
   </body>
	
</html>

Compile and Execute C++0x Onlinej

<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() {

            $(".inner").click(function () {
               var newcolor = $(this).css('background-color');
               $("#destination").wrap("<div class='newinner' style='border:2px solid "+newcolor+"';></div>");
            });

         });

      </script>
      <style>
         .inner { 
            margin:10px;
            padding:5px;
            border:2px solid #666;
         }
         .newinner { 
            padding:2px;
         }
      </style>
   </head>
   <body>
      <p>Click on any square below to see the result−</p>
      <div class="inner" id = "destination">Wrap This</div>
      <div class="inner" style="background-color:blue;">ONE</div>
      <div class="inner" style="background-color:green;">TWO</div>
      <div class="inner" style="background-color:red;">THREE</div>
   </body>
</html>

Compile and Execute C++0x Onlinej

<html>
   <head>
      <title>The Selector 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() {
            /*  Selects all elements matched by <p>that contain an element with a class of myclass.*/
            $("p > .myclass").css("background-color", "yellow");
         });
      </script>
   </head>
   <body>
      <p>Hello World</p>
      <p class="myclass"><span class="myclass">What a nice feeling!</span></p>
      <div>
         <p>Have a good day!</p>
      </div>
      <div></div>
   </body>
</html>

Compile and Execute C++0x Onlinej

<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() {
            $("div").click(function () {
               var content = '<div class = "div"></div>';
               $("#destination").wrap( content );
            });
         });
      </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>

      <div class = "div" id = "destination">THIS IS TEST</div>
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Compile and Execute C++0x Onlinej

<html>
   <head>
      <title>The Selector 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() {
            /* This would select all the elements */
            $("*").css("background-color", "yellow");
         });
      </script>  
   </head> 
   <body>
      <div class="big" id = "div1">
         <p>This is first division of the DOM.</p>
      </div>
      <div class="medium" id = "div2">
         <p>This is second division of the DOM.</p>
      </div>
      <div class="small" id = "div3">
         <p>This is third division of the DOM</p>
      </div>
   </body> 
</html>

Compile and Execute C++0x Onlinej

<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() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
 
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
 
</html>

Compile and Execute C++0x Onlinej

<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("Hello, World!");
         });
      </script>
   </head>
 
   <body>
      <h1>Hello</h1>
   </body>
</html>

Compile and Execute C++0x Onlinej

<html>
   <head>
      <title>The Selector 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() {
            /* Selects all elements that are the parent of another element, including text.*/
            $("li:contains(2)").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <ul>
         <li class="big">This is index : 0 list item of the DOM.</li>
         <li class="medium">This is index : 1 list item of the DOM.</li>
         <li class="small">This is index : 2 list item of the DOM.</li>
         <li class="small">This is index : 3 list item of the DOM.</li>
         <li class="small">This is index : 4 list item of the DOM.</li>
      </ul>
   </body>
</html>

Compile and Execute C++0x Onlinej

<html>
   <head>
      <title>The Selector 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() {
            /* Selects all elements that are the parent of another element, including text.*/
            $("li:parent").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <ul>
         <li class="big">This is index : 0 list item of the DOM.</li>
         <li class="medium">This is index : 1 list item of the DOM.</li>
         <li class="small">This is index : 2 list item of the DOM.</li>
         <li class="small">This is index : 3 list item of the DOM.</li>
         <li class="small">This is index : 4 list item of the DOM.</li>
      </ul>
   </body>
</html>

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

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