Tutorials Point, posted on 25th May, 2018

jQuery wrap element method

<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>

Tutorials Point, posted on 24th May, 2018

jquery selector p class

<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>

Tutorials Point, posted on 18th May, 2018

jQuery Examples wrap( html ) Method

<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>

Tutorials Point, posted on 18th May, 2018

jQuery Examples Select all elements

<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>

Tutorials Point, posted on 18th May, 2018

jQuery Examples $("input").val("Hello")

<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>

Tutorials Point, posted on 18th May, 2018

jQuery Examples Example Local Installation

<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>

Tutorials Point, posted on 17th May, 2018

jQuery selector text second

<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>

Tutorials Point, posted on 17th May, 2018

jQuery selector parent

<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>

Tutorials Point, posted on 17th May, 2018

jQuery selector lastchild li

<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 the last child.*/
            $("li:last-child").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>

Tutorials Point, posted on 17th May, 2018

jQuery selector firstchild li

<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 the first child.*/
            $("li:first-child").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...